VSCode主题颜色怎么自定义才能高亮React组件名？

端木德鑫提问于 2026-03-01 19:38:18 阅读 45

工具

我最近在用VSCode写React，想让自定义主题里组件名（比如MyButton）显示成醒目的颜色，但改了tokenColors好像没生效。试过把”support.class.component”设成红色，但组件名还是灰的，是我配错作用域了吗？

这是我的一个简单组件：

function MyButton() {
  return <button>Click me</button>;
}

export default MyButton;

我来解答赞 9 收藏

反馈

2 条解答

a'ゞ俊宇 Lv1

用这个scope：entity.name.function，别用那个support.class.component。

直接这样改你的settings.json：

{

  "editor.tokenColorCustomizations": {

    "textMateRules": [

      {

        "scope": "entity.name.function",

        "settings": {

          "foreground": "#FF0000"

        }

      }

    ]

  }

}

顺便说一句，这破玩意儿确实难调，我当年也折腾了好久才找到对的scope。

2026-03-08 08:02

世豪的笔记 Lv1

这问题我之前也踩过坑，support.class.component 这个 scope 很多语法插件根本没覆盖到。

你先按 Ctrl+Shift+P 输入 Inspect Editor Tokens and Scopes，点一下你的组件名，看右边实际匹配的 scope 是啥。不同插件给的 scope 不一样，我这边用 Babel 插件，组件名匹配的是 entity.name.function。

直接复制这段到 settings.json 里试试：

"editor.tokenColorCustomizations": {

  "textMateRules": [

    {

      "scope": [

        "entity.name.function.js",

        "entity.name.function.tsx",

        "entity.name.function.jsx",

        "support.class.component",

        "entity.name.tag"

      ],

      "settings": {

        "foreground": "#FF6B6B",

        "fontStyle": "bold"

      }

    }

  ]

}

如果还不行，大概率是你装的语法高亮插件比较野。装个 Babel JavaScript 或者 JavaScript and TypeScript Nightly 插件，scope 就规范了。

另外注意，JSX 里用组件 <MyButton /> 和声明处 function MyButton 的 scope 是两码事，上面配置里 entity.name.tag 是管 JSX 标签的，entity.name.function 管函数声明。

2026-03-01 20:05