Темы кода Visual Studio без хлопот: создание расширения | CSS-трюки

Несколько лет назад, когда я прочитал статью Сары Драснер о создании тем VS Code, я про себя подумал: Это большой труд… Никогда не буду создавать тему…

Но посмотрите, я пошел дальше и сделал одну – и работа над большинством тем заняла менее шести часов, а затем день или два, чтобы внести последние изменения.

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

Я думаю, что разговор об этом процессе имеет большое значение, потому что я ушел оттуда нет, слишком много работы К О, я могу это сделать, дело сделано..? все в течение нескольких часов. (Остальное — это просто время, потраченное на полировку).

Я никогда не хотел создавать тему VS Code…

Я был в процессе редизайна своего сайта. Я работал над супер-пупер старым дизайном, который хотел изменить уже много лет — и наконец дошли руки.

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

Но это не сработало должным образом с моим новым дизайном сайта.

Все, что я хотел сделать, это улучшить подсветку синтаксиса для блоков кода, чтобы они больше соответствовали остальной части сайта.

Это было начало всего.

Shiki CSS-переменные стали проще

Я использую Astro для своего сайта. Shiki — это средство подсветки синтаксиса, встроенное в Astro по умолчанию.

Проведя небольшое исследование, я понял, что Shiki позволяет создавать темы с переменными CSS, а нам нужно было выбрать всего несколько цветов.

Это не кажется слишком сложным, поэтому я обратился к ИИ, который помог мне создать тему Shiki на основе переменных CSS. Если вы также используете Astro, вам понадобятся CSS и JavaScript:

:root {
  --shiki-foreground: #eeeeee;
  --shiki-background: #333333;
  --shiki-token-constant: #660000;
  --shiki-token-string: #770000;
  --shiki-token-comment: #880000;
  --shiki-token-keyword: #990000;
  --shiki-token-parameter: #aa0000;
  --shiki-token-function: #bb0000;
  --shiki-token-string-expression: #cc0000;
  --shiki-token-punctuation: #dd0000;
  --shiki-token-link: #ee0000;
}

pre.shiki,
pre.astro-code {
  padding: 1rem;
  border-radius: 0.5rem;
  color: var(--shiki-foreground);
  background-color: var(--shiki-background);
  overflow-x: auto;
}

pre.shiki code,
pre.astro-code code {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
}

import { createCssVariablesTheme } from 'shiki/core'

const shikiVariableTheme = createCssVariablesTheme({
  name: 'css-variables',
  variablePrefix: '--shiki-',
  fontStyle: true,
})

export default defineConfig ({
  // ...
  markdown: {
    shikiConfig: {
      theme: shikiVariableTheme
    }
  }
})

Я провел быстрый эксперимент с цветами, которые уже использовал для своего веб-сайта, и сравнил их с различными популярными темами, такими как «Дракула», «Сова Сары» и «Лунный свет 2».

Это придало мне уверенности продолжить свою тему немного дальше — ведь подсветка синтаксиса развивалась в правильном направлении.

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

Вот тут-то и начинается «сложная» часть.

Использование искусственного интеллекта для помощи в работе с TextMate

К счастью, искусственный интеллект здесь, чтобы помочь. Если бы здесь не было ИИ, я бы, наверное, сдался на этом этапе.

Вот что мой ИИ должен сделать:

1. Я сказал, что хочу создать собственную тему.
2. Я попросил его построить для меня эшафот.
3. Я попросил его просмотреть файлы темы Moonlight 2 в качестве ссылки и создать на основе этого токен области действия TextMate.

Я нашел это, чтобы объединить цвета, используемые в таких семантических ключевых словах. foreground, background, keyword – Как тема переменных CSS Shiki.

И я попросил его нарисовать все цвета в одном color объект, чтобы я мог получить palette Объект, содержащий только семантические имена.

Вот примерно что получилось:

const colors = {
  purple: '...',
  blue: '...',
  // ...
}

const palette = {
  foreground: '...',
  background: '...',
  // ...
}

export default {
  colors: {
    // Used for theming the text editor
  },
  displayName: 'Display Name of your Theme',
  name: 'your-theme-name',
  tokenColors: [
    {
      name: 'Scope name (optional)',
      scope: [/*scopes used*/],
      settings: {
        foreground: /* change color */,
        background: /* background of the text */,
        fontStyle: /* normal, bold or italic */,
      }
    }
  ]
}

Вам необходимо предоставить JSON для VS Code для настройки, поэтому я также попросил ИИ создать сценарий сборки, который преобразует приведенный выше формат в .json файл.

Вы можете найти сценарий сборки и все, что я использовал, в репозитории GitHub.

отладка локально

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

Итак, я попросил у ИИ предложение.

В нем говорилось, что я могу использовать хост расширений VS Code для локальной разработки, а затем приступал к сборке. .vscode/launch.json Файл следующего содержания:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}"
      ]
    }
  ]
}

Чтобы запустить это, вы можете использовать F5 (Окна) или Ф.Н. + F5 (Mac), и появится новое окно редактора — в этом новом окне вы можете изменить тему на свою собственную тему.

Определить, какие окна используют хост расширения, довольно просто, потому что:

