У каждого свой стиль, в том числе при кодировании с использованием Visual Studio Code (VS Code). Отображение VS Code имеет значение для большинства программистов, использующих VS Code. Мы можем настроить его с помощью расширения темы, некоторым может понравиться светлая тема, а другим — темная.

Что, если мы создадим его сами, чтобы он соответствовал нашим предпочтениям?

Начиная

Visual Studio Code использует Azure DevOps для своих сервисов Marketplace. Это означает, что проверка подлинности, размещение и управление расширениями обеспечиваются через Azure DevOps.

Я предполагаю, что вы уже установили Node.js, NPM и сам VS Code (как вы могли этого не делать?).

Прежде всего, вам нужно создать организацию Azure DevOps. После создания организации вы должны получить свой токен личного доступа, который вы будете использовать позже, когда захотите опубликовать свою тему или другие расширения. Вы можете получить его, следуя приведенной ниже инструкции.

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

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

3. Наконец, прокрутите список возможных областей действия вниз, пока не найдете Marketplace и выберите Приобрести и Управление. После создания вашего токена личного доступа обязательно сохраните его где-нибудь, так как вы больше не сможете получить к нему доступ.

Вы можете получить доступ к полной инструкции здесь.

Вы, вероятно, задаетесь вопросом, где находится та часть, где вы можете выбрать и изменить свою новую тему. Хорошо, поехали!!

Вам потребуется установить vsce (сокращение от Visual Studio Code Extensions). Кроме того, вам также понадобится генератор расширений и настроек под названием Yo Code. Теперь вы можете установить их глобально, используя свой терминал.

$ npm install -g vsce yo generator-code

Вы можете начать использовать генератор с помощью этой команды:

$ yo code

Затем вы увидите этот экран на своем терминале

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

URL-адрес, который я вам дал, взят из Monokai Dark Soda. Вы можете получить доступ к его репозиторию здесь.

Вы должны выполнить все подсказки, как на картинке ниже. Вас спросят:

  • Имя вашего расширения
  • Идентификатор вашего расширения. Вы можете указать имя вашего расширения в формате kebab-case.
  • Описание. Вы можете оставить его и поставить позже на package.json
  • Имя вашего расширения, которое отображается пользователю. Вы можете указать его так же, как имя вашего расширения
  • Базовая тема. Выберите темный или светлый или высокий контраст
  • Запустите репозиторий git. я предпочитаю "да"

Вы можете получить доступ к полной информации здесь.

Теперь вы можете просто получить доступ к каталогу вашего расширения и открыть VS Code.

$ cd extension-name
$ code .

Вы можете открыть файл JSON в папке themes и начать изменять все цвета. Атрибут ключа в файле JSON, который вы видите, может отличаться, вы можете скопировать и вставить из моего собственного файла JSON здесь.

Вы сделали это и хотите посмотреть, что изменилось. Вы проверите свои изменения, нажав fn + f5 на Mac или просто f5 на Windows. Вы увидите, как откроется новое окно VS Code и увидите изменения, если вы измените некоторые атрибуты в файле JSON (конечно, вы должны сохранить его, прежде чем он изменится в другом окне).

Если вы не понимаете изменение этогоатрибута, что или тотизменение атрибута, что, или вы видите пример кода, и вы интересно, это коррелирует с каким атрибутом. Вы можете проверить свой код, нажать Command/CTRL + Shift + P и найти Разработчик: проверить области ТМ. Где бы вы ни нажимали свой код, там будет информация об этом, такая как их цвет, их стили шрифта и то, как вам нужно настроить его. Недостатком является то, что вы можете просматривать только редактор, однако в VS Code есть много других частей. Этот сайт очень помогает узнать ключевой атрибут другой части кода VS.

Для справки, вы можете найти множество вариантов цветов HEX в Coolors, Color Hunt или даже в Adobe Color CC.

Допустим, вы закончили редактирование и хотите его опубликовать.

Пока не отказывайтесь от своего кода VS, вам все еще нужно ввести некоторую часть в файл package.json. Вы можете взять мой файл в качестве примера. Вам также может понадобиться найти значок и поместить его в корневую папку /extension-name/icon.png, а затем поместить в файл package.json, как это сделал я.

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

Переезжаем на время в ваш браузер, вам нужно зарегистрироваться как издатель здесь. Вы можете использовать kebab-case в своем идентификаторе издателя.

Теперь мы вернемся к вашему терминалу внутри вашего каталога расширений. Мы упаковываем ваше расширение. Сначала вам нужно войти в систему, указав свое имя издателя и свой персональный токен доступа, который у вас есть с самого начала (в конце концов, вы будете использовать его после долгого путешествия).

$ vsce login (publisher name)
$ vsce package

Если вы закончите его успешно, обратите внимание, что в вашем каталоге появится новый файл VSIX.

Подождите, вы почти закончили!!

Вы можете загрузить этот файл VSIX, используя Страницу управления издателем и расширением. Просто нажмите Новое расширение и выберите Visual Studio Code.

Подождите несколько минут, и поехали!! Ваше расширение готово к продаже.

Пожалуйста, рассмотрите возможность загрузки и оценки моего расширения темы Гелап. Вы также можете пометить, разветвить, внести свой вклад в его репозиторий.

Полезные источники

Хотите поддержать меня?