使用 ESLint 做项目的代码规范

使用 ESLint 做项目的代码规范

名词解释

名词	解释
ESLint	一个针对代码规范的库
eslint-config-airbnb	ESLint 的扩展, airbnb 公司分享的代码规范配置

ESLint 主页
eslint-config-airbnb 主页

开始配置

进入项目目录, mac 电脑终端执行

(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

这句话相当于一次性给你安装了这么几个包: 

eslint

 

eslint-config-airbnb

 

eslint-plugin-jsx-a11y

 

eslint-plugin-import

 

eslint-plugin-react

接下来再安装一个 parser

$ npm i -S babel-eslint

到此为止, 你的 

package.json

 文件中应该包含了下面5个包(忽略版本号)

"devDependencies": {
"babel-eslint": "^8.2.1",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
},

VSCode 安装 ESLint 插件, 把下面的 

.eslintrc.js

 文件放在项目根目录

/**
* 参考文档
* https://eslint.org/ * https://www.npmjs.com/package/eslint-config-airbnb *
* 注意:
* 1.这个文件只由一人维护, 其他人尽量不要改动
* 2.请大家务必遵守规则, 提交的文件不允许出现红色波浪线
*/

module.exports = {
"parser": "babel-eslint",
"extends": "airbnb",
"globals": {
"FormData": true,
},
"rules": {
"indent": ["error", 2],
"no-use-before-define": 0,
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"import/prefer-default-export": 0,
"import/no-unresolved": 0,
"no-shadow": 0,
"react/sort-comp": 0,
"no-else-return": 0,
"react/prop-types": 0,
"no-unused-vars": 0,
"camelcase": 0,
"no-console": 0,
"react/require-default-props": 0,
"no-return-assign": 0,
"react/no-array-index-key": 0,
"max-len": 0,
"react/no-multi-comp": 0,
"react/forbid-prop-types": 0,
"import/extensions": 0,
"guard-for-in": 0,
"no-restricted-syntax": 0,
"dot-notation": 0,
"class-methods-use-this": 0,
"padded-blocks": 0,
"one-var": 0,
"no-trailing-spaces": 0,
"arrow-body-style": 0,
"no-mixed-operators": 0,
"brace-style": 0,
"no-multi-spaces": 0,
"no-plusplus": 0,
"no-dupe-keys": 0,
"radix": 0,
"comma-dangle": 0,
"func-names": 0,
"semi": 0,
},
}