[筆記] ESLint 8 → Eslint 9 升級指南以 Vue3 + TypeScript + Prettier 為例 @地瓜大的飛翔旅程

章節連結

內容

升級步驟
設定檔內容
可移除或改用的內容
程式碼

參考資料

ESLint 9 於 2024 年春迎來了一次重大的版本更新，將過往的巢狀設定風格變為扁平化。因此過往常互相衝突的 eslint 與 prettier 也終於可以有完整整合的機會。這邊筆記下升級的過程。

內容

官方宣告這邊請：ESLint v9.0.0 released

升級步驟

由於這次為重大更新，從既有的升版上來會遭於各種阻礙和套件間的衝突，且有些套件不支援或是其實根本不用安裝。因此建議重新設定一份，然後將既有的 rules 給備份下來方便對照。

1. 將既有專案的 .eslintrc 相關檔案更名為 __.eslintrc 當備用
2. 移除 node_modules 和 pnpm-lock.json ( package-lock.json, yarn.lock… 等)。可下指令執行：
rm -rf node_modules pnpm-lock.json

3. 重新安裝 eslint，並調整你的 package.json 的指令。現在僅需要：
“lint”: “eslint . ” 即可，剩餘的相關設定都可在設定檔中搞定

4. 現在的設定檔名稱都為 eslint.config.(js|cjs|mjs) 。請按照需求使用

5. 設定檔由於都已扁平化。若要後續維護方便，建議可由上到下，分為以下幾個區塊：
A. 全域設定區塊，像是 ignores, languageOptions
B. 已有寫好的 config, plugin 設定區塊套件
C. 根據專案客製化調整的區塊，建議會以副檔名作為區隔。

6. 若要增加 TypeScript 支援，可以將設定檔透過 typescript-eslint 所提供的 tseslint.config() 方法來自動添加 ts 的檢查方法

7. 若要加上 Prettier，僅需要引入 eslint-plugin-prettier/recommended，並搭配你自己的 prettier 設定

設定檔內容

其實每一個設定檔物件，都是可以有以下設定的。不過要注意順序，後者會把前者給蓋掉。

{
  "name": 配置物件的名稱
  "files": 包含 glob 模式的陣列，指定配置物件應適用的檔案。預設為所有檔案
  "ignores": 包含 glob 模式的陣列，指定配置物件不應適用的檔案。若單獨使用，就是全部忽略
  "languageOptions": 設定 JavaScript 的語言配置
  "linterOptions": 與檢查過程相關的設定物件
  "processor": 包含 preprocess() 和 postprocess() 方法的物件，或指示 plugin 內處理器名稱的字串
  "plugins": 包含已配置規則的物件。當 files 或 ignores 被指定時，這些規則配置僅對符合的檔案可用
  "rules": 當 files 或 ignores 被指定時，這些規則配置僅對符合的檔案可用。
  "settings": 包含應該對所有規則可用的名稱
}