入門

快速入門

這個頁面是 ESLint 的新型「平面」組態格式 的快速入門，目的是讓您能儘快使用建議好的規則來對 TypeScript 程式碼執行 Linting。

注意

• 欲使用 ESLint 的舊版格式 取得相同的指南，請參閱 舊版 ESLint 設定。
• 有關使用類型資訊進行 linting 的快速入門資訊，請參閱 Typed Linting。

步驟 1：安裝

首先，安裝 ESLint、TypeScript 和 我們的工具組 所需的套件。

npm

npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

Yarn

yarn add --dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

pnpm

pnpm add --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

步驟 2：設定

接著，在專案根目錄建立一個 eslint.config.js 設定檔，並填入下列內容。

eslint.config.js

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

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

此程式碼將啟用我們建議您用於 linting 的 建議設定。

步驟 3：執行 ESLint

開啟終端機至您的專案根目錄，並執行下列指令。

npm

npx eslint .

Yarn

yarn eslint .

pnpm

pnpm eslint .

ESLint 將會 linting 目前資料夾中的所有 TypeScript 相容檔案，並將結果輸出至您的終端機。

詳細資訊

• tseslint.config(...) 是一個選用的輔助函式，點此處進一步了解。
• '@eslint/js'/eslint.configs.recommended 會開啟 eslint 的建議設定。
• ...tseslint.configs.recommended 會開啟 我們的建議設定。

後續步驟

如果您在讓它運作時遇到問題，請參閱我們的 疑難排解與常見問題集。

額外設定

我們建議您考慮啟用以下兩個設定。

• strict：包含較多見解規則的 recommended 超集合，也可能抓到 bug。
• stylistic：額外的規則，強制一致的風格，但不會顯著捕捉 bug 或更改邏輯。

eslint.config.js

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...tseslint.configs.strict,
  ...tseslint.configs.stylistic,
);

您可以在我們的 共用設定文件 中進一步了解它們。

Typed Linting

我們也提供許多強大的規則，利用 TypeScript 型別資訊的力量。 請造訪下一個頁面，取得型別規則設定指南。

文件資源

• 您可以在 ESLint 文件的設定部分中閱讀有關如何設定 ESLint 的更多資訊。
• 您可以閱讀 ESLint 文件的規則部分中，了解 ESLint 提供的規則。
• 您可在我們的 規則文件 中閱讀有關 typescript-eslint 提供的規則。