通过Diagnostic API和LSP，VSCode问题面板可自定义检测规则并提供快速修复。首先创建诊断集合，分析代码后生成诊断对象标记问题，如禁止console.log；再注册CodeActionProvider，针对诊断问题提供替换为logger等修复选项；结合ESLint自定义规则更高效，实现错误提示与自动修复联动，提升编码效率。
VSCode 的问题面板不只是显示语法错误，它还能通过自定义诊断规则帮助你统一代码风格、发现潜在逻辑问题，甚至支持一键快速修复。要真正用好这个功能，需要结合语言服务器协议（LSP）、Diagnostic API 和 Code Action 扩展机制。
自定义诊断规则：从检测到展示
你可以通过开发 VSCode 扩展或使用 Language Server 在问题面板中注入自定义问题。常见场景包括检测未使用的变量、强制注释规范、识别过时的 API 调用等。
实现方式通常如下：
- 使用 vscode.languages.createDiagnosticCollection 创建一个诊断集合
- 分析文档内容（如 AST 解析）定位问题位置
- 生成 Diagnostic 对象，包含错误级别、消息和建议的修复方法
- 将诊断结果添加到指定文件的诊断集合中
例如，你想标记所有以 console.log 输出的语句为警告：
// 在文档保存或打开时触发
diagnosticCollection.set(uri, [
new vscode.Diagnostic(
new vscode.Range(line, 0, line, text.length),
'Avoid console.log in production code',
vscode.DiagnosticSeverity.Warning
)
]);
绑定快速修复：让问题可操作
仅仅提示问题不够，用户更希望一键修复。VSCode 支持通过 Code Action 提供“快速修复”建议（灯泡图标）。
你需要注册一个 CodeActionProvider：
- 监听特定诊断问题（比如你之前设置的 'no-console'）
- 当用户点击灯泡时，提供修复选项，如“替换为 logger.debug”或“删除该行”
- 通过 WorkspaceEdit 修改文本
示例代码：
vscode.languages.registerCodeActionsProvider('javascript', {provideCodeActions(document, range) {
const diagnostics = vscode.languages.getDiagnostics(document.uri);
const consoleIssue = diagnostics.find(d => d.message.includes('console.log'));
if (consoleIssue) {
return [
new vscode.CodeAction('Replace with logger', vscode.CodeActionKind.QuickFix).then(edit => {
edit.edit.replace(range, 'logger.debug(...)');
})
];
}
}
});
集成 ESLint 或 Stylelint 实现高级诊断
大多数情况下无需从零造轮子。使用 ESLint 自定义规则配合 VSCode ESLint 插件，可以直接在问题面板中展示并修复。
步骤简要：
- 编写 ESLint 规则检测特定模式（如禁止使用 var）
- 配置
.eslintrc启用规则 - 在 VSCode 中安装 ESLint 扩展
- 问题面板自动同步 lint 错误，支持“快速修复”批量处理
你还可以在规则中提供 fix 函数，实现自动修正，用户点击“修复此问题”即可生效。
基本上就这些。自定义诊断 + 快速修复 = 更智能的编码体验。关键是把规则和动作联动起来，让用户发现问题的同时也知道怎么改。
