自定义处理器 (已弃用)
您还可以创建自定义处理器,告知 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)
}
}
};
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;
}
默认情况下,即使在命令行上启用了 --fix
标志,当使用自定义处理器时,ESLint 也不执行自动修复。要允许 ESLint 在使用您的处理器时自动修复代码,您应该采取以下附加步骤
-
更新
postprocess
方法以额外转换报告问题的fix
属性。所有可自动修复的问题都有一个fix
属性,它是一个具有以下模式的对象{ range: [number, number], text: string }
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
有关更多详细信息,请参阅插件配置文档中的 指定处理器。
文件扩展名命名的处理器
如果自定义处理器名称以 .
开头,则 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) { /* ... */ }
}
}
}
您还可以将相同的自定义处理器与多个文件扩展名一起使用。以下示例显示了对 .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
}
}