如何在Monaco Editor中实现类似VSCode AutoRenameTag的自动重命名标签功能？

要实现类似VS Code AutoRenameTag的功能，核心逻辑是监听文本变更→定位当前编辑的标签→找到匹配的对应标签→同步更新文本，以下是具体的实现思路和代码示例：

一、核心依赖与前置准备 #

Monaco本身没有内置标签解析能力，可借助vscode-html-languageservice（VS Code HTML语言服务的底层库，与Monaco完全兼容）来解析HTML结构、获取标签匹配关系。先安装依赖：

npm install vscode-html-languageservice

二、实现步骤 #

1. 初始化语言服务与文档 #

创建HTML语言服务实例，同步编辑器内容更新文档解析结果：

import * as htmlLS from 'vscode-html-languageservice';
import * as monaco from 'monaco-editor';

const htmlLanguageService = htmlLS.getLanguageService();
let htmlDocument;

// 监听内容变更，实时更新HTML文档解析结果
editor.onDidChangeModelContent(() => {
  const model = editor.getModel();
  const text = model.getValue();
  htmlDocument = htmlLanguageService.parseHTMLDocument(
    htmlLS.TextDocument.create('dummy:///test.html', 'html', 1, text)
  );
});

2. 监听编辑事件，定位目标标签 #

判断当前编辑位置是否在标签内，找到对应的匹配标签：

let isRenaming = false; // 防止循环触发变更

editor.onDidChangeModelContent((event) => {
  if (isRenaming) return; // 跳过自身触发的文本修改事件

  const model = editor.getModel();
  const position = editor.getPosition();
  const offset = model.getOffsetAt(position);

  // 获取当前位置对应的HTML节点
  const node = htmlDocument.findNodeAt(offset);
  if (!node || node.tagName === undefined) return; // 非标签节点，直接跳过

  // 判断当前编辑的是开始标签还是结束标签
  const isStartTag = offset <= node.startTagEnd;
  const matchingTag = isStartTag ? node.endTag : node.startTag;
  if (!matchingTag) return; // 无匹配标签（如自闭合标签），跳过

  // 获取修改后的新标签名
  const newTagName = getUpdatedTagName(model, node, isStartTag);
  const oldTagName = node.tagName;
  if (oldTagName === newTagName) return; // 标签名未变化，无需操作

3. 同步更新匹配标签 #

使用Monaco的编辑API修改对应标签的名称：

isRenaming = true;
  // 构建匹配标签的替换范围：跳过标签的<、</和>符号
  const matchTagStart = isStartTag ? matchingTag.start + 2 : matchingTag.start + 1;
  const matchTagEnd = isStartTag ? matchingTag.end - 1 : matchingTag.end - 1;

  const editRange = new monaco.Range(
    model.getPositionAt(matchTagStart).lineNumber,
    model.getPositionAt(matchTagStart).column,
    model.getPositionAt(matchTagEnd).lineNumber,
    model.getPositionAt(matchTagEnd).column
  );

  // 执行标签名替换
  editor.executeEdits('auto-rename-tag', [{ range: editRange, text: newTagName }]);
  isRenaming = false;
});

4. 辅助函数：获取更新后的标签名 #

提取编辑后的标签名文本：

function getUpdatedTagName(model, node, isStartTag) {
  // 定位标签名的起始和结束位置（跳过<、</和>）
  const tagStart = isStartTag ? node.startTagStart + 1 : node.startTagStart + 2;
  const tagEnd = isStartTag ? node.startTagEnd - 1 : node.endTagEnd - 1;

  const tagRange = new monaco.Range(
    model.getPositionAt(tagStart).lineNumber,
    model.getPositionAt(tagStart).column,
    model.getPositionAt(tagEnd).lineNumber,
    model.getPositionAt(tagEnd).column
  );

  return model.getValueInRange(tagRange);
}

三、关键API与注意事项 #

• monaco.editor.Editor.onDidChangeModelContent：编辑器内容变更的监听入口，是触发自动重命名的核心。
• vscode-html-languageservice的parseHTMLDocument与findNodeAt：可靠解析HTML结构，避免正则匹配的局限性（如嵌套标签、复杂结构），快速定位标签及其匹配项。
• editor.executeEdits：执行文本修改操作，需设置唯一标识（如auto-rename-tag），同时用isRenaming标记避免循环触发。
• 边界处理：需跳过自闭合标签、非标签内容的编辑，兼容多行标签、标签名中间修改的场景。

四、优化方向 #

• 扩展支持JSX/XML：替换为vscode-jsx-languageservice或调整解析逻辑适配对应语法。
• 防抖处理：对快速输入场景添加防抖，减少不必要的解析和修改操作。
• 大小写同步：可统一标签名的大小写格式，保持前后标签一致。

内容的提问来源于stack exchange，提问作者Nokhalal Mahato