如何在VSCode编辑时自定义div、class名称等语义文本颜色

• 打开命令面板：Windows/Linux按Ctrl+Shift+P，Mac按Cmd+Shift+P
• 输入命令Preferences: Open User Settings (JSON)，回车打开用户配置JSON文件
• 在配置文件中添加如下内容，可根据实际需求调整对应参数和颜色值：

{
  // 启用语义高亮，确保JS语义染色逻辑生效
  "editor.semanticHighlighting.enabled": true,
  // 基础令牌颜色配置，可调整通用类别的文本颜色
  "editor.tokenColorCustomizations": {
    // 如需仅对当前使用的主题生效，将下方的[你的主题名称]替换为你正在使用的主题名即可，需要全局生效可删除这层方括号包裹
    "[One Dark Pro]": {
      "keywords": "#ff79c6",
      "variables": "#f8f8f2",
      "functions": "#50fa7b",
      "strings": "#f1fa8c",
      "comments": "#6272a4"
    }
  },
  // 细粒度语义令牌颜色配置，优先级高于基础配置，可精准控制JS各类语义文本的颜色
  "editor.semanticTokenColorCustomizations": {
    "[One Dark Pro]": {
      "rules": {
        "class": "#bd93f9",
        "parameter": "#ffb86c",
        "property": "#ff79c6",
        "namespace": "#8be9fd",
        "variable.readonly": "#f1fa8c"
      }
    }
  }
}

• 如需获取某段特定文本对应的令牌标识，打开命令面板输入Developer: Inspect Editor Tokens and Scopes，点击你要调整颜色的文本，即可看到它对应的令牌类型和作用域，将标识添加到上述rules配置中即可单独调整该类文本的颜色
• 保存配置文件后修改会立即生效，你可以对照期望效果图，用取色工具提取对应颜色的十六进制值，替换配置中的颜色值即可实现目标效果。

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