Подробное руководство о том, как разрабатывать, проектировать, упаковывать и публиковать цветовую тему VSCode.

Вы можете подумать, что это может быть сложно сделать, но нет, это очень просто, и я здесь, чтобы провести вас через это. Если у вас есть базовые знания о Node.JS и установлен VSCode, вы сможете сделать это менее чем за час. Я надеюсь, что это руководство поможет вам создать и опубликовать свою первую цветовую тему VSCode.

Предпосылки

  • Установлена ​​самая последняя версия Node.JS (LTS или текущая): https://nodejs.org/en/download
  • VSCode установлен: https://code.visualstudio.com/download
  • git установлен: https://git-scm.com/downloads
  • Базовые знания Node.JS
  • Базовые знания JSON
  • Базовые знания git
  • Базовые знания командной строки предпочитаемой операционной системы

Установка необходимых пакетов

Для начала нам нужно установить два пакета npm, один из которых называется yoman, а другой — vsce. Мы начнем с yoman, этот пакет сгенерирует файловую структуру, необходимую для начала работы, а также послужит хорошей отправной точкой для файла package.json. Чтобы установить его, откройте командную строку в режиме администратора и введите команду:

npm install -g yo generator-code

Далее мы хотим установить vsce. Vsce — это пакет, который позволит нам упаковать нашу окончательную версию нашей цветовой темы, чтобы мы могли опубликовать ее на торговой площадке VSCode. Чтобы установить его, откройте командную строку в режиме администратора и введите команду:

npm install -g @vscode/vsce

Это единственные 2 пакета узлов, которые вам понадобятся для разработки и публикации вашей новой цветовой темы!

Начиная

Теперь, когда у нас все установлено, перейдите в каталог, в котором вы хотите создать эту цветовую тему, используя командную строку, и введите команду:

yo code

Это должно вызвать меню, в котором вы можете выбрать, какое расширение VSCode вы хотите создать. В этом меню используйте клавиши со стрелками и клавиши ввода, чтобы выбрать параметр «Новая цветовая тема».

Это должно вызвать другое меню с вопросом, хотите ли вы импортировать или преобразовать существующую цветовую тему TextMate. Для целей этого руководства выберите «Нет, начать заново».

Вот где начинается самое интересное, потому что теперь мы можем назвать это! (Не волнуйтесь, вы можете изменить его позже). Старайтесь, чтобы он был простым и легко доступным для поиска, когда мы его опубликуем. В качестве примера я выбрал «Amethyst Dreams», но не стесняйтесь называть его как хотите.

Теперь он должен попросить вас ввести идентификатор цветовой темы. (Вы можете изменить это позже). Это будет имя файла, в котором находится тема на вашем компьютере. Вы можете свободно менять его на что хотите, но я просто нажму Enter и позволю пакету сгенерировать идентификатор для меня.

Теперь вас должны попросить ввести краткое описание. (Опять же вы можете изменить это позже). Это будет отображаться на боковой панели и на главной странице страницы «расширения» в VSCode, когда люди просматривают вашу цветовую тему на рынке. Говорите коротко и мило, оно не должно быть длиннее предложения. Позже мы воспользуемся файлом README для более подробного описания нашей цветовой темы. Для этого примера я поставлю «Совершите путешествие по Аметистовым мечтам и насладитесь красотой заката в пустыне».

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

Теперь мы переходим к деталям, что это за тема. «Темный», «Светлый», «Высококонтрастный темный», «Высококонтрастный светлый». Ниже приведены некоторые примеры каждого из них, чтобы вы могли выбрать правильный, но вы можете изменить его позже, если вдруг передумаете.

Я надеюсь, что приведенные выше примеры помогут вам выбрать правильный выбор базовой темы. Для этого примера я просто выберу «Темный».

Теперь он должен спросить вас, хотите ли вы инициализировать репозиторий git. Выберите «да», введя «y».

Теперь он должен спросить вас, хотите ли вы «открыть с помощью кода», это просто спросит вас, хотите ли вы открыть свое расширение с помощью VSCode. Выберите «Открыть с помощью кода», чтобы продолжить. Теперь у вас должно быть создано базовое расширение! Теперь пришло время настроить его по своему вкусу.

Настройка атрибутов цветовой темы

В VSCode откройте файл «package.json», чтобы внести в него некоторые изменения. Помните, как я сказал, что почти все, что мы делали в командной строке раньше, можно будет изменить позже, здесь мы можем это сделать! Просто найдите атрибут, который вы хотите изменить, и просто измените его! Некоторые атрибуты, которые я рекомендую вам добавить, — это атрибут «автор», атрибут значка и атрибут репозитория. Вот основа того, как должен выглядеть атрибут автора:

"author": {
    "name": "YOUR_NAME",
    "email": "YOUR_EMAIL",
    "url": "YOUR_LINKEDIN_PROFILE/PORTFOLIO_SITE/GITHUB"
  },

Не стесняйтесь добавлять атрибут автора после атрибута «двигатели».

Теперь я бы зафиксировал все и отправил его в общедоступный репозиторий GitHub. Нам нужна эта ссылка, чтобы добавить к атрибуту «репозиторий» файла package.json, поэтому рекомендуется создать это общедоступное репо сейчас и добавить ссылку к этому атрибуту. Если вам интересно, где разместить этот атрибут, я бы поместил его сразу после атрибута «автор», который вы только что создали. Это должно выглядеть так:

"repository": {
    "type": "git",
    "url": "LINK_TO_THE_GITHUB_REPO"
  },

Теперь мы можем добавить к нему нашу иконку. Я просто возьму изображение из unsplash для своей иконки, но не стесняйтесь создавать его самостоятельно. Когда у вас есть файл изображения (должен быть jpg или png), нам нужно добавить новую папку в эту файловую структуру. Я создал новую папку в корне проекта под названием «icon» и поместил туда свой файл значка. Теперь добавьте атрибут «icon» после атрибута «engine», но перед нашим недавно созданным атрибутом «author» для лучшего синтаксиса.

"icon": "ICON_FILEPATH_HERE",

Теперь ваш файл package.json должен выглядеть примерно так:

{
  "name": "amethyst-dreams",
  "displayName": "Amethyst Dreams",
  "description": "Take a trip through the Amethyst Dreams and experience the beauty of a sunset in the desert.",
  "publisher": "Sniffin",
  "version": "1.1.1",
  "engines": {
    "vscode": "^1.76.0"
  },
  "icon": "./icon/icon.jpg",
  "author": {
    "name": "Griffin Thaxter",
    "email": "[email protected]",
    "url": "https://www.linkedin.com/in/griffinthaxter/"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/Sniffin3083/amethyst-dreams"
  },
  "categories": [
    "Themes"
  ],
  "contributes": {
    "themes": [
      {
        "label": "Amethyst Dreams",
        "uiTheme": "vs-dark",
        "path": "./themes/amethyst-dreams-color-theme.json"
      }
    ]
  }
}

Используйте это как пример того, как должны выглядеть все атрибуты. Это не должна быть копия один к одному, если вы не следовали этому руководству до конца.

Создание новой цветовой темы

Отсюда пришло время создать саму тему! Откройте файл в папке «темы». Это файл JSON, который содержит все шестнадцатеричные значения цвета для вашей новой цветовой темы. Я не могу помочь вам больше, чем сказать вам поиграть со значениями, пока вы не найдете то, что вам нравится. Это может занять очень много времени, но чтобы упростить его, нажмите f5 (в зависимости от настроек клавиатуры вам, возможно, придется нажать fn + f5), и должно открыться новое окно, в котором вы сможете посмотреть, как вы выглядите в режиме реального времени. Поэтому всякий раз, когда вы меняете значение в файле темы, это должно отражаться в этом новом открытом окне!

Публикация вашей цветовой темы

Теперь, когда вы полностью разработали его, вам нужно полностью задокументировать его в файле README.md (я рекомендую добавить к нему скриншоты), а затем отправить его в репозиторий GitHub, который вы создали ранее. Теперь, когда вы отправили «окончательную» версию на GitHub, нам нужно добавить лицензию в наш репозиторий. Итак, откройте репозиторий на GitHub и нажмите кнопку «Добавить файл» рядом с зеленой кнопкой «код». Появится раскрывающееся меню, выберите «Создать новый файл».

Это должно привести вас на новую страницу, где мы можем получить нашу лицензию. Вызовите файл LICENSE.md, и справа должна появиться новая опция под названием Выберите шаблон лицензии. Здесь вы можете выбрать готовую лицензию. Я рекомендую вам изучить все лицензии, чтобы выбрать правильную. Вы можете найти их определения здесь: https://opensource.guide/legal/#what-open-source-license-is-suitable-for-my-project

Для целей этого примера я использую лицензию MIT. После выбора лицензии по вашему выбору зафиксируйте свои изменения и загрузите изменения в локальное репо. Здесь мы можем собственно начать процесс публикации. У нас должно быть все настроено, чтобы вы могли вернуться к своей командной строке и запустить эту команду, находясь в каталоге папки вашего проекта расширения.

vsce package

Это создаст новый файл в корне вашего проекта, который содержит все ваше расширение. Теперь мы просто заходим на https://marketplace.visualstudio.com/vscode и убеждаемся, что мы вошли в нашу учетную запись Microsoft. Отсюда нажмите ссылку Опубликовать расширение в правом верхнем углу страницы. Он может попросить вас создать нового издателя, просто введите то же имя, что и у издателя, которое вы указали в package.json. Теперь вы должны оказаться на новой странице, которая выглядит примерно так:

Здесь нажмите «Новое расширение» и «Код Visual Studio» в раскрывающемся списке.

Должно появиться меню с просьбой поместить в него файл пакета. Итак, перейдите в папку проекта в проводнике, щелкните и перетащите только что созданный файл пакета в это новое меню.

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

Заключение

Вот и все! Вы создали свою собственную цветовую тему для VSCode и опубликовали ее для всеобщего обозрения! Я надеюсь, что это руководство помогло вам разработать собственную цветовую тему для VSCode. Я надеюсь увидеть вас снова в моем следующем руководстве! Если вы хотите увидеть созданную мной тему, вы можете найти ее здесь: https://marketplace.visualstudio.com/items?itemName=Sniffin.amethyst-dreams или, выполнив поиск Amethyst Dreams на вкладке расширений VSCode.