Angular开发：点击任意HTML标签时如何避免整个模板代码高亮？

数据老陈

2026-6-13

解决Angular组件template代码意外高亮问题

关闭VS Code内置的Angular元素高亮功能
打开设置（快捷键Cmd+,），搜索Angular: Highlight Active Element，将该选项关闭。这个是VS Code官方Angular语言服务自带的功能，禁用第三方扩展不会影响它，所以之前禁用扩展的操作没解决问题。
自定义编辑器样式覆盖高亮
如果上面的方法无效，可通过自定义样式取消高亮：
1. 打开settings.json（可以通过命令面板Cmd+Shift+P输入Preferences: Open Settings (JSON)打开）
2. 添加以下配置，针对深色主题取消template区域的高亮背景：
```
"editor.tokenColorCustomizations": {
  "[Dark Modern]": {
    "textMateRules": [
      {
        "scope": "markup.angular.template.active",
        "settings": {
          "background": "none"
        }
      }
    ]
  }
}
```
切换默认主题排查问题
部分第三方主题可能会额外添加元素高亮样式，试试切换到VS Code默认的Dark Modern主题，若问题消失，说明是当前主题导致的，可更换主题或自定义主题的高亮规则。