前一篇我們講了ESLint的整體設定方式，了解原理後，最主要還是要熟悉一下裡面的rules，如果以前沒有使用linter的習慣，一開始真的會覺得受傷，But!用久了你就會覺得自己的code變得有點優雅XD，而且嚴謹很多，再加上ESLint可以被webpack整合，直接整合在我們開發流程中，非常方便！今天就要來講一下，和webpack整合的方式，還有產生report的指令！

講了這麼多，還是要來extends一下很紅的airbnb config：eslint-config-airbnb，因為ESLint的規則實在太多，我們也可以一條一條寫，但是如果有輪子我們直接用，不用自己造輪子也是不錯的，而且它的Style Guide也非常詳盡！等到真的對coding style很有心得，可以再替團隊開發自己的一套coding style。

使用方式

先安裝eslint相關檔案：

npm install eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

註：由於在寫文章的時候，package似乎有點問題，若有遇到問題，可以手動安裝eslint-plugin-jsx-a11y的2.2.3版：npm install eslint-plugin-jsx-a11y@^2.2.3 --save-dev

我們是把eslint裝在local，如果要在CLI使用eslint指令，需要把它安裝在global，然後就可以使用指令來建立 .eslintrc 檔：

eslint --init

我們這邊手動建立 .eslintrc 檔，把相關的config先設定好，這邊extend airbnb的config，並把airbnb有用到的三個plugins設定出來：

.eslintrc ：

{
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ]
}

接下來，我們要使用eslint指令產生結果，我們可以把指令寫在 package.json 中：

"lint": "eslint src; exit 0"

透過執行npm run，就可以看到結果：

npm run lint

或是我們也可以透過另一個指令，設定eslint report的格式，這邊一樣寫在 package.json 中：

• 指令 -o 後面是產生的報表路徑與檔名。
• 指令 -f 後面是產生的報表格式，ESLint支援許多格式，也有tab可以使用喔！

"lint:report": "eslint src -o eslint-report.html -f html; exit 0"

透過執行npm run，就可以看到目錄檔案底下產生 eslint-report.html ：

npm run lint:report

不管是在CLI上看到錯誤還是打開html，現在都可以清楚看到錯誤的訊息，可以在ESLint上找到錯誤訊息相關的詳細描述。覺得玻璃心有點受傷，因為跑出了一大堆錯誤訊息呀！XD目前我的檔案只有一隻完全pass，產生了283個錯誤！不過，有大部份都是因為空白格式和airbnb style設定的方式不同，晚一點可以來修改config，讓他們pass XD，當然也有一些是真的要調整的style，待會一起修正！

與Webpack整合

之前我們有介紹到webpack的loaders，ESLint就是放在preLoaders的地方，在bundle之前先用eslint-loader來檢查我們的程式碼是否可以pass，如果有問題webpack會停止bundle的過程，直到我們把有問題的地方修正！

先安裝eslint-loader：

npm install eslint-loader --save-dev

在 webpack.config.js 設定preLoaders：

module: {
  preLoaders: [
    {
      test: /\.js?$/,
      loader: 'eslint',
      include: path.resolve(__dirname, 'src'),
      exclude: /node_modules/
    }
  ],
  // ...
}

接下來，我們可以執行develop或是production的script：

npm run dev
// or
npm run prod

不管是哪一個，都會出現eslint的錯誤訊息，直到我們修正它！而我們在plugins也加上了NoErrorsPlugin，所以當bundle過程有錯誤時，並不會覆蓋前一個版本穩定的bundle.js，這就是結合webpack很方便的地方，透過loaders和plugins，讓我們更容易管理build的流程。

修正ESLint錯誤訊息

#comma-dangle

這應該是最容易被挑出的問題，通常我們在寫object或是array時，最後一筆不用加逗號，不過在ES6中是可以加逗號的，因為version control的關係，當資料要新增一筆時，diff通常會因為新增一個逗號變成兩行，但真正有意義被修改的只有一行，這讓diff比對顯得較為複雜一點點。所以這個規範，是希望最後一筆都要加逗號，這邊因為個人偏好的關係，這邊我要覆蓋它的rule：

"rules": {
  "comma-dangle": ["error", "never"]
}

#indent

這是指縮排的方式，可以從錯誤訊息發現，目前todos範例檔案都是使用4個空白做縮排，而airbnb的config是使用2個空白，所以我希望覆蓋這個rule：

"rules": {
  "comma-dangle": ["error", "never"],
  "indent": ["error", 4]
}

我們使用的react config，react/jsx-indent也有相同問題，所以一起修改設定：

"rules": {
  "comma-dangle": ["error", "never"],
  "indent": ["error", 4],
  "react/jsx-indent": ["error", 4]
}

#no-underscore-dangle

這邊也是個人偏好的問題，我想使用帶有底線的函式名稱來區分自己定義的函式與內建的，所以這邊也可以設定關閉：

"rules": {
  "comma-dangle": ["error", "never"],
  "indent": ["error", 4],
  "no-underscore-dangle": "off",
  "react/jsx-indent": ["error", 4]
}

#no-undef

在檔案中我使用到document這個global變數，雖然也可以特別自己定義global變數，但我們也可以在環境中指定為browser，自動把document設定全域變數：

"env": {
  "browser": true
}

#react/prefer-stateless-function

在React官網其實有提到，當component沒有state，單純只是依照props來做render時，最好寫成stateless component的方式，這樣效能會更佳，所以這邊我把components/Filter.js和components/Loading.js做改寫。

前面因為想說明常遇到的rules，並且介紹覆蓋rules的方式，所以稍微列出幾個rules。後面我有陸續修正其他相關rules，像是react/prop-types、react/jsx-filename-extension、space-before-blocks...等，這邊就不一一說明囉！我們也可以在hot reload時使用，一邊修改問題一邊看到error變少，等到ESLint error都修正完畢，webpack才能正常bundle出檔案！

我們已經學會使用ESLint讓code更有品質，更上一層樓，是不是很棒！目前修正完畢的code已經更新到Git 上囉！