webpack 添加eslint代码审查

npm i --save-dev babel-eslint
npm i --save-dev eslint-loader
npm info "eslint-config-airbnb@latest" peerDependencies

{ eslint: '^5.16.0 || ^6.1.0',
  'eslint-plugin-import': '^2.18.2',
  'eslint-plugin-jsx-a11y': '^6.2.3',
  'eslint-plugin-react': '^7.14.3',
  'eslint-plugin-react-hooks': '^1.7.0' }

npm i --save-dev eslint@5.16.0
npm i --save-dev eslint-plugin-import@2.18.2
npm i --save-dev eslint-plugin-jsx-a11y@6.2.3
npm i --save-dev eslint-plugin-react@7.14.3
npm i --save-dev eslint-plugin-react-hooks@1.7.0

在根目录创建.eslintrc文件

.eslintrc文件内容如下

{

"parser": "babel-eslint",

"extends": [

"airbnb"

],

"rules": {

// 缩进改为4空格，默认2空格

"indent": [0, 2],

// 对象尾随逗号取消

"comma-dangle": [2, "never"]

},

"plugins": [

"react"

],

"env": {

"browser": true,

"node": true,

"jasmine": true

}

}

 

1). 添加包

• npm install eslint --save-dev
• npm install eslint-loader --save-dev
• npm install eslint-plugin-html --save-dev 
  • 该插件用与检查写在script标签中的代码
• npm install babel-eslint --save-dev
  • babel-eslint解析器是一种使用频率很高的解析器，现在很多项目都使用了es6,为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译 后的代码使用babel-eslint这款解析器可以避免不必要的麻烦
• npm install eslint-plugin-react --save-dev
• npm install eslint-config-airbnb --save-dev
• npm install eslint-plugin-import --save-dev
• npm install eslint-plugin-jsx-a11y --save-dev

2)eslint 配置项

• root :
  • 限定配置文件的使用范围
• parse:
  • 指定eslint的解析器
• parserOptions:
  • 设置解析器选项
• extends:
  • 指定eslint规范
  • extends可以使用eslint官方推荐的，也可以使用第三方的，如：aribnb, google, standard。
    使用第三方的airbnb
•  
  plugins:
  • 引用第三方的插件
• env:
  • 指定代码运行的宿主环境
    
• rules:
  • 启用额外的规则或覆盖默认的规则
    

  • /**
     * "off" 或 0 - 关闭规则
     * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
     * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
     */
    

    　　

• globals:
  • 声明在代码中的自定义全局变量

 4)eslint官方提供了3种预安装包

• eslint-config-google:
• Google标准
• npm install eslint eslint-config-google -D
  
• eslint-config-airbnb
• Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，并且对各个插件的版本有所要求
• 你可以执行以下命令查看所依赖的各个版本：
  • npm info "eslint-config-airbnb@latest" peerDependencies
• 你会看到以下输出信息，包含每个了每个plugins的版本要求
  • 　　

    { eslint: '^5.16.0 || ^6.1.0',
      'eslint-plugin-import': '^2.18.2',
      'eslint-plugin-jsx-a11y': '^6.2.3',
      'eslint-plugin-react': '^7.14.3',
      'eslint-plugin-react-hooks': '^1.7.0' }

• 知道了每个plugins的版本要求后，代入以下命令执行安装即可使用
  • npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -D
    
• eslint-config-standard
  • Standard标准，它是一些前端工程师自定的标准
  • npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -D
    

3). 在工程根目录下创建.eslintrc文件

{
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"generator-star-spacing": [0],
"consistent-return": [0],
"react/forbid-prop-types": [0],
"react/jsx-filename-extension": [1, { "extensions": [".js"] }],
"global-require": [0],
"import/prefer-default-export": [0],
"react/jsx-no-bind": [0],
"react/prop-types": [0],
"react/prefer-stateless-function": [0],
"no-else-return": [0],
"no-restricted-syntax": [0],
"import/no-extraneous-dependencies": [0],
"no-use-before-define": [0],
"jsx-a11y/no-static-element-interactions": [0],
"no-nested-ternary": [0],
"arrow-body-style": [0],
"import/extensions": [0],
"no-bitwise": [0],
"no-cond-assign": [0],
"linebreak-style": [0],
"import/no-unresolved": [0],
"require-yield": [1],
"prefer-template":[0],
"no-undef":[0],
"no-param-reassign":[0],
"no-useless-escape":[0],
"no-plusplus":[0],
"no-mixed-operators":[0],
"object-shorthand":[0],
"no-console": [0],
"no-loop-func":[0],
"class-methods-use-this":[0],
"radix":[0],
"no-trailing-spaces":[0],
"comma-dangle": [0],
"no-underscore-dangle": [0],
"react/require-default-props": [0],
"no-unused-expressions": [0],
"react/sort-comp":[0],
"max-lines": [2,500],
"max-len": [2,125],
"react/jsx-boolean-value": [0],
"react/react-in-jsx-scope": [0],
"operator-assignment": [0],
"no-fallthrough": [0],
"react/no-array-index-key": [0],
"eqeqeq": [0],
"react/no-multi-comp": [0],
"react/no-unused-prop-types": [0],
"prefer-const": [0]
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
}