Как раскрасить определенный синтаксис React.Js на vscode? - PullRequest
Новая
       74

Как раскрасить определенный синтаксис React.Js на vscode?

1 голос
/ 07 мая 2019

Я пытаюсь выяснить, как получить определенный синтаксис цвета с vscode в объявлении класса в React.

Это цвета, которые я хочу получить:

enter image description here

Как видите, имя класса StorePicker представляет собой фиолетовый , а метод React .Component (включая точку) бледно-серый .

Насколько я знаю, чтобы играть с синтаксисом цвета на vscode, он должен быть с TM Scope.Таким образом, чтобы сделать это, в моем файле кода, где у меня есть объявление класса, я нажимаю Ctrl+Shift+p и ищу Inspect TM Scopes, и нажимаю на определенные элементы, чтобы получить их соответствующие области.

InВ моем конкретном случае я получил следующие области действия для элементов, которые нужно раскрасить:

  • Имя класса 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 также окрашены в тот же цвет:

enter image description here

И я также хочу раскрасить только StorePicker (имя класса): 

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

Опять не только StorePicker раскрашено, но React и Component раскрашено с помощьютот же цвет:

enter image description here

Мой вопрос:

Как мне их раскрасить отдельно, как впервое изображение (взято из Screencast), если они имеют одинаковые Scope ?

1 Ответ

0 голосов
/ 07 мая 2019

Понятия не имею, откуда у вас эти области ... 

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