前一篇我們使用了 JavaScript Standard Style（StandardJS）進行程式碼檢查。不過為了方便之後結合 Flow 工具，我們這次改以 ESLint 搭配 StandardJS 風格指引的方式，達到一模一樣的效果，並為支援 Flow 做好準備。

安裝 ESLint

先將 ESLint 安裝至全域中，以便我們使用 eslint 指令：

$ npm install eslint --global

安裝為專案開發環境相依套件：

$ npm install eslint --save-dev

設定 ESLint

於專案根目錄中輸入指令：

$ eslint --init

再依提示步驟設定：

? How would you like to configure ESLint? (Use arrow keys)
> Use a popular style guide

? Which style guide do you want to follow? (Use arrow keys)
> Standard

? What format do you want your config file to be in? (Use arrow keys)
> JSON

接著會自動安裝設定檔中所依賴的以下套件為專案開發環境相依套件：

  • eslint-plugin-standard
  • eslint-plugin-promise
  • eslint-config-standard

完成後便會產生 .eslintrc.json 設定檔。

同時我們也看到訊息中顯示：

npm WARN eslint-config-standard@10.2.0 requires a peer of eslint-plugin-import@>=2.2.0 but none was installed.
npm WARN eslint-config-standard@10.2.0 requires a peer of eslint-plugin-node@>=4.2.2 but none was installed.

因為缺了這兩個相依套件，所以最後手動補裝為專案開發環境相依套件：

$ npm install eslint-plugin-import --save-dev
$ npm install eslint-plugin-node --save-dev

Visual Studio Code extension

Visual Studio Code（VSCode）可以再加裝 VS Code ESLint extension 插件，讓我們可以在撰寫程式碼時就即時看到檢查提示及可自動修正的選項。

VS Code ESLint extension 必須先於全域或專案開發環境中安裝好 ESLint，否則不會啟用。並且專案中必須有 ESLint 的 .eslintrc.json 設定檔。

搭配 webpack 2

須先安裝 ESLint 及完成設定。

再安裝 eslint-loader 為專案開發環境相依套件：

$ npm install eslint-loader --save-dev

於 webpack 2 設定檔中的 module.rules 加入模組處理規則：

{
  // 設定為預先應用的規則（在其它規則前先作用）
  enforce: 'pre',
  // 資源檔案篩選條件
  resource: {
    // 須符合正則表示法條件
    test: [
      // 表示作用在所有 *.js 檔案
      /\.js$/
    ],
    // 須排除路徑條件（本機路徑，須為絕對路徑）
    exclude: [
      // 表示排除專案中的 node_modules 目錄
      path.join(__dirname, 'node_modules')
    ]
  },
  // 應用於此處理規則的 Loaders（轉換器）
  use: [
    {
      loader: 'eslint-loader'
    }
  ]
}

額外參考