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

Question

我试图弄清楚如何在React.

这些是我想要的颜色：

如您所见，类的名称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共享相同的 Scope: 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，我如何使它们像第一张图像（取自截屏视频）中那样单独着色？

标签： visual-studio-codescopethemesvscode-settingscolor-scheme

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