工程師的寫 code 日常中，拼錯字必定不可少（誤）。造成程式壞掉的各種原因裡，「錯字」跟「型別錯誤」都是很常見的原因之一。前面我們知道，寫測試的目的是在保護程式碼，但如果要在每個地方都加上測試，以確保每個角落不會再發生這些低級失誤，多寫這些測試投入的成本，只會讓工作負擔更大，反而拖累專案本身的開發，簡直本末倒置。好險，現在有很多工具可以幫我們做靜態分析，把錯字跟型別錯誤等等的失誤交給工具來把關，我們只需投入在真正要寫測試的地方。

ESLint 是什麼

ESLint 是一套 JavaScript 的檢查工具。它可以幫我們檢查程式碼的錯誤，也提供自動修復的功能，另外，也可自訂檢查的規則。

現在我們來為專案加入 ESLint 吧。

安裝及配置 ESLint

首先，將 ESLint 安裝到專案：

npm install --dev-dependency eslint

因為 ESLint 需要讀到 configuration 才能運作，因此新增一個空的 .eslintrc 檔案。

現在可以這樣讓 ESLint 檢查專案裡的檔案：

npx eslint .

如果你是用 ES6 以上語法開發的話，應該會看到很多 Parsing error ：

error  Parsing error: The keyword 'import' is reserved

因為 ESLint 預設是用 ES5 來 parse 檔案，這時候，我們需要來設置 .eslintrc 檔案：

.eslintrc

{
  "parserOptions": {
    "ecmaVersion": 2019, // 支援 ECMAScript2019
    "sourceType": "module", // 使用 ECMAScript ****module 
    "ecmaFeatures": {
      "jsx": true // 支援 JSX
    }
  }
}

再執行一次 npx eslint . 沒有任何錯誤，因為還沒加上 rule 。現在加入幾個：

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error", // 結尾要加分號
    "quotes": ["error", "double"] // 字串雙引號
  }
}

"semi": "error" 代表結尾沒加分號會報錯誤， error 也可以改為 warn 或 off，改為警告或是關閉：

// error 的 output
12:2   error  Missing semicolon             semi

// warn 的 output
12:2   warning  Missing semicolon             semi

"quotes": ["error", "double"] 裡 array 第一個字串 error 代表提示的方式（同上），第二個字串 double 代表規則。

如果專案是在瀏覽器執行的話，再加上一個 rule 告訴 ESLint，允許 windows 等物件：

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "warn",
    "quotes": ["error", "double"]
  },
  "env": {
    "browser": true // 允許在瀏覽器執行
  }
}

使用 ESLint 的 VSCode 套件

可以在 VSCode 中安裝套件 VS Code ESLint extension

不用下 command 就可以直接在檔案裡提示錯誤，在錯誤的地方可以展開選項，選擇自動修正，或是忽略規則。

使用已經被建立好的擴充配置

自己自訂全部的配置太麻煩了，可以選擇使用已經建立好的擴充，如果要自訂的話，再針對特定的規則覆蓋原本的設定。

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["eslint:recommended"], // 使用推薦的 ESLint 設定
  "rules": {
    "semi": "warn" // 自訂配置，覆蓋推薦的 ESLint 設定
  },
  "env": {
    "browser": true
  }
}

extends 也可以不止接受一個配置，array 可以傳入多項配置，後面的配置會覆蓋前面的：

"extends": ["eslint:recommended", "...", "...", "...", "..."],

除了檢查之外，後面加上 --fix ESLint 可以執行自動修正，節省許多時間：

npx eslint . --fix

把 ESLint 加到 npm scripts

在 package.json 裡加入 lint 這個 script，之後就可以直接執行 npm run lint：

package.json

{
  ...
  "scripts": {
     "lint": "eslint ."
   },
  ...
}

這時候，你可能突然想到專案裡的 /dist 資料夾是 build 之後生成的，你並不想 ESLint 這個資料夾，可以新增一個檔案 .eslintignore ，加入想被 ESLint 忽略的檔案：

.eslintignore

node_modules
dist

雖然這樣就可以了，但如果 .eslintignore 裡的內容剛好跟 .gitignore 一樣的話，其實不用浪費空間新增重複內容的檔案，只要讓 ESLint 讀取 .gitignore 作為忽略的依據就行。

到 package.json 裡新增一個 --ignore-path 的 flag，後面接著 .gitignore：

package.json

{
  ...
  "scripts": {
     "lint": "eslint --ignore-path .gitignore ."
   },
  ...
}

執行 npm run lint ，/dist 這個資料夾也一樣可以被 ESLint 忽略了。