跳到主要內容

格式化問題呢？

我們建議不要將 ESLint 用於格式化。建議改用 Prettier、dprint 或同類工具。

格式化工具與 Linter​

格式化工具是驗證並修正程式碼中空白問題的工具，例如間距和換行。格式化工具通常執行速度很快，因為它們只會變更空白，不會變更程式碼邏輯或命名。

程式碼檢查器是驗證並修正程式碼中邏輯與非空白風格問題的工具，例如命名一致性與偵錯。程式碼檢查器通常需要花費數秒或更多來執行，因為它們會套用許多邏輯規則到程式碼中。

使用代碼檢查器作為格式化器的問題​

程式碼檢查器設計在解析、檢查、報告、修正的循環中執行。這表示在程式碼檢查器能夠修正您的程式碼格式化問題前需要執行大量的中間作業。

此外，程式碼檢查器通常獨立彼此執行每個規則。這會帶來以下幾個問題

  • 任何兩個程式碼檢查規則都不能共用設定值，表示一個程式碼檢查規則的修正器可能會引發另一個程式碼檢查規則修正器的違規（例如，一個程式碼檢查規則可能使用不正確的縮排字元）。
  • 程式碼檢查規則修正器可能會衝突（套用於相同的程式碼範圍），迫使程式碼檢查器執行額外的循環來嘗試將修正器套用至一套乾淨的程式碼。

這些問題會造成程式碼檢查器執行得更慢，對於啟用了輸入型別程式碼檢查的專案來說這可能是一個更大的問題。使用程式碼檢查器進行格式化也會比專門的格式化器不一致，較無法處理邊界案例。因此，與格式化相關的程式碼檢查規則的維護成本通常非常高。

Prettier 等的現代格式化器以一種方式設計，不論原始格式如何，都能將格式化套用至所有程式碼。這個設計讓格式化器比程式碼檢查器更全面、更一致，而且維護成本更低。

建議用法 - Prettier​

typescript-eslint 和 ESLint 核心在任何建議的預設中都不會啟用任何與格式化相關的規則。不過，某些第三方外掛組態仍可能啟用這項不良慣例。

如果您在 ESLint 組態中看到啟用的格式化規則，我們建議您使用eslint-config-prettier以在您的 ESLint 組態中停用格式化規則。接著，您可以與 ESLint 分開設定您的格式化器。

透過將此組態新增到 extends 的結尾來使用該組態

eslint.config.js
// @ts-check

import eslint from '@eslint/js';
import someOtherConfig from 'eslint-config-other-configuration-that-enables-formatting-rules';
import prettierConfig from 'eslint-config-prettier';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...someOtherConfig,
  prettierConfig,
);

請注意，即使您使用不使用 prettier 的格式化器，您仍可以使用 eslint-config-prettier，因為它會獨家關閉所有格式化規則。

eslint-plugin-prettier​

eslint-config-prettier 與 eslint-plugin-prettier 不同。

  • 設定 只會停用核心及其他外掛程式中的規則。
  • 外掛程式 會在 ESLint 中載入並執行 Prettier。

在 ESLint 中執行 Prettier 速度可能會很慢：請參閱 效能疑難排解 > eslint-plugin-prettier。不過，由於未在 ESLint 中重新實作 Prettier 的邏輯，因此適用於透過 linter 進行格式化設定的警示不適用於 eslint-plugin-prettier。

ESLint 核心和格式化設定​

多數 linter 規則可分為兩到三種類別

  • **邏輯**：關注程式碼執行時序邏輯的規則（例如遺失 await 或無效的邏輯檢查）。
  • **樣式**：關注樣式疑慮，這些疑慮會影響程式碼執行時序邏輯，但通常不會影響邏輯。這些疑慮大多與命名或要使用的近似等效語法結構有關（例如函數宣告與箭頭函數）。
    • **格式化設定**：僅關注瑣碎事項（分號、空白等）的樣式規則，不會影響程式碼的執行時序邏輯。這些規則會與專屬的 formatter 發生衝突，例如 Prettier。

根據 ESLint 的 2020 年規則政策變更部落格文章，ESLint 本身已捨棄樣式 規則，包括格式化設定 規則。

樣式規則已凍結 - 我們不再會為樣式規則新增任何其他選項。我們已了解到，無法滿足每個人在樣式偏好上的需求，且現有的多數規則都包含許多難以理解的選項。樣式規則與間距、慣例及一般而言不會突顯錯誤或其他執行方式相關的所有事項有關。

我們反映了 ESLint 團隊捨棄格式化設定 和樣式 規則的轉變。除了錯誤修正以外，typescript-eslint 不會接受任何新格式化設定或樣式相關的拉取要求。

注意

我們未棄用或不建議使用 stylistic 設定。在可預見的未來，我們仍會持續納入這些設定及其規則，協助執行 TypeScript 相關的樣式一致性。

eslint-stylistic​

使用全面的格式化程式進行格式化的缺點在於，它會嚴格地將意見套用到程式碼。儘管你可以在 Prettier 中忽略程式碼和其他格式化程式，包括內嵌在 // prettier-ignore 註解中，但格式化程式比 linter 規則更具有意見性。

eslint-stylistic專案提供包含格式化和風格化規則的 ESLint 外掛程式。如果你強烈偏好不使用專用格式化程式，則該外掛程式可以作為你的格式化程式。

請參閱 ESLint Stylistic > 為何如此？以瞭解該專案動機的更多詳細資訊，以及 ESLint Stylistic > 開始使用以瞭解如何設定。