iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
1
Modern Web

循序漸進學習 Javascript 測試系列 第 3

Day3 靜態分析:用 ESLint 檢查語法錯誤

工程師的寫 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 也可以改為 warnoff,改為警告或是關閉:

// 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 忽略了。


上一篇
Day2 從測試基礎著手:動手做一個超簡易測試工具
下一篇
Day4 靜態分析:自動排版就交給 Prettier 來做
系列文
循序漸進學習 Javascript 測試30

尚未有邦友留言

立即登入留言