Highlight Matching Tag插件仅负责高亮HTML/JSX/XML标签对，不提供跳转功能；跳转需依赖VSCode原生命令（如Go to Bracket）或语言服务，且必须确保文件被正确识别为对应语言模式（如Vue、HTML），否则插件失效。
Highlight Matching Tag 插件本身不提供跳转功能，只负责高亮匹配的 HTML/JSX/XML 标签对；跳转需依赖 VSCode 原生语言服务或其它扩展，两者必须配合使用才能完成“高亮 + 定位”闭环。
为什么装了 Highlight Matching Tag 却没反应？
最常见原因是文件未被识别为对应语言模式，插件直接失效。比如一个 .vue 文件右下角显示的是 Plain Text 而非 Vue，或者 .jsx 文件被识别成 JavaScript —— 这两种情况都会导致标签解析失败，光标停在 <div> 上也不会高亮对应的 </div>。
检查并修正方式：
- 点击 VSCode 右下角语言标识，手动切换为正确模式（如
HTML、Vue、JavaScript React） - 确保文件后缀名与语言匹配（
.tsx需要TypeScript React模式） - 如果用自定义文件名（如
index.web），需在settings.json中配置"files.associations"显式绑定语言
如何让高亮颜色真正生效？
插件安装后默认不启用样式，必须手动添加 highlight-matching-tag.styles 配置，否则只有微弱底色（甚至完全不可见）。配置位置是用户或工作区的 settings.json，不是 CSS 或主题文件。
最小可用配置示例：
{
"highlight-matching-tag.styles": {
"opening": {
"left": { "custom": { "borderColor": "#4dabf7", "borderWidth": "0 0 0 3px" } },
"right": { "custom": { "borderColor": "#4dabf7", "borderWidth": "0 3px 0 0" } }
},
"closing": {
"left": { "custom": { "borderColor": "#f76d4d", "borderWidth": "0 0 0 3px" } },
"right": { "custom": { "borderColor": "#f76d4d", "borderWidth": "0 3px 0 0" } }
}
}
}
注意点：
-
borderStyle默认是solid，不用显式写；写错值（如"dotted"）可能被忽略 -
overviewRulerColor控制滚动条标记，值必须是十六进制（如"#4dabf7"），写"blue"无效 - 修改后需重新聚焦标签（移开光标再点回去）才刷新高亮，不会实时响应配置变更
光标停在标签上，怎么快速跳到匹配项？
Highlight Matching Tag 不提供跳转命令，但你可以用 VSCode 原生快捷键直接跳转，无需额外插件：
-
Ctrl+Shift+P→ 输入Go to Bracket→ 回车（跳转到匹配括号/标签，支持 HTML） - 光标放在开始标签内，按
Ctrl+Shift+Alt+J（Windows/Linux）或Cmd+Shift+Alt+J（macOS）→ 直接选中整个标签块（含开始和结束标签） - 更通用的方式：
Ctrl+Shift+O打开符号搜索，输入标签名（如div），列表里会包含所有标签符号，回车即可跳转
若这些快捷键失效，大概率是当前语言服务未加载（例如 JS 文件没装 ESLint 或 TypeScript 扩展），或文件未以文件夹形式打开（单文件模式下部分语言功能被禁用）。
和 Bracket Pair Colorizer 冲突怎么办？
两个插件都操作 DOM 渲染层，同时启用容易互相覆盖样式，典型表现是：高亮颜色错乱、边框抖动、或只显示其中一个插件的效果。
推荐取舍策略：
- 专注 HTML/JSX/Vue 开发 → 留
Highlight Matching Tag，关Bracket Pair Colorizer（后者对标签嵌套结构支持弱） - 主要写 JS/TS 且需要括号配对高亮 → 关
Highlight Matching Tag，留Bracket Pair Colorizer，并开启其bracket-pair-colorizer-2.showBracketsInGutter提升可读性 - 必须共存 → 在
settings.json中为两者分别禁用重叠功能，例如关闭Bracket Pair Colorizer的标签高亮："bracket-pair-colorizer-2.disabledLanguages": ["html", "vue", "javascriptreact"]
真正难搞的不是配置，而是语言服务加载状态和文件识别逻辑——它们无声无息地决定高亮是否出现、跳转是否可用，却极少报错提示。
