如何在 TypeScript 專案中加入 eslint 和 prettier

在建立完一個基本的 TypeScript Project 之後，我們希望可以加入 eslint 來做程式碼品質的管控，並且加入 prettier 來統一程式碼的格式。這篇文章將會介紹如何在 TypeScript Project 中加入 eslint 和 prettier。

安裝 eslint 和 設定檔

現在 eslint 有提供一個很簡單的方式來安裝，只需要執行以下指令即可：

npm init @eslint/config@latest

接著會詢問一些問題，像是這樣：

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · node
The config that you've selected requires the following dependencies:

eslint@9.x, globals, @eslint/js, typescript-eslint
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

根據他的指示來回答之後，會安裝了 eslint、globals、@eslint/js、typescript-eslint 這些套件，最後會產生一個 eslint.config.js 或是 ``eslint.config.mjs` 檔案，裡面會有 eslint 的設定檔。
按照上面的回答的話，config 檔案會長這樣：

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  { files: ["**/*.{js,mjs,cjs,ts}"] },
  { languageOptions: { globals: globals.node } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

eslint 在 v9.0.0 以後都推薦採用 eslint.config.js 這種 flat config 來設定，所以不再需要使用 .eslintrc 這種檔案來設定 eslint。可以參考這篇文章 來了解更多。

在上面的設定檔中，globals 是用來設定全域變數的，pluginJs 是用來設定 JavaScript 的規則，tseslint 是用來設定 TypeScript 的規則。裡面的 recommended 是指 eslint 推薦的規則。
從官方文件 中可以看到這些規則包含的內容。其中有打勾的是 eslint 推薦的規則。而 typescript-eslint 也有提供一些規則 可以根據自己的需求引入。例如將 tseslint.configs.recommended 改成 tseslint.configs.strict 就會引入更多的規則。而這兩個規則都沒有做 type-checking，如果要加入的話可以改用 tseslint.configs.recommendedTypeChecked 或 tseslint.configs.stylisticTypeChecked。

如果要在 command line 中執行 eslint 的話，可以使用以下指令：

npx eslint .

除了安裝 eslint 套件本身，也可以安裝 eslint 的 vscode 擴充套件，這樣在 vscode 中就可以直接看到 eslint 的警告。

安裝 prettier 和 設定檔

接著我們要安裝 prettier，只需要執行以下指令即可，如果安裝失敗的話可以加上 --legacy-peer-deps 來避免 peer dependencies 的問題。
這裡的 eslint-config-prettier 是用來關閉 eslint 中與 prettier 衝突的規則，因為 Linters 通常也會有一些格式化的規則，這樣會造成 prettier 和 eslint 之間的衝突，所以需要這個套件來關閉這些規則。
Prettier 和 Linter 之間的差異可以參考這篇文章。大意是在說 formatting 的部分交給 prettier，而 Linter 則是用來檢查程式碼的品質。

npm install --save-dev --save-exact prettier --legacy-peer-deps
npm install --save-dev eslint-config-prettier --legacy-peer-deps

接著將 prettier 的設定檔加入到 eslint.config.js 中：

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import eslintConfigPrettier from "eslint-config-prettier";


export default [
  {files: ["**/*.{js,mjs,cjs,ts}"]},
  {languageOptions: { globals: globals.node }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  eslintConfigPrettier
];

這裡的 eslintConfigPrettier 是用來關閉 eslint 中與 prettier 衝突的規則。

接著我們要加入 prettier 的設定檔，只需要在專案根目錄下新增一個 .prettierrc 檔案，裡面可以設定 prettier 的規則。因為 prettier 本身是一個 opinionated 的工具，他們的設計理念就是不要花太多時間在討論風格，所以只要使用最基本的設定就可以了，例如：

{
  "tabWidth": 2,
  "useTabs": false,
}

這篇關於 prettier 的官方文件 有提供所有的設定選項。而在這之前也可以看一下他們的選項哲學。

如果要在 command line 中執行 prettier 的話直接做 formatting 的話，可以使用以下指令：

npx prettier --write .

這樣就完成了 prettier 的設定。也可以安裝 prettier 的 vscode 擴充套件，這樣可以利用 vscode 的快捷鍵來做 formatting，而擴充套件的設定檔會是目前工作目錄下的，而 prettier 本身也是用 locally 安裝的 prettier，如果沒有安裝那就會用擴充套件附帶的 prettier，通常要避免這種情況，且如果要進行 Continuous Integration 的話安裝 prettier 在專案裡面是必須的。