• Если вы измените тему, это окно будет иметь другую тему, чем другие ваши открытые текстовые редакторы.
• Ключевое слово хоста расширения заметно в заголовке.

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

{
  "contributes": {
    "themes": [
      {
        "label": "Your Theme Name",
        "uiTheme": "vs-dark",
        "path": ".json"
      }
    ]
  }
}

Понимание области действия TextMate

Сначала я скопировал изображения и попытался заставить ИИ настроить различные токены в соответствии с выбранными мной цветами. Но это очень быстро разочаровало.

Один из двух:

• ИИ неправильно определил область действия TextMate, или
• Оно было перезаписано чем-то другим.

Я не мог сказать. Но, к счастью, вы можете легко отладить области TextMate с помощью команды «Разработчик: токены и области редактора инспектора».

В этом режиме вы можете нажать на любой текст, и появится всплывающее окно. Он содержит всю информацию, необходимую для настройки области TextMate.

Вот как читать, что происходит:

• Передний план: Сообщает текущий активный диапазон. В этом случае активная область действия variable.
• Область применения TextMate: Сообщает, какие доступные области TextMate вы можете использовать для этого конкретного токена.

Области TextMate работают интересным образом. Экспериментируя, я обнаружил следующее, поэтому оно может быть не на 100% точным:

1. Вы можете использовать любую доступную часть области действия. variable, variable.propИ variable.prop.css Все работают.
2. Вы можете повысить специфичность, указав больше свойств. variable.prop.css > variable.prop > variable По спецификации.
3. Более высокий объем более конкретен, чем нижний. variable > meta.function.misc.css.
4. Вы также можете добавить к ним другие области действия, например селекторы CSS. Если вам нужно перезаписать более высокую область. meta.function variable > variable

Как я выбирал цвета для темы

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

Вот две статьи, которые пришли мне на ум:

По сути, принципы, которые я извлек из обеих статей, таковы:

• Мы хотим, чтобы основные моменты выделялись.
• Если вы используете одинаковую яркость и насыщенность, цвета будут похожи друг на друга, и их будет трудно отличить друг от друга.
• Если все выделено, то ничего не выделено.
• Если все важно, ничего не важно.

По сути, мы говорим принцип противоречия Пока проектирую. Поскольку я уже проектирую для того, чтобы кто-то прочитал, следующие идеи, которые пришли мне в голову, были:

1. Как мне направлять взгляд?
2. Какие важные элементы мне нужно увидеть/знать?
3. Какие элементы менее важны?

С этим я начал работать:

• Functions И methods были важны, поэтому они должны были быть сильными, поэтому я использовал cyan Это самый сильный цвет в моей палитре.
• export Ключевое слово также важно, поскольку оно символизирует экспорт!
• Keywords Нравиться import И function скорее можно заставить замолчать purple это.
• Strings Это возможно green – Потому что они выглядят более привлекательно в виде списков текста в файле JSON.

Я немного поигрался с остальными цветами, но в итоге остановился на следующем:

• Constants Являются orange Потому что их немного легче распознать
• Variables Являются white-иш, потому что это большие куски текста – добавление к ним цвета создает эффект «поноса из рождественских огней», упомянутый Тонски.
• Properties Являются blue Потому что они как рабочие лошадки, которым необходимо различать цвета, но недостаточно, чтобы привлечь слишком много внимания.

Затем я перешел на HTML/Astro/Svelte:

• Tags Красные здесь потому, что они очень важны, а красный легче читать, чем голубой.
• Attributes Являются purple по той же причине keywords.
• Components Являются orange потому что им нужно расстаться Tags.
• бонусные баллы: Tags И Components связаны – следовательно red И orange Здесь это чувствуется.

И, наконец, подсветка синтаксиса CSS. На данный момент почти все казалось правильным, кроме:

• CSS Functions должно быть cyan Как ДжС.
• Punctuation должен быть отключен, чтобы мы могли легко различать -- Из остального текста.
• Property Это возможно green Потому что синий в данном контексте слишком бледный – и green Он хорошо смотрится на глазах по сравнению с другими яркими цветами.

Жаль, что подсветка синтаксиса для вложенных классов имеет тенденцию быть немного беспорядочной (так и есть). greenно они должны быть orange), но я ничего не могу с этим поделать.

отладка цвета

VS Code построен на Electron, поэтому его легко отлаживать и тестировать цвета. Все, что мне нужно было сделать, это запустить DevTools, проверить цвет, который я хотел изменить, и сразу же изменить его, чтобы получать обновления в реальном времени!

подведение итогов

Самое важное, чему я научился в ходе этого процесса, — это плыть по течению. Одно открытие может привести к другому, затем к другому, и что-то, что кажется «невозможным», превращается в «О, готово?» Через несколько часов.

я называю свою тему Сумеречная вселенная (ИИ помог с именованием). Вы можете получить его здесь:

Как я опубликовал свое расширение? Это тема короткой последующей статьи, над которой я работаю.

А пока, если вы хотите следить за тем, что я сделал, вот репозиторий GitHub. Также не стесняйтесь предлагать изменения для улучшения этой темы!

Наконец, если вам интересно узнать о моих творческих приключениях, подпишитесь на мою рассылку по электронной почте. 🙂

Вот и все. Спасибо за чтение, и я надеюсь, что вам понравилось!