Eslint使用（webpack中使用）

一、安装

npm i -D eslint
npm i babel-eslint \
eslint-config-airbnb \  // Airbnb的编码规范是在业界非常流行的一套规范
eslint-loader \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-react -g

二、配置文件

1. 新建.eslintsrc文件，在根目录下面。
   
   

2. 对于与.eslintrc文件进行设置

1）每个环境的全局变量都不尽相同（如 nodejs 中没有 DOM 相关的全局变量）。在配置文件中可以自由的指定执行环境。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
  },
};
（2）全局变量。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
// .eslintrc.js
module.exports = {
  globals: {
    var1: true,
    var2: true,
  },
};
（3）规则

在配置文件中可以设置一些规则。这些规则的等级有三种：

"off" 或者 0：关闭规则
"warn" 或者 1：打开规则，并且作为一个警告（不影响exit code）
"error" 或者 2：打开规则，并且作为一个错误（exit code将会是1）
 也可以通过注释来取消 /* eslint-disable */

以下是简单的配置文件：

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parser": "babel-eslint",
  "extends": "airbnb",
  "parserOptions": {
    "ecmaFeatures": 6,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "camelcase": "off",
    "arrow-parens": "off",
    "no-console": "warn",
    "no-unused-vars": "warn",
    "no-return-assign": "off",
    "no-param-reassign": ["error", { "props": false }],
    "no-nested-ternary": "off",
    "linebreak-style": 0,
    "eslint-disable-next-line":0
  }
}

3.webpack进行配置

我希望在项目开发的过程当中，每次修改代码，它都能够自动进行ESLint的检查。因为在我们改代
码的过程中去做一次检查，如果有错误，我们就能够很快地去定位到这个问题，由于是我们刚刚改
过的，因此立马把它修复掉就OK了。这就避免了我们每次改了一大堆代码之后，要去提交的时候，
再去跑一次ESLint，有可能有很多地方要去改，浪费我们的时间，因为你一下子就定位不到这个问
题在哪里了。同时我们每次改代码的时候去检测，也能改善我们写代码的规范性，让我们慢慢养成
规范写代码的习惯。在module下面的rules里面添加一个对象：需要加上 enforece: 'pre'，
这叫预处理。

{
  enforce: 'pre',           // 在webpack编译之前进行检测
  test: /.(js|jsx)$/,
  loader: 'eslint-loader',
  exclude: [                // 除去node_modules
    path.resolve(__dirname, '../node_modules')
  ]
},

三、使用

1. 通过命令行来启动 ，--ext命令行选项指定一个逗号分隔的扩展名列表eslint --ext .js --ext .jsx client/

2. webpack进行配置使用，在pagekage.json

   
   "scripts": {
      "lint": "eslint --ext .js --ext .jsx client/"
    },
   

3. eslint 修复，可能在使用eslint产生很多报错，可以通过工具进行修复, npm run lint-fix，也可以使用 /* eslint-disable */注释来清除错误。

"scripts": {
   "lint": "eslint --ext .js --ext .jsx client/",
   "lint-fix": "eslint --fix --ext .js --ext src/"
 },

四、Git提交

1. 安装 husky ，npm i husky -D
2. 修改package.json的scripts

"scripts": {
  ...
  "lint": "eslint --ext .js --ext .jsx client/",
  "precommit": "npm run lint"
}

五、editorconfig设置

不同编辑器对文本的格式会有一定的区别，如果不统一一些规范，可能你跟别人合作的时候，每次更新下来别人的代码就会一大堆报错。

1. 新建.editconfig文件
2. 文件内容

root = true                     // 表示当前是项目根目录

[*]                             // 所有文件都使用配置
charset = utf-8                 // 编码格式
indent_style = space            // Tab键缩进的样式，由space和table两种 一般代码中是space
indent_size = 2                 // 缩进size为2
end_of_line = lf                // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true     // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格