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

Question

我正在尝试找出如何在React中的类声明中使用vscode获取特定的颜色语法。

这些是我想要的颜色：

如您所见，类StorePicker的名称为紫色，React方法.Component（包括点）为浅灰色< / em>。

据我所知，要在vscode上使用颜色语法，它必须与TM Scope一起使用。为此，请在我具有类声明的代码文件中，按Ctrl+Shift+p并搜索Inspect TM Scopes，然后单击特定元素以获取其各自的范围。

---

在我的特定情况下，我为需要着色的元素提供了这些范围：

• 类名称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。

因此，假设我只想给.Component上色。因此，将其放在主题的配置中：

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

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

我也只想给StorePicker（类名）上色：

{
    "name": "[JAVASCRIPT] - Only Class Name",
    "scope": ["entity.name.class.js", "source.js"],
    "settings": {
        "foreground": "#d393e9"
    }
}

同样，不仅StorePicker被着色，而且React和Component也被着色为相同的颜色：

我的问题：

如果它们共享相同的 Scope ，如何使它们像第一张图像一样（从截屏录像中）获得单独的颜色？

Answer 1

我不知道你是怎么得到这些范围的...

{
    "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" }
},