如何在VS Code的settings.json中修改CSS与XML标记的颜色

先纠正你现有配置的问题 #

你当前的配置有两个核心错误：

1. settings字段里不能直接写keywords/variables/comments这些属性，VS Code的textMate规则只识别foreground、fontStyle（可选，值为normal/italic/bold/underline等）这类基础样式属性
2. 只指定了entity.other.attribute-name.localname.xml这一个scope，覆盖范围太窄，根本没涉及注释、字符串、关键词等元素

第一步：找到目标元素的正确Scope #

要精准定位元素，先用VS Code的内置工具：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
• 搜索并执行「开发人员: 检查编辑器令牌和作用域」
• 鼠标点击你要调整的XML/CSS元素，就能看到它对应的所有scope，选最具体的那个来写规则

第二步：XML元素的配置示例 #

针对XML的注释、字符串、标签名、属性名等，在textMateRules里添加以下规则：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    // XML注释
    {
      "scope": "comment.block.xml",
      "settings": {
        "foreground": "#B9B9B9",
        "fontStyle": "italic"
      }
    },
    // XML字符串（属性值）
    {
      "scope": "string.quoted.double.xml",
      "settings": {
        "foreground": "#67f7e3"
      }
    },
    // XML标签名（关键词）
    {
      "scope": "entity.name.tag.xml",
      "settings": {
        "foreground": "#215c21"
      }
    },
    // XML属性名（替换原橙色为浅色调）
    {
      "scope": "entity.other.attribute-name.localname.xml",
      "settings": {
        "foreground": "#f5b790", // 更浅的橙色
        "fontStyle": "normal"
      }
    }
  ]
}

第三步：CSS元素的配置示例 #

同样，在textMateRules数组中添加CSS相关元素的规则：

// CSS注释
{
  "scope": "comment.block.css",
  "settings": {
    "foreground": "#B9B9B9",
    "fontStyle": "italic"
  }
},
// CSS选择器（标识符）
{
  "scope": "entity.name.selector.css",
  "settings": {
    "foreground": "#22FF88"
  }
},
// CSS属性名（关键词）
{
  "scope": "meta.property-name.css",
  "settings": {
    "foreground": "#215c21"
  }
},
// CSS属性值
{
  "scope": "meta.property-value.css",
  "settings": {
    "foreground": "#dfd51b"
  }
},
// CSS字符串
{
  "scope": "string.quoted.double.css",
  "settings": {
    "foreground": "#67f7e3"
  }
}

配置注意事项 #

• 所有规则放在textMateRules数组内，确保JSON格式正确（逗号、括号配对，不要重复属性）
• 如果某个元素对应多个scope，优先选择更具体的那个（比如string.quoted.double.xml比string.xml精准）
• 保存settings.json后，可重启VS Code或切换文件标签，确保样式生效

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