以下只提供一种用 eslint 校验CML项目的方案,开发者可以根据自己情况选择;
如何使用eslint校验本次提交
如何使用eslint规范CML项目
如何用eslint校验js文件
如何用eslint校验cml文件
standard 具体的规则参考 node_modules/eslint-config-standard/eslintrc.json
如何只用eslint校验本次提交
由于项目的历史原因,之前的提交都没有进行代码的eslint,如果贸然的使用eslint对项目进行修复,那么存在一定的风险,那么如何既能规避这部分风险,又能通过渐进式的方案对项目代码进行lint呢?
答案就是 lint-staged
注意lint-staged requires at least version 8.12.0 of Node, please upgrade
lint-staged 要求 Node >= 8.12.0
它可以帮助我们仅仅对本次提交的代码进行校验,而不会对原来的代码进行全盘校验;
npm i eslint lint-staged husky -D
然后在项目的package.json 中修改
"husky": {
"hooks": {
"pre-commit": "lint-staged",
}
},
"lint-staged": {
"src/**/*.js": "eslint --fix"
},
注意 lint-staged
配置对象的key值是要校验的文件目录路径
此时我们在修改 .js
代码,那么就会通过eslint进行校验了;
接下来就需要配置eslint相关的规则
如何使用eslint规范CML项目
CML项目对于系统要求
node >= 8.10.0
npm >= 5.6.0
注意lint-staged requires at least version 8.12.0 of Node, please upgrade
lint-staged 要求 Node >= 8.12.0,所以如果想仅仅对当前提交对校验,那么需要 node版本 >= 8.12.0
eslint校验.js文件
我们使用standard
标准下的eslint规范
npm i eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -D
在项目根目录新建 .eslintrc.js
文件,写入以下内容
module.exports = {
root:true,//
env: {
browser: true,
es6: true,
},
extends: [
'standard',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaVersion: 2018,
parser:"babel-eslint"
},
rules: {
}
}
经过以上步骤就可以对项目中的每次新提交的 .js
文件进行校验了;
比如按照 standard
的标准某些规则不太喜欢,那么可以在 rules
中覆盖设置,比如:
rules: {
"semi":"off" //0
}
eslint校验 .cml 文件
npm i eslint-plugin-vue babel-eslint -D
然后在项目中.eslintrc.js
中增加配置
//继承 vue/base 的配置,源码可参考 eslint-plugin-vue/lib/configs/base.js
extends: [
'plugin:vue/base',
'standard',
],
//关闭 plugin:vue/base 中的这两个规则,因为有时候可能会导致模板中某些校验无法通过;
rules: {
'vue/comment-directive': 'off',
'vue/jsx-uses-vars': 'off'
}
package.json
中增加在 lint-staged阶段增加对于 .cml
文件的校验
"lint-staged": {
"src/**/*.{js,cml}": "eslint --fix"
},
eslint 规则的配置开发者可以根据eslint官方文档自定义校验规则。
暂无答案!
目前还没有任何答案,快来回答吧!