使用ESLint提高程式碼品質

Mon, 08 Aug 2022 00:00:00 +0000

ESLint可以做什麼？

檢查出語法錯誤：變數未經宣告、function未經定義、括號不成對等等

將code格式化：如何縮排、單引號或雙引號、分號、space及tab的大小等等

刪除多餘的程式碼：提醒刪除import但沒有使用的模組、空的function、變數宣告但未使用等等

確保遵循最佳實踐：使用嚴格相等 === 而非 ==

透過以上兩種工具的結合，可以確保自己的程式碼與團隊遵循的規則相符，

一旦通過ESLint的代碼檢查，表示程式碼品質在一定的水準內。

以下將會解說如何將vscode內的延伸模組Prettier與ESLint + Airbnb style guide做結合，

目標是禁用ESLint的格式規則，因為我們只需要用他來檢查語法錯誤，

並用Prettier格式化程式碼。

在開始之前，記得要先安裝 npm 及 npx。

下載VScode的 ESLint 及 Prettier 延伸模組
在我們的專案根目錄中安裝 ESLint 及 Prettier 套件

npm install -D eslint prettier
安裝 Airbnb style guide

npx install-peerdeps --dev eslint-config-airbnb
安裝 eslint-config-prettier（禁用ESLint格式化）

npm install --save-dev eslint-config-prettier

安裝 eslint-plugin-prettier（允許ESLint在我們寫程式時顯示格式錯誤）

1
2

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

最後，在vscode內設定格式化的工具為Prettier就好了，

設定的方式，可以在撰寫程式碼的地方，按右鍵»格式化文件，

這時候vscode會跳出你要選擇什麼延伸模組去格式化，

在這邊選擇 Prettier 即可。