Обновление: теперь вы можете прочитать этот пост также на моем новом веб-сайте (без рекламы, без файлов cookie, без отслеживания…).

Надеюсь, вы согласитесь со мной, когда я скажу, что Visual Studio Code (отсюда только VSC) - лучший текстовый редактор на сегодняшний день. Набор функций расширяется в течение приятного ежемесячного цикла выпуска, параметры настройки охватывают почти все, что вам нужно, а интеграция с Git на высшем уровне. У него даже есть встроенный терминал! 😇

[ОБНОВЛЕНИЕ, август 2017 г.] В версии 1.15 компания VSC значительно улучшила эту область, даже добавив определенные настройки (и пользовательский интерфейс: изящный цветной пикет), чтобы пользователь мог настраивать функцию подсветки синтаксиса без необходимость создания полноценной пользовательской темы. Подробнее об этой новой функции.

Однако одной области, которой, как мне кажется, не хватает, является то, как вы можете настраивать свои цветовые темы, в основном подсветку синтаксиса и хромированные виджеты. То, как вам нужно действовать, чтобы достичь того, чего вы хотите, немного громоздко, и мне кажется, что это часть проекта, который еще не созрел из-за безумия выпускать раньше, выпускать часто первые дни.

VSC использует систему конфигурации на основе файлов JSON, где вы открываете настройки, играете с некоторыми из переменных, сохраняете файл, готово. Никакого причудливого пользовательского интерфейса не предусмотрено, и это идеально нормально, если - ну - вам не нужно работать над другим масштабом проблемы, который не требует простого исправления двух или трех значений.

Я помню, как однажды подумал, когда мне захотелось изменить цвет выделения синтаксиса для своих строк: «Меня все устраивает; Я просто хочу, чтобы мои текстовые строки и числа немного выделялись. Может быть, желтый? ». И меня сразу поразили абсурдные трудности, связанные с этой довольно простой задачей.

Затем я решил сделать шаг назад и изучить всю тему «Создание цветовой темы VSC», прежде чем разбирать ее до костей.

Официальное руководство по созданию тем рекомендует вам установить Yeoman и использовать его генератор кода для создания шаблона темы. Проблема с этим подходом заключается в том, что Йомен попросит у вас шаблон для начала, но если вы точно не знаете, что делаете, вы в конечном итоге потратите много времени, фактически удаляя то, что вам не нужно или что нравится, а не просто создаю что-то из вас для вас.

В этом руководстве не будет использоваться Yeoman, но вместо этого он покажет вам все, что есть в бизнесе по созданию тем.

Предпосылки

Считаю, что читатель знаком с npm (или, по крайней мере, установил его) и с редактированием файла JSON в соответствии с синтаксисом JSON.

Строительные блоки темы

Чтобы создать свою собственную тему, в первую очередь вам нужен каталог, в который ее можно поместить. Это место в macOS, OSX или Linux находится в каталоге ~/.vscode/extensions, а в Windows оно должно быть в %USERPROFILE%\.vscode\extensions. Создайте там каталог, используя имя вашей темы, которую скоро создадут, и cd в нее.

В конечном итоге тема состоит из:

  • файл package.json, который описывает его
  • файл темы в формате JSON
  • README, не обязательно, но всегда приятно

Файл package.json

Мы можем начать с очень простого npm init, чтобы создать файл с голыми костями. Поскольку тема может быть упакована и опубликована (например, в VSC marketplace), мы рассматриваем ее как модуль npm. Однако с технической точки зрения то, что мы пишем, является расширением VSC.

Важно: удалите атрибут main, если он есть, из файла package.json. Если он присутствует и указывает на несуществующий файл, ваша тема не загрузится.

Помимо стандартных атрибутов файла package.json, есть некоторые из них, которые необходимо определить как часть самой темы, что необходимо VSC и маркетплейсу.

Далее следует отрывок из package.json с тем, что я считаю минимальным набором атрибутов для работы вашей темы:

{
 ...
    "publisher": "claudioc",
    "engines": {
        "vscode": "^1.0.0"
    },
    "categories": [
        "Themes"
    ],
    "contributes": {
        "themes": [
            {
                "label": "MyTheme",
                "uiTheme": "vs-dark",
                "path": "./themes/my-theme.json"
            }
        ]
    }
...
}
  • Издатель - это ваше имя пользователя на торговой площадке VSC (необязательно, если вы не хотите его опубликовать).
  • категории также являются частью информации торговой площадки.
  • Раздел способствует сам по себе достаточно пояснительный и содержит все, что необходимо для того, чтобы VSC мог выбрать вашу тему из средства выбора тем.

Файл темы

Теперь по делу: создайте новый файл, предположительно названный по имени вашей темы, и поместите его в подкаталог themes самой темы. Расширение и (синтаксис) файла должны быть json.

В рамках темы вы сможете изменить внешний вид почти всех элементов пользовательского интерфейса VSC, а не только подсветку синтаксиса ваших файлов.

Если вы хотите изменить внешний вид чего-либо в файле темы, вам понадобятся две вещи:

  1. Способ выбрать «вещь», которую вы хотите изменить, и,
  2. Синтаксис для определения того, как его изменить (т. Е. Применить новый цвет или стиль шрифта)

Итак, первая путаница заключается в том, что VSC использует собственный синтаксис «селектора» для выбора элементов в своем интерфейсе Chrome, тогда как для (гораздо более сложного) бизнеса по выбору токенов для подсистемы выделения синтаксиса он использует де- Факто стандарт, который представляет собой синтаксис Textmate, также принятый Sublime Text для собственных нужд тематики.

