Как установить тему VS Code Cyberpunk (Synthwave x Fluoromachine)

Придайте своему VS Code футуристический вид киберпанка

Прежде чем ты начнешь…

Вам нужно подписаться на меня в Твиттере: https://twitter.com/mariopepe_

А на TikTok: https://www.tiktok.com/@codingmario

За отличный программный контент!

Руководство

1. Установите расширение «Synthwave x Fluoromachine».

Откройте код VS.
Затем откройте панель расширения (в macOS это сочетание клавиш ⇧+⌘+X, а в Windows Ctrl+Shift+X).
Найдите Synthwave x Fluoromachine и установите его.

2. Установите расширение «Пользовательский загрузчик CSS и JS».

Как и раньше, на этот раз найдите и установите Custom CSS and JS Loader

3. Добавьте тему в настройки VS Code.

Откройте палитру команд в VS Code (macOS: ⌘+⇧+P,Windows: Ctrl+Shift+P)
Введите в текстовое поле: open settings.json
Выберите первый вариант Preferences: Open Settings (JSON)
В конце файла settings.json добавьте следующее:

macos:

{
  "vscode_custom_css.imports": [
    "file:///Users/{your username}/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.12/synthwave-x-fluoromachine.css"
    ]
}

windows:

{
  "vscode_custom_css.imports": [
    "file:///C:/Users/{your username}/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.12/synthwave-x-fluoromachine.css"
    ]
}

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

4. Включите тему в VS Code

Снова откройте палитру команд (macOS: ⌘+⇧+P,Windows: Ctrl+Shift +П)
Теперь введите Enable Custom CSS and Js
Нажмите Ввод
В нижней части страницы появится всплывающее предупреждение с просьбой перезапустить код.
Сделайте это, и при повторном открытии все должно быть сделано ✅ 🎉

4. Отключите раздражающее всплывающее окно «Ваша установка кода повреждена». Пожалуйста, переустановите'

Это всплывающее окно появляется, когда мы изменили внутренние файлы VS Code, чтобы показать нашу тему.

Это совершенно нормально.

Чтобы оно исчезло, нажмите на колесико настроек всплывающего окна и выберите «Больше не показывать».

Шрифт с лигатурами (по желанию)

5. Установить шрифт с лигатурами

Шрифт с лигатурами — это шрифт, для которого при выборе, без необходимости думать об этом, пара символов => автоматически отображается как один символ, см. изображение ниже:

Лично мне очень нравятся FiraCode, которые можно скачать отсюда https://github.com/tonsky/FiraCode. После загрузки вам просто нужно открыть папку ttf и дважды щелкнуть по каждому шрифту, содержащемуся в ней, чтобы установить их (это несколько шрифтов, поскольку для каждого FontWeicght есть отдельный файл, например жирный, светлый, средний, обычный и т. д.)

Другие шрифты с лигатурами:

JetBrains Mono: Гитхаб
Каскадия Код: Github
Иосевка: Гитхаб
Виктор Моно: Сайт
Фантастический Sans Mono: Github

6. Включить шрифты с лигатурами

Снова откройте файл settings.json VS Code.
Добавьте эти строки:

editor.fontFamily": "'Cascadia Code', 'Fira Code'",
"editor.fontLigatures": true,

Не забудьте заменить Fira Code любым именем шрифта, которое вы решили использовать.

Заключение

Вот и все люди!!!

Не забудьте подписаться на меня в Твиттере: https://twitter.com/mariopepe_