WebStorm中配置HTML语义：自定义HTML元素及React组件颜色

以下是针对VS Code编辑器的解决方案（前端开发主流工具），无需或通过轻量插件即可实现需求：

一、原生配置（无需插件） #

直接修改编辑器的settings.json文件，通过TextMate规则定制不同元素的高亮颜色：

1. 给HTML原生元素设置独立颜色 #

针对<div>、<main>、<header>、<section>等标签，分别指定颜色：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "html.tag.div",
      "settings": {
        "foreground": "#FF5733"
      }
    },
    {
      "scope": "html.tag.main",
      "settings": {
        "foreground": "#33FF57"
      }
    },
    {
      "scope": "html.tag.header",
      "settings": {
        "foreground": "#3357FF"
      }
    },
    {
      "scope": "html.tag.section",
      "settings": {
        "foreground": "#FF33A6"
      }
    }
  ]
}

2. 统一自定义React组件颜色 #

JSX/TSX中的自定义组件（如<Button>、<Card>）默认scope为entity.name.tag.jsx，可以统一设置颜色：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "entity.name.tag.jsx",
      "settings": {
        "foreground": "#FFC300"
      },
      "when": "resourceLangId == 'javascriptreact' || resourceLangId == 'typescriptreact'"
    }
  ]
}

如果需要单独给某几个组件指定颜色，可结合editorTextContains条件精准匹配：

{
  "scope": "entity.name.tag.jsx",
  "settings": {
    "foreground": "#900C3F"
  },
  "when": "resourceLangId == 'javascriptreact' && editorTextContains == '<Button'"
}

二、插件增强方案 #

若原生配置灵活性不足，可搭配以下插件：

• Babel JavaScript：优化JSX/TSX的语法高亮逻辑，让自定义组件与原生HTML元素的边界更清晰，配合上述配置能获得更精准的颜色区分。
• vscode-react-refactor：除了React代码重构功能，还会强化自定义组件的语法标识，提升视觉辨识度。
• Custom CSS and JS Loader：适合进阶用户，可加载自定义CSS文件深度定制编辑器UI级别的标签样式，实现更个性化的颜色区分。

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