如何在Monaco Editor中检测缺失闭合括号并显示语法错误

你当前的语言配置仅实现了括号自动补全功能，要检测并提示遗漏闭合括号的语法错误，需要为自定义语言注册诊断提供者（Diagnostics Provider）——Monaco Editor通过诊断器来检测代码中的语法问题并展示错误提示。

实现步骤： #

• 编写括号匹配检查函数：遍历代码文本，用栈结构跟踪未闭合的括号，找出不匹配或遗漏的情况。
• 注册诊断提供者：将检查函数绑定到自定义语言，让Monaco实时调用该函数分析代码并生成错误提示。

完整代码示例： #

// 你的原有语言配置
const config = {
  surroundingPairs: [
    { open: '{', close: '}' },
    { open: '[', close: ']' },
    { open: '(', close: ')' },
    { open: '<', close: '>' },
    { open: "'", close: "'" },
    { open: '"', close: '"' },
  ],
  autoClosingPairs: [
    { open: '{', close: '}' },
    { open: '[', close: ']' },
    { open: '(', close: ')' },
    { open: "'", close: "'", notIn: ['string', 'comment'] },
    { open: '"', close: '"', notIn: ['string', 'comment'] },
  ],
};
monaco.languages.setLanguageConfiguration('customLanguage', config);

// 注册括号匹配诊断提供者
monaco.languages.register({ id: 'customLanguage' });

monaco.languages.registerDiagnosticProvider('customLanguage', {
  provideDiagnostics(model: monaco.editor.ITextModel): monaco.api.Diagnostic[] {
    const diagnostics: monaco.api.Diagnostic[] = [];
    const text = model.getValue();
    const stack: { char: string; position: number }[] = [];
    // 括号匹配映射
    const pairMap = new Map([
      ['{', '}'],
      ['[', ']'],
      ['(', ')'],
      ['<', '>'],
      ["'", "'"],
      ['"', '"'],
    ]);
    const reversePairMap = new Map(Array.from(pairMap.entries()).map(([k, v]) => [v, k]));

    // 遍历文本检查括号
    for (let i = 0; i < text.length; i++) {
      const char = text[i];
      // 左括号入栈
      if (pairMap.has(char)) {
        stack.push({ char, position: i });
      }
      // 右括号匹配检查
      else if (reversePairMap.has(char)) {
        const lastUnclosed = stack.pop();
        if (!lastUnclosed || pairMap.get(lastUnclosed.char) !== char) {
          // 记录无匹配的右括号错误
          const pos = model.getPositionAt(i + 1);
          diagnostics.push({
            severity: monaco.MarkerSeverity.Error,
            startLineNumber: pos.lineNumber,
            startColumn: pos.column,
            endLineNumber: pos.lineNumber,
            endColumn: pos.column + 1,
            message: `未匹配的'${char}'`,
          });
        }
      }
    }

    // 处理未闭合的左括号
    stack.forEach(item => {
      const pos = model.getPositionAt(item.position + 1);
      diagnostics.push({
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: pos.lineNumber,
        startColumn: pos.column,
        endLineNumber: pos.lineNumber,
        endColumn: pos.column + 1,
        message: `缺少闭合符号'${pairMap.get(item.char)}'`,
      });
    });

    return diagnostics;
  },
});

功能说明： #

• 诊断函数通过栈结构跟踪所有未闭合的左括号，遇到右括号时校验是否与栈顶左括号匹配。
• 遍历结束后，栈中剩余的左括号即为遗漏闭合的情况，会生成对应的错误提示。
• 错误标记的位置通过model.getPositionAt转换为行号和列号，确保提示精准定位到代码位置。

内容的提问来源于stack exchange，提问作者Ubaid Khanzada