自訂處理器 (已棄用)

您也可以建立自訂處理器，告知 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 方法 接受檔案內容和檔名作為引數，並傳回要進行 lint 的程式碼區塊陣列。程式碼區塊將會分開進行 lint，但仍會註冊到該檔名。

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

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

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

回報的問題在每個 lint 訊息中都有以下位置資訊

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

編輯此頁面