И селекторы, и синтаксисы могут использоваться в одном файле (файле темы) одновременно. Вам нужно будет указать «цвета» для пользовательского интерфейса и определения «токенов» для выделения синтаксиса.

Корневые элементы файлов темы будут примерно такими:

{
    "name": "MyThemeName",
    "type": "dark",
    "colors": {
    },
    "tokenColors": [
    ]
}

Важными частями здесь являются разделы colors и tokenColors. В разделе colors вы измените аспект пользовательского интерфейса, а в tokenColors мы определим аспекты выделения синтаксиса.

Объект colors содержит такие ключи и значения:

"colors": {
    "editor.background": "#1B1B1B",
    "editor.foreground": "#00BCD4",
    "editor.lineHighlightBackground": "#313131"
}

Чтобы получить полный список этих значений (который, я думаю, со временем изменится), я предлагаю вам взглянуть на определенный файл (editorColorRegistry.ts) в репозитории VSC, который содержит все определения, вместо того, чтобы полагаться на более-менее актуальная официальная документация.

Обратите внимание, что вы также можете изменить эти цвета, не создавая целую тему! Начиная с самой последней версии VSC, эти цвета также можно установить с помощью объекта workbench.colorCustomizations, как объясняется в официальной документации. Эти настройки всегда переопределяют настройки темы.

tokenColors - гораздо более сложный орешек: это массив объектов, и базовая структура каждого объекта выглядит примерно так:

{
    "name": "Comments",
    "scope": [
        "comment",
        "punctuation.definition.comment"
    ],
    "settings": {
        "foreground": "#81C784",
        "fontStyle": "italic"
    }
}

Довольно просто: токен, который я называю «Комментарии» (вы можете называть его как хотите), определяется одним или несколькими «областями действия». Каждый раз, когда синтаксический анализатор выделяет «комментарий», к нему применяются settings.

Что же это за объемы? Их на самом деле довольно много, и они в основном определяют, какие элементы вы можете выбрать. Если вы действительно хотите точно настроить свою тему, вам, вероятно, нужно прочитать этот документ, но также вы должны попробовать и посмотреть, действительно ли вы можете использовать некоторые из них в VSC. Плохая новость заключается в том, что, по-видимому, не все эти области поддерживаются (?) VSC, поэтому не все можно оформить так, как хотелось бы. Я не нашел, например, способа стилизовать круглые скобки ().

Прежде чем двигаться дальше, давайте посмотрим, сможем ли мы заставить эту новую тему работать. В вашем файле темы просто используйте разделы colors, поместите туда пару цветов для editor.background и editor.foreground и оставьте tokenColors как пустой массив на данный момент.

Если у вас уже открыт VSC (и что еще вы бы использовали для редактирования файла темы, верно? 😜), используйте Cmd+Shift+P и запустите Reload Window (вам не нужен полный перезапуск VSC). Теперь снова Cmd+Shift+P и запустите Preferences: Color Theme. Если ваша тема и файлы package.json синтаксически верны (к сожалению, VSC не пожалуется), вы сможете увидеть (и выбрать) свою новую тему из списка.

Обратите внимание, что две команды, которые мы только что выполнили, теперь находятся в самом верху списка, когда вы снова используете Cmd+Shift+P. Очень удобно, как мы увидим

Теперь откройте один файл на языке, который вы используете чаще всего, например TypeScript.

На этом этапе мы хотим иметь возможность идентифицировать области, которые нам интересны, чтобы мы могли продолжать дополнять ими наш файл темы. К счастью, у VSC есть очень мощный инструмент, который поможет нам с этой задачей.

Снова используйте Cmd+Shift+P и на этот раз запустите Developer: Inspect TM Scopes. Пока этот «режим» включен, то есть до тех пор, пока вы не нажмете Esc, вы можете перемещаться по файлу с помощью мыши или клавиатуры и просматривать его, ища интересные области.

Я пытаюсь найти рамки для комментариев:

Это маленькое всплывающее окно предоставляет нам всю необходимую информацию: нацелена ли тема на этот токен (или нет, «Нет селектора темы») и каковы области действия этого токена (comment.block и source) .

Теперь я собираюсь стилизовать эти области, а также токен const TypeScript просто для удовольствия, изменив раздел tokenColors в моем файле темы следующим образом:

...
"tokenColors": [
{
    "name": "Comments",
    "scope": [
        "comment.block"
    ],
    "settings": {
        "foreground": "#81C784",
        "fontStyle": "italic"
    }
},
{
    "name": "The const variable type",
    "scope": [
        "storage.type"
    ],
    "settings": {
        "foreground": "#EF6C00"
    }
}
]

И вот результат:

Как видите, селектор для комментариев блока - это именно то, что мы написали в файле темы.

Заключение

Это в основном все. Теперь вы можете - с большим терпением, если честно - начать писать свою собственную полную тему. Я нахожу это занятием, которое одновременно и очень удовлетворяет, и немного пугает: если, например, вы установите цвет storage.type, чтобы изменить цвет ключевого слова const, стрелка стрелочной функции также станет этим цветом ...).

Я также думаю, что при работе с этими областями действия необходимо учитывать некоторую специфику. Если у вас есть comment.block, я думаю, вы также можете выбрать только comment.

Кстати, цветовая тема, которую я написал для себя, - Goodvibe.

Подписывайтесь на меня в твиттере или инстаграме.