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 // 去掉行尾多余空格