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

Question

我试图弄清楚如何在 React 中的类声明中使用 vscode 获取特定的颜色语法。

这些是我想要的颜色：

如您所见，StorePicker 类的名称是紫色，而 React 方法 .Component（包括点）是浅灰色。

据我所知，要在 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" }
},