如何在VS Code中将HTML注释标签改为箭头样式并单独着色？

一、输入时自动生成箭头样式注释 #

• 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）打开命令面板，输入 Configure User Snippets，选择 html.json 进入HTML代码片段配置文件
• 替换原有内容（或追加）以下代码：

{
  "箭头样式注释": {
    "prefix": "//",
    "body": [
      "/*>> $0 <<*/"
    ],
    "description": "生成箭头包裹的HTML注释"
  }
}

之后在HTML文件里输入 // 按回车，就能自动生成 /*>> <<*/，光标会停在中间位置，直接输入注释内容即可。

二、单独为注释标签着色 #

默认VS Code会把整个HTML注释当成一个整体，要实现仅标签着色，需要自定义语法规则：

1. 安装 Custom CSS and JS Loader 扩展，用来加载自定义语法文件
2. 打开VS Code设置（快捷键 Ctrl+,），搜索 Enable Custom CSS and JS 并勾选启用
3. 在本地新建一个 html-arrow-comment.tmGrammar.json 文件，写入以下内容：

{
  "scopeName": "source.html.arrow-comment",
  "injections": {
    "text.html": {
      "patterns": [
        {
          "match": "/\\*>>",
          "name": "punctuation.definition.comment.begin.html.arrow"
        },
        {
          "match": "<<\\*/",
          "name": "punctuation.definition.comment.end.html.arrow"
        },
        {
          "match": "(?<=/\\*>>).*?(?=<<\\*/)",
          "name": "comment.block.html.arrow.content"
        }
      ]
    }
  }
}

4. 打开VS Code的 settings.json（命令面板输入 Preferences: Open Settings (JSON)），添加以下配置，注意替换成你自己的文件路径：

"customCSS.imports": [
  "file:///Users/xxx/Documents/html-arrow-comment.tmGrammar.json"
]

5. 同样在 settings.json 的 workbench.colorCustomizations 里设置标签和内容的颜色，示例如下：

"workbench.colorCustomizations": {
  "punctuation.definition.comment.begin.html.arrow": "#ff5252",
  "punctuation.definition.comment.end.html.arrow": "#ff5252",
  "comment.block.html.arrow.content": "#9e9e9e"
}

你可以把颜色值改成自己喜欢的，比如红色、蓝色都可以。

注意事项 #

• 不要直接修改VS Code内置的HTML语法文件，VS Code更新后会被覆盖
• 自定义语法文件的路径一定要写对，否则无法生效

内容的提问来源于stack exchange，提问作者Ziad Ahmed