使用 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,
    },
}