設定外掛程式

您可以透過多種不同的方式使用外掛程式擴充 ESLint。外掛程式可以包含

自訂規則，以驗證您的程式碼是否符合特定預期，以及在不符合預期時該怎麼做。
自訂設定。請參閱外掛程式的文件，以取得如何使用這些設定的詳細資訊。
自訂處理器，從其他種類的檔案中提取 JavaScript 程式碼，或在進行程式碼檢查之前預先處理程式碼。

設定外掛程式

ESLint 支援使用第三方外掛程式。外掛程式只是符合 ESLint 識別的特定介面的物件。

若要在設定檔內設定外掛程式，請使用 plugins 鍵，其中包含一個物件，其屬性代表外掛程式命名空間，值等於外掛程式物件。

// eslint.config.js
import example from "eslint-plugin-example";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        plugins: {
            example
        },
        rules: {
            "example/rule1": "warn"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

設定本地外掛程式

外掛程式不需要發布到 npm 才能與 ESLint 一起使用。您也可以直接從檔案載入外掛程式，如本範例所示

// eslint.config.js
import local from "./my-local-plugin.js";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        plugins: {
            local
        },
        rules: {
            "local/rule1": "warn"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在這裡，使用了 local 命名空間，但您也可以使用任何您喜歡的名稱來代替。

設定虛擬外掛程式

外掛程式定義可以直接在您的設定中虛擬建立。例如，假設您有一個規則包含在名為 my-rule.js 的檔案中，您想要在您的設定中啟用它。您可以定義一個虛擬外掛程式來執行此操作，如本範例所示

// eslint.config.js
import myRule from "./rules/my-rule.js";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        plugins: {
            local: {
                rules: {
                    "my-rule": myRule
                }
            }
        },
        rules: {
            "local/my-rule": "warn"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在這裡，命名空間 local 用於定義虛擬外掛程式。然後，規則 myRule 會被指派一個名稱 my-rule 在虛擬外掛程式的 rules 物件內。（請參閱建立外掛程式以取得外掛程式的完整格式。）然後您可以將規則參照為 local/my-rule 來設定它。

使用外掛程式規則

您可以使用外掛程式中包含的特定規則。若要執行此操作，請使用 plugins 鍵在設定物件中指定外掛程式。plugin 鍵的值是一個物件，其中外掛程式的名稱是屬性名稱，而值是外掛程式物件本身。以下是一個範例

// eslint.config.js
import jsdoc from "eslint-plugin-jsdoc";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        files: ["**/*.js"],
        plugins: {
            jsdoc: jsdoc
        },
        rules: {
            "jsdoc/require-description": "error",
            "jsdoc/check-values": "error"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在此設定中，JSDoc 外掛程式被定義為具有名稱 jsdoc。每個規則名稱中的前綴 jsdoc/ 表示該規則來自具有該名稱的外掛程式，而不是來自 ESLint 本身。

由於外掛程式的名稱和外掛程式物件都是 jsdoc，您也可以將設定縮短為這樣

import jsdoc from "eslint-plugin-jsdoc";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        files: ["**/*.js"],
        plugins: {
            jsdoc
        },
        rules: {
            "jsdoc/require-description": "error",
            "jsdoc/check-values": "error"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

雖然這是最常見的慣例，但您不需要使用外掛程式規定的相同名稱。您可以指定任何您喜歡的前綴，例如

import jsdoc from "eslint-plugin-jsdoc";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        files: ["**/*.js"],
        plugins: {
            jsd: jsdoc
        },
        rules: {
            "jsd/require-description": "error",
            "jsd/check-values": "error"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

此設定物件使用 jsd 作為前綴外掛程式，而不是 jsdoc。

指定處理器

外掛程式可能會提供處理器。處理器可以從其他種類的檔案中提取 JavaScript 程式碼，然後讓 ESLint 檢查 JavaScript 程式碼。或者，處理器可以在預先處理期間轉換 JavaScript 程式碼。

若要在設定檔中指定處理器，請使用 processor 鍵，並以 namespace/processor-name 格式指派處理器的名稱。例如，以下範例對 *.md 檔案使用來自 @eslint/markdown 的處理器。

// eslint.config.js
import markdown from "@eslint/markdown";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        files: ["**/*.md"],
        plugins: {
            markdown
        },
        processor: "markdown/markdown"
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13

處理器可能會建立具名程式碼區塊，例如 0.js 和 1.js。ESLint 將此類具名程式碼區塊視為原始檔案的子檔案。您可以使用其他設定物件為具名程式碼區塊指定其他設定。例如，以下範例停用 markdown 檔案中以 .js 結尾的具名程式碼區塊的 strict 規則。

// eslint.config.js
import markdown from "@eslint/markdown";
import { defineConfig } from "eslint/config";

export default defineConfig([
    // applies to all JavaScript files
    {
        rules: {
            strict: "error"
        }
    },

    // applies to Markdown files
    {
        files: ["**/*.md"],
        plugins: {
            markdown
        },
        processor: "markdown/markdown"
    },

    // applies only to JavaScript blocks inside of Markdown files
    {
        files: ["**/*.md/*.js"],
        rules: {
            strict: "off"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

只有當具名程式碼區塊是 JavaScript 檔案，或它們符合設定物件中的 files 項目時，ESLint 才會檢查它們。如果您想要檢查非 JavaScript 具名程式碼區塊，請務必新增具有相符 files 項目的設定物件。另請注意，全域忽略也適用於具名程式碼區塊。

// eslint.config.js
import markdown from "@eslint/markdown";
import { defineConfig } from "eslint/config";

export default defineConfig([
    // applies to Markdown files
    {
        files: ["**/*.md"],
        plugins: {
            markdown
        },
        processor: "markdown/markdown"
    },

    // applies to all .jsx files, including jsx blocks inside of Markdown files
    {
        files: ["**/*.jsx"],
        languageOptions: {
            parserOptions: {
                ecmaFeatures: {
                    jsx: true
                }
            }
        }
    },

    // ignore jsx blocks inside of test.md files
    {
        ignores: ["**/test.md/*.jsx"]
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

指定語言

外掛程式可能會提供語言。語言允許 ESLint 檢查 JavaScript 以外的程式設計語言。若要在設定檔中指定語言，請使用 language 鍵，並以 namespace/language-name 格式指派語言的名稱。例如，以下範例對 *.json 檔案使用來自 @eslint/json 的 json/jsonc 語言。

// eslint.config.js
import json from "@eslint/json";
import { defineConfig } from "eslint/config";

export default defineConfig([
    {
        files: ["**/*.json"],
        plugins: {
            json
        },
        language: "json/jsonc"
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13

常見問題

編輯此頁面