Visual studio code 如何在vscode上为特定的React.Js语法着色？

我试图弄清楚如何在

React

中的类声明中使用vscode获得特定的颜色语法

以下是我想要的颜色：

如您所见，类

StorePicker

的名称为紫色，React方法

.Component

（包括点）为浅灰色

据我所知，要在vscode上使用颜色语法，需要使用

TM范围

。为此，在我有类声明的代码文件中，我按下

Ctrl+Shift+p

并搜索

Inspect TM范围，然后单击特定元素以获得它们各自的范围


在我的具体案例中，我得到了需要着色的元素的以下范围：


类名
StorePicker
（
entity.Name.class.js，source.js
）
React
关键字（
entity.name.class.js，source.js
）
（
keyword.operator.accessor.js，source.js
）
方法
Component
（
entity.name.class.js，source.js
）

如您所见，
StorePicker
（类名）、
React
关键字和方法
Component
共享相同的范围：
entity.name.class.js

假设我只想给
组件上色。所以我把这个放在我的主题配置中：

{
    "name": "[JAVASCRIPT] - Operator Accesor + Method",
    "scope": ["keyword.operator.accessor.js", "entity.name.class.js", "source.js"],
    "settings": {
        "foreground": "#c2cacf"
    }
}

但是
StorePicker
和
React.Component
也使用相同的颜色着色：


我还想只对
StorePicker
（类名）着色：

不仅
StorePicker
彩色化，而且
React
和
Component
也用相同的颜色进行了彩色化：


我的问题：

如果它们共享同一个范围，我怎么能像第一张图片（从屏幕上拍摄）那样将它们分别着色？
我不知道你是如何得到这些范围的

{
    "scope": "entity.name.type.module.js",
    "settings": { "foreground": "#e2b419" }
},
{
    "scope": "entity.other.inherited-class.js",
    "settings": { "foreground": "#c2cacf" }
},
{
    "scope": "entity.name.type.class.js",
    "settings": { "foreground": "#d393e9" }
},

嘿，谢谢你对我的问题感兴趣。在我的问题上，在第三段中，我解释了我是如何获得这些范围的。让我告诉你，我已经测试了你的答案，但不起作用。颜色是一样的，没有变化。你测试过吗？LanguageId？vscode版本？不起作用的代码示例？javascript，1.33.1（用户设置），
class StorePicker Extendes React.Component{}
我正在使用主题
Cobalt2
是否有覆盖
javascript
语法的扩展？例如，您是否可以尝试在没有扩展的情况下启动vscode，并查看语法是否不同<代码>代码--禁用扩展
范围中的空格

表示子代选择器。数组或字符串-只是如何编写多个选择器的首选项。

{
    "scope": "entity.name.type.module.js",
    "settings": { "foreground": "#e2b419" }
},
{
    "scope": "entity.other.inherited-class.js",
    "settings": { "foreground": "#c2cacf" }
},
{
    "scope": "entity.name.type.class.js",
    "settings": { "foreground": "#d393e9" }
},