VS Code中Angular组件HTML文件代码颜色自定义问题

核心思路 #

要实现引号内TS函数和变量的颜色区分，不能直接修改整个字符串的配色，得针对TextMate语法子作用域单独配置——vscode-angular-html扩展会为Angular HTML中的TS插值内容生成专属的子作用域，我们只需定位这些作用域并设置颜色即可。

具体步骤 #

1. 确认扩展状态

   • 确保已安装vscode-angular-html扩展，且已运行过vscode-angular-html: Set legacy color customization命令（该命令会为扩展启用自定义配色支持）。

2. 定位目标作用域

   • 打开任意Angular组件的HTML文件，选中引号内的TS变量或函数。
   • 按下Ctrl+Shift+P打开命令面板，输入并执行Inspect Editor Tokens and Scopes。
   • 在弹出的面板中，找到Textmate scopes部分，记录变量和函数对应的专属作用域（比如变量可能是angular-html.interpolation.ts.variable，函数可能是angular-html.interpolation.ts.function-call，不同版本扩展可能略有差异，以实际检测结果为准）。

3. 配置自定义配色

   • 打开VS Code的settings.json（可通过Ctrl+,打开设置面板，点击右上角的{}图标进入编辑模式）。
   • 添加以下配置（替换示例中的作用域和颜色值为你实际检测到的内容）：

     "editor.tokenColorCustomizations": {
       "textMateRules": [
         {
           "scope": "angular-html.interpolation.ts.variable",
           "settings": {
             "foreground": "#FFD700" // 自定义变量颜色，这里用金色
           }
         },
         {
           "scope": "angular-html.interpolation.ts.function-call",
           "settings": {
             "foreground": "#00FFFF" // 自定义函数颜色，这里用青色
           }
         }
       ]
     }
     

   • 如果你只想让配置对Angular HTML文件生效，可以把规则放在[AngularHTML]专属配置里：

     "[AngularHTML]": {
       "editor.tokenColorCustomizations": {
         "textMateRules": [
           // 同上的配色规则
         ]
       }
     }
     

4. 生效配置

   • 按下Ctrl+Shift+P执行Reload Window，重启VS Code窗口后，配置即可生效。

关键说明 #

之前修改整个字符串颜色无效，是因为字符串的父作用域string会覆盖子作用域的样式，而我们需要直接针对引号内TS内容的子作用域设置颜色，才能实现区分效果。

内容的提问来源于stack exchange，提问作者Jose Roman