VS Code扩展开发：如何检测文件中的语法、TypeScript及ESLint错误

要获取当前文件中红色波浪线标记的错误（语法错误、TS错误、ESLint错误等），核心是利用VS Code API里的vscode.languages.getDiagnostics()方法，结合诊断的级别和来源来筛选。以下是具体实现步骤和代码示例：

核心实现步骤 #

1. 获取当前活动编辑器与文档：先确认用户打开了编辑器且有活跃文档，没有的话直接返回。
2. 获取文档的所有诊断信息：通过getDiagnostics传入文档URI，拿到该文件所有的诊断（包括警告、错误等）。
3. 筛选Error级别的诊断：红色波浪线对应的是DiagnosticSeverity.Error级别，过滤出这类诊断。
4. 按错误来源分类（可选）：通过诊断的source属性区分ESLint（source为"eslint"）、TypeScript（source为"typescript"）、语法错误（通常对应语言服务，比如"javascript"、"typescript"等）。

完整代码示例 #

可以在你的activate函数里注册一个命令，触发时检测当前文件的错误：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 注册一个命令，用于触发错误检测
    let disposable = vscode.commands.registerCommand('your-extension-id.checkFileErrors', () => {
        // 获取当前活动编辑器
        const activeEditor = vscode.window.activeTextEditor;
        if (!activeEditor) {
            vscode.window.showErrorMessage('没有打开的编辑器');
            return;
        }

        const document = activeEditor.document;
        const docUri = document.uri;

        // 获取该文档的所有诊断
        const allDiagnostics = vscode.languages.getDiagnostics(docUri);

        // 筛选出Error级别的诊断（红色波浪线）
        const errorDiagnostics = allDiagnostics.filter(diag => diag.severity === vscode.DiagnosticSeverity.Error);

        if (errorDiagnostics.length === 0) {
            vscode.window.showInformationMessage('当前文件没有红色波浪线标记的错误');
            return;
        }

        // 按来源分类错误
        const eslintErrors = errorDiagnostics.filter(diag => diag.source === 'eslint');
        const tsErrors = errorDiagnostics.filter(diag => diag.source === 'typescript');
        const syntaxErrors = errorDiagnostics.filter(diag => 
            ['javascript', 'typescript'].includes(diag.source) && 
            !tsErrors.some(t => t.range.isEqual(diag.range))
        );

        // 输出结果（可根据需求改为弹窗或面板展示）
        console.log(`当前文件共${errorDiagnostics.length}个错误：`);
        console.log(`ESLint错误：${eslintErrors.length}个`);
        console.log(`TypeScript错误：${tsErrors.length}个`);
        console.log(`语法错误：${syntaxErrors.length}个`);

        // 向用户展示错误详情
        const errorDetails = errorDiagnostics.map((diag, idx) => 
            `${idx+1}. ${diag.message} (来源：${diag.source || '未知'})`
        ).join('\n');
        vscode.window.showWarningMessage(`检测到错误：\n${errorDetails}`);
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

实时监听诊断变化（可选） #

如果需要实时监听文件的错误变化（比如用户修改代码后自动检测），可以用onDidChangeDiagnostics事件：

// 在activate函数中添加
const diagnosticChangeListener = vscode.languages.onDidChangeDiagnostics(event => {
    // 只处理当前活动文档的诊断变化
    const activeEditor = vscode.window.activeTextEditor;
    if (!activeEditor) return;

    const docUri = activeEditor.document.uri;
    if (event.uris.some(uri => uri.toString() === docUri.toString())) {
        // 调用封装的检测逻辑
        checkFileErrors(activeEditor.document);
    }
});

context.subscriptions.push(diagnosticChangeListener);

// 封装检测逻辑为独立函数
function checkFileErrors(document: vscode.TextDocument) {
    const allDiagnostics = vscode.languages.getDiagnostics(document.uri);
    const errorDiagnostics = allDiagnostics.filter(diag => diag.severity === vscode.DiagnosticSeverity.Error);
    // 后续处理逻辑和之前一致...
}

关键API说明 #

• vscode.languages.getDiagnostics(uri)：返回指定URI文档的所有诊断信息数组。
• DiagnosticSeverity.Error：对应红色波浪线的错误级别，Warning对应黄色波浪线。
• diagnostic.source：标记诊断的来源，用来区分不同类型的错误（比如ESLint、TypeScript语言服务）。

内容的提问来源于stack exchange，提问作者Caio Borghi