ESLint 入門

ESLint 是一個用於識別和報告 ECMAScript/JavaScript 程式碼中發現的模式的工具，目標是使程式碼更一致並避免錯誤。

ESLint 是完全可外掛的。每個規則都是一個外掛程式，您可以在執行時新增更多規則。您也可以新增社群外掛、設定和解析器，以擴充 ESLint 的功能。

先決條件

要使用 ESLint，您必須安裝具有 SSL 支援的 Node.js (^18.18.0、^20.9.0 或 >=21.1.0)。（如果您使用的是官方 Node.js 發行版，則 SSL 始終內建在其中。）

快速開始

您可以使用此命令安裝和設定 ESLint

npm init @eslint/config@latest

# or

yarn create @eslint/config

# or

pnpm create @eslint/config@latest
1
2
3
4
5
6
7
8
9

如果您想使用託管在 npm 上的特定可共享設定，您可以使用 --config 選項並指定套件名稱

# use `eslint-config-standard` shared config

# npm 7+
npm init @eslint/config@latest -- --config eslint-config-standard

1
2
3
4
5

注意：npm init @eslint/config 假設您已經有 package.json 檔案。如果您沒有，請務必事先執行 npm init 或 yarn init。

之後，您可以像這樣在任何檔案或目錄上執行 ESLint

npx eslint yourfile.js

# or

yarn run eslint yourfile.js
1
2
3
4
5

設定

注意：如果您是從 9.0.0 之前的版本升級，請參閱遷移指南。

執行 npm init @eslint/config 後，您的目錄中將會有一個 eslint.config.js（或 eslint.config.mjs）檔案。在其中，您會看到一些像這樣設定的規則

// eslint.config.js
export default [
    {
        rules: {
            "no-unused-vars": "error",
            "no-undef": "error"
        }
    }
];
1
2
3
4
5
6
7
8
9

名稱 "no-unused-vars" 和 "no-undef" 是 ESLint 中規則的名稱。第一個值是規則的錯誤層級，可以是以下值之一

"off" 或 0 - 關閉規則
"warn" 或 1 - 將規則開啟為警告（不影響結束代碼）
"error" 或 2 - 將規則開啟為錯誤（結束代碼將為 1）

這三個錯誤層級可讓您精細控制 ESLint 如何套用規則（有關更多設定選項和詳細資訊，請參閱設定文件）。

您的 eslint.config.js 設定檔也將包含建議的設定，如下所示

// eslint.config.js
import js from "@eslint/js";

export default [
    js.configs.recommended,

    {
        rules: {
            "no-unused-vars": "warn",
            "no-undef": "warn"
        }
    }
];
1
2
3
4
5
6
7
8
9
10
11
12
13

js.configs.recommended 物件包含設定，以確保在規則頁面上標記為建議的所有規則都將開啟。或者，您可以透過在 npmjs.com 上搜尋「eslint-config」來使用其他人建立的設定。除非您從共享設定擴充或在設定中明確開啟規則，否則 ESLint 不會檢查您的程式碼。

全域安裝

也可以使用 npm install eslint --global 全域安裝 ESLint，而不是在本機安裝。但是，不建議這樣做，如果您全域安裝 ESLint，您使用的任何外掛或可共享設定仍然必須在本機安裝。

手動設定

您也可以在專案中手動設定 ESLint。

在開始之前，您必須已經有一個 package.json 檔案。如果您沒有，請務必事先執行 npm init 或 yarn init 來建立檔案。

在您的專案中安裝 ESLint 套件

npm install --save-dev eslint @eslint/js
1

新增一個 eslint.config.js 檔案

# Create JavaScript configuration file
touch eslint.config.js
1
2

將設定新增至 eslint.config.js 檔案。請參閱設定 ESLint 文件，了解如何新增規則、自訂設定、外掛等等。

import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];
1
2
3
4
5
6
7
8
9
10
11
12

使用 ESLint CLI 檢查程式碼
```
npx eslint project-dir/ file1.js
1
```
有關可用的 CLI 選項的更多資訊，請參閱命令列介面。

後續步驟

了解 ESLint 的進階設定。
熟悉命令列選項。
探索ESLint 與其他工具（例如編輯器、建置系統等）的整合。
找不到適合的規則嗎？建立您自己的自訂規則。
透過貢獻讓 ESLint 更上一層樓。

編輯此頁面