自訂處理器 (已棄用)

您也可以建立自訂處理器，告知 ESLint 如何處理標準 JavaScript 以外的檔案。例如，您可以編寫一個自訂處理器，從 Markdown 檔案中提取和處理 JavaScript ( @eslint/markdown 包含用於此目的的自訂處理器)。

自訂處理器規格

為了建立自訂處理器，從您的模組匯出的物件必須符合以下介面

module.exports = {
    processors: {
        "processor-name": {
            meta: {
                name: "eslint-processor-name",
                version: "1.2.3"
            },
            // takes text of the file and filename
            preprocess: function(text, filename) {
                // here, you can strip out any non-JS content
                // and split into multiple strings to lint

                return [ // return an array of code blocks to lint
                    { text: code1, filename: "0.js" },
                    { text: code2, filename: "1.js" },
                ];
            },

            // takes a Message[][] and filename
            postprocess: function(messages, filename) {
                // `messages` argument contains two-dimensional array of Message objects
                // where each top-level array item contains array of lint messages related
                // to the text that was returned in array from preprocess() method

                // you need to return a one-dimensional array of the messages you want to keep
                return [].concat(...messages);
            },

            supportsAutofix: true // (optional, defaults to false)
        }
    }
};
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
32

preprocess 方法接受檔案內容和檔名作為引數，並傳回要進行程式碼檢查的程式碼區塊陣列。程式碼區塊將會分別進行程式碼檢查，但仍會註冊到該檔名。

程式碼區塊具有兩個屬性 text 和 filename。text 屬性是區塊的內容，而 filename 屬性是區塊的名稱。區塊的名稱可以是任何內容，但應包含副檔名，這會告訴程式碼檢查工具如何處理目前的區塊。程式碼檢查工具會檢查 --ext CLI 選項，以查看是否應對目前的區塊進行程式碼檢查，並解析 overrides 設定以檢查如何處理目前的區塊。

是否需要僅傳回非 JavaScript 檔案的一部分或多個部分，由外掛程式決定。例如，在處理 .html 檔案的情況下，您可能只想透過合併所有指令碼來傳回陣列中的一個項目。但是，對於 .md 檔案，您可以傳回多個項目，因為每個 JavaScript 區塊可能是獨立的。

postprocess 方法接受程式碼檢查訊息的二維陣列和檔名。輸入陣列中的每個項目都對應於從 preprocess 方法傳回的部分。postprocess 方法必須調整所有錯誤的位置，以對應於原始、未處理程式碼中的位置，並將其匯總為單個扁平化陣列並傳回。

回報的問題在每個程式碼檢查訊息中都具有以下位置資訊

type LintMessage = {

  /// The 1-based line number where the message occurs.
  line?: number;

   /// The 1-based column number where the message occurs.
  column?: number;

  /// The 1-based line number of the end location.
  endLine?: number;

  /// The 1-based column number of the end location.
  endColumn?: number;

  /// If `true`, this is a fatal error.
  fatal?: boolean;

  /// Information for an autofix.
  fix: Fix;

  /// The error message.
  message: string;

  /// The ID of the rule which generated the message, or `null` if not applicable.
  ruleId: string | null;

  /// The severity of the message.
  severity: 0 | 1 | 2;

  /// Information for suggestions.
  suggestions?: Suggestion[];
};

type Fix = {
    range: [number, number];
    text: string;
}

type Suggestion = {
    desc?: string;
    messageId?: string;
    fix: Fix;
}

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
32
33
34
35
36
37
38
39
40
41
42
43
44

預設情況下，即使在命令列上啟用 --fix 旗標，當使用自訂處理器時，ESLint 也不會執行自動修正。若要允許 ESLint 在使用您的處理器時自動修正程式碼，您應採取以下額外步驟

更新 postprocess 方法以額外轉換回報問題的 fix 屬性。所有可自動修正的問題都有一個 fix 屬性，該屬性是一個具有以下結構描述的物件
```
{
    range: [number, number],
    text: string
}
1
2
3
4
```
range 屬性包含程式碼中的兩個索引，指的是將被取代的連續文字區段的開始和結束位置。text 屬性指的是將取代給定範圍的文字。

在問題的初始清單中，fix 屬性將指代已處理 JavaScript 中的修正。postprocess 方法應轉換物件以指代原始、未處理檔案中的修正。
將 supportsAutofix: true 屬性新增至處理器。

您可以在單個外掛程式中同時擁有規則和自訂處理器。您也可以在一個外掛程式中有多個處理器。若要支援多個擴展名，請將每個擴展名新增至 processors 元素，並將它們指向同一個物件。

meta 物件有助於 ESLint 快取處理器，並提供更友好的偵錯訊息。meta.name 屬性應與處理器名稱相符，而 meta.version 屬性應與處理器的 npm 套件版本相符。完成此操作的最簡單方法是從您的 package.json 中讀取此資訊。

在設定檔中指定處理器

若要使用處理器，請將其 ID 新增至設定檔中的 processor 區段。處理器 ID 是外掛程式名稱和處理器名稱的串連字串，以斜線作為分隔符號。也可以將此新增至設定的 overrides 區段，以指定哪些處理器應處理哪些檔案。

例如

plugins:
  - a-plugin
overrides:
  - files: "*.md"
    processor: a-plugin/markdown
1
2
3
4
5

如需更多詳細資訊，請參閱外掛程式設定文件中的指定處理器。

檔案擴展名命名處理器

如果自訂處理器名稱以 . 開頭，則 ESLint 會將處理器視為檔案擴展名命名處理器。ESLint 會自動將處理器套用至具有該副檔名的檔案。使用者不需要在其設定檔中指定檔案擴展名命名處理器。

例如

module.exports = {
    processors: {
        // This processor will be applied to `*.md` files automatically.
        // Also, you can use this processor as "plugin-id/.md" explicitly.
        ".md": {
            preprocess(text, filename) { /* ... */ },
            postprocess(messageLists, filename) { /* ... */ }
        }
        // This processor will not be applied to any files automatically.
        // To use this processor, you must explicitly specify it
        // in your configuration as "plugin-id/markdown".
       "markdown": {
            preprocess(text, filename) { /* ... */ },
            postprocess(messageLists, filename) { /* ... */ }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

您也可以將相同的自訂處理器用於多個副檔名。以下範例顯示如何將相同的處理器用於 .md 和 .mdx 檔案

const myCustomProcessor = { /* processor methods */ };

module.exports = {
    // The same custom processor is applied to both
    // `.md` and `.mdx` files.
    processors: {
        ".md": myCustomProcessor,
        ".mdx": myCustomProcessor
    }
}
1
2
3
4
5
6
7
8
9
10

編輯此頁面