采用ESLint + Airbnb进行配置
- 本地安装eslint 个人建议本地安装，当然也可以全局安装
npm install eslint --save-dev
2.创建基础的 .eslintrc.js
./node_modules/.bin/eslint –init
windows把斜杠都反过来,要不然会报’.’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
3.由于项目中需要使用到 ES2015 的语言规范，因此需要安装 babel-eslint ：
npm install --save-dev babel-eslint
安装完成之后，我们需要在 .eslintrc.js中修改配置
parser: “babel-eslint”
【注意】：若没有该项，请手动增加
4.下载一系列的依赖包
> `npm install –save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
eslint ： 不必要介绍了。可以直接到官网上查看
eslint-config-airbnb : 配置一些 eslint rules 的规范
eslint-plugin-import ：在使用 import 的时候，一些 rules 规范
eslint-plugin-react ： 一些 react 的 eslint 的 rules 规范
eslint-plugin-jsx-a11y： 一些 jsx 的 rules 规范
5.修改 “extends”: “airbnb”,
6…eslintrc.js 内容
module.exports = {
// 环境
“env”: {
“browser”: true,
“commonjs”: true,
“es6”: true,
“node”: true
},
// 使用的扩展库
“extends”: “airbnb”,
// 解析器用于解析代码
parser: “babel-eslint”,
// 解析器配置
“parserOptions”: {
“ecmaFeatures”: {
“jsx”: true
},
“ecmaVersion”: 2018,
“sourceType”: “module”
},
// 第三方插件
“plugins”: [
“react”
],
// 规则
“rules”: {
“react/jsx-uses-react”:2,
“react/jsx-uses-vars”:2,
“react/react-in-jsx-scope”:2,
“indent”: [
“error”,
“tab”
],
“linebreak-style”: [
“error”,
“windows”
],
“quotes”: [
“error”,
“single”
],
“semi”: [
“error”,
“always”
],
“react/jsx-indent”: [ // 解决react里面的缩进问题
“error”,
“tab”
],
“react/jsx-indent-props”: [ //
“error”,
“tab”
],
“no-tabs”: “off”, // 禁止缩进错误
// 允许使用 for in
“no-restricted-syntax”: 0,
“guard-for-in”: 0,
// 允许在 .js 和 .jsx 文件中使用 jsx
“react/jsx-filename-extension”: [1, { “extensions”: [".js", “.jsx”] }],
// 不区分是否是 无状态组件
“react/prefer-stateless-function”: 0
}
};
7.进行代码检测，在package.json 中添加一下内容，进行代码检测及修复
"lint": "eslint --ext .js --ext .jsx src", "lint-fix": "eslint --fix --ext .js --fix --ext .jsx src"
8.如果项目使用了git,可以通过使用pre-commit钩子在每次_提交前检测_，如果检测失败则禁止提交。可以在很大一定程度上保证代码质量。
这里我们使用了pre-commitgit包来帮助我们实现这一目标。
npm install pre-commit --save-dev
在package.json 中添加下面配置即可
“pre-commit”: [
“lint”
]
总结：基本满足我现在的开发规则