大家好，今天咱们来聊聊 JavaScript ESLint 的两个神奇的东西：Processor 和 Formatter。 别看它们名字挺唬人，实际上就是帮你拓展 ESLint 能力，让它不仅能检查 .js 文件，还能处理其他类型的代码，并且按照你喜欢的格式输出报告。 准备好了吗？咱们这就开始！
开场：ESLint 的局限与扩展的必要性
ESLint 就像一位严厉的语法老师，专门检查 JavaScript 代码的规范性。 但是，这位老师也有点“死板”，只会看 .js、.jsx、.ts、.tsx 这些后缀的文件。 想象一下，如果你的项目里有 .vue 文件（包含 HTML、CSS 和 JavaScript）、.md 文件（包含代码片段），或者你自己发明了一种新的代码格式，ESLint 就束手无策了。
这就是 Processor 和 Formatter 登场的原因。 它们让 ESLint 拥有了“变形”的能力，可以处理各种各样的文件，并且以各种各样的形式告诉你哪里有问题。
第一部分：Processor：让 ESLint 认识新朋友
Processor 的作用是让 ESLint 能够处理非 JavaScript 文件。 它可以把这些文件“分解”成 ESLint 可以理解的 JavaScript 代码块，然后 ESLint 就可以像检查 .js 文件一样检查它们了。
1. Processor 的工作原理
Processor 就像一个翻译器，它接收一个文件内容，然后返回一个或多个代码块。 每个代码块都包含：
text: 要进行 lint 检查的 JavaScript 代码。filename: 代码块的虚拟文件名，用于 ESLint 报告错误时定位。
ESLint 检查完这些代码块后，Processor 还可以将检查结果“还原”回原始文件，标记出错误的位置。
2. 创建一个简单的 Processor
咱们先来创建一个简单的 Processor，它可以处理 .txt 文件，并把每一行都当作 JavaScript 代码来检查。
// processor.js
module.exports = {
preprocess: function(text, filename) {
// 将文件内容按行分割，每行作为一个代码块
const lines = text.split('n');
return lines.map((line, index) => ({
text: line, // 代码块的内容
filename: `${filename}.line${index + 1}.js` // 虚拟文件名
}));
},
postprocess: function(messages, filename) {
// 将 ESLint 报告的错误映射回原始文件
return messages[0].map(message => {
const lineNumber = parseInt(message.filename.match(/line(d+)/)[1]);
return {
...message,
line: lineNumber, // 更新错误行号
column: message.column,
filename: filename
};
});
},
supportsAutofix: true // 表明Processor 支持自动修复
};代码解释：
preprocess: 接收文件内容text和文件名filename。text.split('n'): 将文件内容按行分割成数组。lines.map(...): 遍历每一行，生成一个代码块对象。text: 代码块的内容就是每一行的文本。filename: 虚拟文件名，格式为原始文件名.line行号.js。 这样 ESLint 报告错误时，我们就能知道错误在哪一行。
postprocess: 接收 ESLint 报告的错误信息messages和文件名filename。messages[0].map(...): 遍历所有的错误信息。message.filename.match(/line(d+)/)[1]): 从虚拟文件名中提取行号。{ ...message, line: lineNumber, filename: filename }: 更新错误信息的行号和文件名，使其指向原始文件。
supportsAutofix: true: 表明该 Processor 支持自动修复。 如果你的 Processor 可以处理自动修复，就应该设置这个属性为true。
3. 配置 ESLint 使用 Processor
接下来，我们需要配置 ESLint 使用这个 Processor。 在 .eslintrc.js 文件中添加如下配置：
// .eslintrc.js
module.exports = {
plugins: ['my-processor'], // 插件名
processor: 'my-processor/processor', // Processor 的路径
rules: {
'no-console': 'warn' // 示例规则，禁止使用 console
},
overrides: [
{
files: ['*.txt'], // 需要处理的文件类型
processor: 'my-processor/processor' // 再次指定 processor
}
]
};代码解释：
plugins: 声明一个插件my-processor， 名字随意，只要和后面的配置对应即可。processor: 指定 Processor 的路径，格式为插件名/processor.js。overrides: 覆盖配置，针对特定的文件类型应用不同的配置。files: ['*.txt']: 指定需要处理的文件类型为.txt文件。processor: 'my-processor/processor': 再次指定 Processor 的路径。
注意：
-
你需要将
processor.js文件放在一个名为eslint-plugin-my-processor的目录下， 并创建一个index.js文件，导出你的 Processor。// eslint-plugin-my-processor/index.js module.exports = { processors: { processor: require('./processor') } }; -
你需要使用
npm install eslint-plugin-my-processor将你的插件安装到项目中。
4. 测试 Processor
创建一个名为 test.txt 的文件，内容如下：
console.log("Hello, world!");
var a = 1;运行 ESLint：
eslint test.txt你应该会看到 ESLint 报告 console.log 语句违反了 no-console 规则。 这说明 Processor 已经成功地将 .txt 文件中的代码传递给 ESLint 进行了检查。
5. 一个更复杂的 Processor：处理 Vue 文件
处理 Vue 文件需要更复杂的逻辑，因为 Vue 文件包含 HTML、CSS 和 JavaScript 三种代码。 我们需要将 JavaScript 代码提取出来，交给 ESLint 检查，然后再将错误信息映射回原始文件。
这里提供一个简单的 Vue 文件 Processor 的思路：
- 使用正则表达式或者 HTML 解析器（例如
cheerio）提取<script>标签中的 JavaScript 代码。 - 将提取出来的代码作为代码块传递给 ESLint。
- 在
postprocess函数中，根据<script>标签在 Vue 文件中的位置，调整错误信息的行号和列号。
由于 Vue 文件处理比较复杂，这里就不提供完整的代码示例了，你可以参考一些现有的 ESLint 插件，例如 eslint-plugin-vue。
第二部分：Formatter：让 ESLint 的报告更漂亮
Formatter 的作用是控制 ESLint 报告的输出格式。 默认情况下，ESLint 会在控制台输出简单的文本报告。 但是，你可以使用 Formatter 将报告转换成 JSON、HTML、Markdown 等格式，方便你进行分析和展示。
1. Formatter 的工作原理
Formatter 接收 ESLint 报告的错误信息，然后将其转换成字符串。 这个字符串就是最终输出的报告。
2. 使用内置的 Formatter
ESLint 内置了一些常用的 Formatter，例如：
stylish: 默认的文本报告格式，简洁易读。compact: 将错误信息压缩成一行，方便脚本处理。json: 将错误信息转换成 JSON 格式。html: 将错误信息转换成 HTML 格式，可以在浏览器中查看。
你可以使用 --format 选项指定使用的 Formatter：
eslint --format json test.js > report.json # 将报告输出到 report.json 文件
eslint --format html test.js > report.html # 将报告输出到 report.html 文件3. 创建一个自定义的 Formatter
如果你对内置的 Formatter 不满意，可以自己创建一个。
// formatter.js
module.exports = function(results, context) {
let output = 'n自定义 ESLint 报告：n';
results.forEach(result => {
const { filePath, messages } = result;
output += `n文件: ${filePath}n`;
messages.forEach(message => {
const { line, column, severity, message: msg, ruleId } = message;
output += ` - 第 ${line} 行, 第 ${column} 列: ${msg} (${ruleId})n`;
});
});
return output;
};代码解释：
results: ESLint 报告的错误信息数组，每个元素包含一个文件的错误信息。context: ESLint 上下文对象，包含一些有用的信息，例如配置信息。results.forEach(...): 遍历每个文件的错误信息。messages.forEach(...): 遍历每个错误的详细信息。output += ...: 将错误信息格式化成字符串，添加到输出中。
4. 配置 ESLint 使用自定义 Formatter
使用 --formatter 选项指定自定义 Formatter 的路径：
eslint --formatter ./formatter.js test.js你应该会看到控制台输出你自定义格式的 ESLint 报告。
第三部分：Processor 和 Formatter 的结合应用
Processor 和 Formatter 可以结合使用，让 ESLint 更加强大。 例如，你可以创建一个 Processor，将 Markdown 文件中的代码块提取出来进行检查，然后使用一个 Formatter，将检查结果以 Markdown 格式嵌入回原始文件。
示例：检查 Markdown 文件中的代码块
-
创建一个 Processor，提取 Markdown 文件中的代码块。
// markdown-processor.js const markdownIt = require('markdown-it'); module.exports = { preprocess: function(text, filename) { const md = markdownIt(); const tokens = md.parse(text, {}); const codeBlocks = []; let code = ''; let inCodeBlock = false; tokens.forEach(token => { if (token.type === 'fence' && token.tag === 'code') { codeBlocks.push({ text: token.content, filename: `${filename}.codeblock${codeBlocks.length + 1}.js` }); } }); return codeBlocks; }, postprocess: function(messages, filename) { return messages[0].map(message => { const lineNumber = parseInt(message.filename.match(/codeblock(d+)/)[1]); return { ...message, line: message.line, // 这里不需要修改行号，因为代码块内部的行号是正确的 column: message.column, filename: filename }; }); }, supportsAutofix: false // Markdown 代码块一般不支持自动修复 }; -
创建一个 Formatter，将检查结果以 Markdown 格式嵌入回原始文件。
// markdown-formatter.js module.exports = function(results, context) { let output = ''; results.forEach(result => { const { filePath, messages } = result; if (messages.length > 0) { output += `n**ESLint 发现以下问题：**n`; messages.forEach(message => { const { line, column, severity, message: msg, ruleId } = message; output += `- 第 ${line} 行, 第 ${column} 列: ${msg} (${ruleId})n`; }); output += `n`; } }); return output; }; -
配置 ESLint 使用 Processor 和 Formatter。
// .eslintrc.js module.exports = { plugins: ['markdown'], processor: 'markdown/markdown-processor', rules: { 'no-console': 'warn' }, overrides: [ { files: ['*.md'], processor: 'markdown/markdown-processor' } ] }; -
运行 ESLint。
eslint --format ./markdown-formatter.js test.md
这样，ESLint 就会检查 Markdown 文件中的代码块，并将检查结果以 Markdown 格式输出到控制台。
总结：Processor 和 Formatter 的意义
Processor 和 Formatter 是 ESLint 的两个强大的扩展点，它们让 ESLint 能够处理各种各样的文件类型，并且以各种各样的形式输出报告。 掌握了它们，你就可以定制 ESLint，使其适应你的项目需求，提高代码质量和开发效率。
表格总结
| 特性 | Processor | Formatter |
|---|---|---|
| 作用 | 让 ESLint 处理非 JavaScript 文件 | 控制 ESLint 报告的输出格式 |
| 工作原理 | 将文件内容分解成 ESLint 可以理解的代码块 | 将 ESLint 报告的错误信息转换成字符串 |
| 输入 | 文件内容和文件名 | ESLint 报告的错误信息数组 |
| 输出 | 代码块数组 | 格式化后的字符串 |
| 使用场景 | 处理 Vue、Markdown、自定义代码格式等文件 | 自定义报告格式、生成 JSON、HTML 等格式的报告 |
尾声：灵活运用，创造无限可能
希望今天的讲解对你有所帮助。 Processor 和 Formatter 的应用场景非常广泛，你可以根据自己的需求进行定制。 记住，编程的乐趣在于创造，灵活运用这些工具，创造出属于你自己的解决方案吧！
感谢大家的收听！