Как изменить тему в vs code

Как настроить внешний вид Visual Studio Code

Visual Studio Code — замечательный редактор, поддерживающий множество расширений для настройки под нужды пользователя. Сейчас для него доступно более 8 000 тем, которые помогают настроить цвета интерфейса, иконки, используемые для отображения типов файлов, и многое другое.

Шрифт и лигатуры

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

Обычно это моноширинные шрифты, все символы которых занимают одинаковое пространство по горизонтали.

Другим распространенным дополнением является добавление лигатур, специфичных для конкретного кода. Лигатуры — это символы, состоящие из двух и более соединенных символов. Вот две причины использовать лигатуры для кода.

1. Наш мозг воспринимает многосимвольную последовательность, например === , как три отдельных символа. Это заставляет глаза сканировать все три символа, что требует затрат энергии на их обработку.
2. Некоторые комбинации символов позволяют корректировать пробельные символы, что также делает лигатуры более заметными для глаз при сканировании и обработке.

Остановимся на двух популярных шрифтах для разработчиков:

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

Алгоритм по использованию предпочитаемого шрифта в VS Code

1. Скачайте шрифт по указанным выше ссылкам на свой компьютер и установите их локально. Рекомендую установить шрифты TTF из загруженного .zip-файла.
2. Откройте файл VS Code settings.json через командную палитру (⇧⌘P). Введите settings (настройки) и затем Preferences: Open User Settings (JSON) — Предпочтения: открыть настройки пользователя (JSON).
3. Добавьте следующие две строки кода в файл settings.json , чтобы выбрать предпочитаемый шрифт и включить лигатуры. Это позволит использовать несколько моноширинных шрифтов.

 "editor.fontFamily": "JetBrains Mono, Fira Code, Menlo, Monaco, 'Courier New', monospace", 
"editor.fontLigatures": true 
>

Темы иконок

Visual Studio Code показывает иконку перед каждым элементом в проводнике папок. Каждая иконка указывает определенный тип элемента. Таким образом, вы можете быстро увидеть различия между папкой, файлом Javascript и HTML.

Иконки можно настраивать. Маркетплейс предлагает на выбор множество отличных пакетов. Рассмотрим несколько популярных вариантов.

1. Material Icon Theme (14,5 млн установок)

Material Icon Theme — наиболее часто скачиваемое расширение на VSCode Marketplace. Оно имеет красивый набор четких иконок и заслуживает всяческих похвал.

2. Monokai Pro (1,7 млн установок)

Monokai Pro — это и цветовая тема, и тема иконок, переключающиеся независимо друг от друга. Обе выглядят эффектно и позволяют сосредоточиться на коде.

3. vscode-icons (12,1 млн установок)

vscode-icons — это удивительный набор иконок, который сразу же внесет ясность в вашу боковую панель. Я использовал его с самого первого выпуска VS Code до недавнего времени. Если вы затрудняетесь с выбором набора иконок, рекомендую загрузить vscode-icons. Каждая его иконка проста и понятна, к тому же хорошо сочетается с любой цветовой темой.

4. Пакет City Lights Icon (96 тыс. установок)

Пакет City Lights Icon включает в себя две темы иконок для цветного и монохромного вариантов. Монохромный вариант удивительно чистый и, на мой взгляд, очень хорошо сочетается с темой Night Owl.

Цветовые темы

Цветовые темы — это, безусловно, самое радикальное визуальное изменение, которое вы можете внести в свой редактор. Их выбор очень индивидуален. Тем не менее я хочу привести здесь несколько отличных вариантов, которые завоевали наибольшую популярность в сообществе VS Code.

1. One Dark Pro (6,2 млн установок)

One Dark Pro — точная копия темы One Dark от Atom. Это самая популярная темная тема на VS Code Marketplace. Она вызывает ностальгию у многих разработчиков, которые использовали Atom в прошлом.

Популярность One Dark Pro вполне заслужена: цвета красивые и не отвлекают от кода.

2. Github Theme (5,4 млн установок)

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

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

3. Dracula Official (4,4 млн установок)

Dracula Official — популярная тема для различных редакторов, оболочек и других инструментов. Идея заключается в том, чтобы создать единую цветовую тему для всех рабочих процессов. Это красивая темная цветовая тема, вдохновленная ночной романтикой (отсюда и название).

Узнать больше об этой теме можно на сайте разработчика Dracula Official.

4. Night Owl (1,6 млн установок)

Night Owl — это впечатляющая темная тема, созданная специально для тех, кто пишет код до поздней ночи. Как утверждает автор: “При выборе цветовой схемы учитывались возможности, доступные людям с дальтонизмом и в условиях недостаточной освещенности. Решения также были основаны на контрастности, значимой для понимания прочитанного и оптимальной яркости”.

5. One Monokai (1,5 млн установок)

Тема One Monokai представляет собой нечто среднее между One Dark Theme и Monokai.

6. Shades of Purple (1,3 млн установок)

Shades of Purple — завораживающая тема со смелыми оттенками фиолетового. В этой теме код практически “выпрыгивает” с экрана.

7. SynthWave ’84 (1 млн установок)

Эта креативная тема создана под влиянием электронной музыки и обложек синтвейв-групп, таких как Timecop 1983 FM-84 и The Midnight. Она очень яркая, так что код будет буквально пылать на вашем экране. Если вы любите стиль 80-х, эта тема может прийтись вам по вкусу!

8. Tokyo Night (650 тыс. установок)

Эта тема для Visual Studio Code воспевает огни ночного Токио. Она очень чистая и выглядит великолепно.

9. Kanagawa (100 тыс. установок)

Kanagawa — своеобразный VSCode-порт в цветовую схему KANAGAWA.nvim. Это темная тема, вдохновленная колористикой знаменитой картины Кацусики Хокусая.

10. Bracket Lights Pro (65 тыс. установок)

Тема Bracket Lights Pro привлекает внимание красивой цветовой палитрой. Она придает VS Code светлую тему, характерную для редактора кода Brackets.

Заключение

Visual Studio Code обладает множеством вариантов настройки. Такое разнообразие предложений позволяет сделать редактор эстетически приятным для каждого разработчика.

• Расширения VS Code, в 3 раза повышающие скорость работы
• 5 секретов продуктивной работы в VS Code
• ReSvelte — инструмент разработчика Svelte и визуализатор дерева компонентов (расширение VS Code)

Читайте нас в Telegram, VK и Дзен

Visual Studio Code #

Visual Studio Code — это текстовый редактор, вроде блокнота в Windows, но созданный специально для программистов: он поставляется вместе с подсветкой синтаксиса, автодополнением, встроенным терминалом, системой контроля версий и ещё огромным количеством инструментов, упрощающих написание кода. Однако VS Code это не IDE, т.е. он изначально не содержит в себе инструментов для компиляции и запуска написанного кода, что означает, что для комфортной разработки, его необходимо настроить соответствующим образом. Именно этому и посвящена данная статья.

Где скачать #

Загрузить VS Code можно здесь . Сайт сам поймёт, какую операционную систему ты используешь, и предложит соответствующую версию. При установке рекомендуем поставить все галочки и не менять язык на русский, так как вся статья написана для англоязычной версии.

Настройка для работы с C++ #

Windows #

1. Установить компилятор g++ отсюда, выбрав последнюю доступную версию нужной разрядности. После установки необходимо перезапустить компьютер;
2. Открываем командную строку, для этого нажимаем комбинацию клавиш Win + R , вводим cmd и нажимаем Enter, в открывшемся окне прописываем g++ —version и снова нажимаем Enter. Если ты увидишь сообщение, содержащее версию, значит компилятор установлен и можно переходить к следующему шагу. Если же появится ошибка, значит система не понимает, где установлен компилятор, и ей необходимо указать, где он находится. Для этого необходимо добавить g++ в PATH : Параметры > Система > О системе > Сведения о системе > Дополнительные параметры системы > Переменные среды > Системные переменные > Path, тут необходимо нажать кнопку Добавить и вставить следующий путь: c:\mingw\libexec\gcc\x86_64-w64-mingw32 ;
3. Теперь ты можешь компилировать С++ код, прописывая в консоли g++ FILE_NAME.cpp , и запускать скомпилированный файл a.exe . Однако можно автоматизировать этот процесс внутри VS Code. Для этого нужно зайти в раздел с расширениями с помощью комбинации клавиш Ctrl + Shift + X или можно нажать на иконку с кубиками в боковой панели, а затем найти и установить расширение Code Runner ;
4. Теперь, чтобы скомпилировать .cpp файл, можно просто использовать комбинацию клавиш Ctrl + Alt + N или соответствующую кнопку в правом верхнем углу. При желании, её можно изменить в настройках;
5. Далее необходимо открыть настройки, пользуясь сочетанием клавиш Ctrl + , или нажав на шестерёнку в левом нижнем углу. В строке поиска ввести @ext:formulahendry.code-runner terminal и поставить галочку в Code-runner: Run In Terminal . Теперь код будет запускаться во встроенном терминале, и у тебя появится возможность вводить входные данные с клавиатуры.

Linux #

1. Установить компилятор g++ используя пакетный менеджер, например, если ты используешь Ubuntu, тебе нужно открыть терминал и написать sudo apt install gcc ;
2. Чтобы убедиться, что компилятор установился правильно, введи в терминале g++ —version . Если всё в порядке, ты увидишь сообщение, содержащее версию g++ ;
3. Далее, уже в самом VS Code, заходим в раздел с расширениями с помощью Ctrl + Shift + X или можно просто нажать на иконку с кубиками в боковой панели, а затем найти и установить расширение Code Runner ;
4. Теперь, чтобы скомпилировать .cpp файл, ты можешь просто использовать комбинацию клавиш Ctrl + Alt + N . При желании, её можно изменить в настройках;
5. Далее необходимо открыть настройки, пользуясь сочетанием клавиш Ctrl + , или нажав на шестерёнку в левом нижнем углу. В строке поиска ввести @ext:formulahendry.code-runner terminal и поставить галочку в Code-runner: Run In Terminal . Теперь код будет запускаться во встроенном терминале, и у тебя появится возможность вводить входные данные с клавиатуры.

Mac #

1. На Mac установить компилятор g++ легче всего, используя пакетный менеджер Homebrew, который не установлен по умолчанию. Чтобы его установить, тебе нужно открыть терминал и вставить туда следующую команду:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 

Несколько советов для удобства #

1. Если ты раньше пользовался Visual Studio, и, открывая свой старый код, у тебя возникают проблемы с отображением кириллицы, тебе следует изменить кодировку файла. Для этого во встроенной командной строке найди Change File Encoding > Reopen with Encoding и выбери самое первое с подписью Guessed from content.
2. Для того, чтобы программа корректно компилировалась, каждый раз после её изменения нужно сначала её сохранить с помощью Ctrl + S . Чтобы этого не делать, можно включить автосохранение: для этого нужно найти параметр Files: Auto Save в настройках и выбрать значение afterDelay .
3. Чтобы изменить или добавить сочетания клавиш, открой командную строку ( Ctrl + Shift + P на Windows и Linux или Cmd + Shift + P на Mac) и в поиске найди Preferences: Open Keyboard Shortcuts . Например, одной из полезных горячих клавиш будет увеличение/уменьшение размера шрифта, для этого в меню горячих клавиш введи Editor Font Zoom и поставь горячие клавиши на . In и . Out , мы предпочитаем использовать Ctrl + = для увеличения и Ctrl + — для уменьшения шрифта.
4. При компиляции .cpp файла в папке с ним появляется .out файл. Чтобы .out файлы не мешались во встроенном проводнике, можно скрыть их в настройках. Для этого в настройках введи Files: Exclude , и добавь туда значение *.exe (аналогично для любого другого расширения).

Работа с Git #

Visual Studio Code даёт всё необходимое для удобной работы с системой контроля версий. Здесь ты можешь спокойно пуллить, коммитить, пушить, мерджить и т.д. Самый простой, на мой взгляд, способ это делать — использовать командную строку Ctrl + Shift + P . Здесь ты можешь найти любое действие в системе контроля версий. Все они начинаются с Git: , а дальше идёт название действия, например, Git: Pull или Git: View File History .

Другим способом работы с Git является вкладка View: Show Source Control , где можно делать всё то же, но используя графический интерфейс.

VS Code в браузере #

GitHub очень тесно интегрируется с VS Code — ты можешь открыть любой репозиторий и нажать на клавиатуре на точку или поменять github.com на guthub.dev в адресной строке, чтобы открыть web-версию VS Code. Тут ты сможешь посмотреть и изменить файлы, не клонируя репозиторий на свой компьютер. Однако, это неполноценная версия VS Code: здесь у тебя не получится воспользоваться терминалом или скомпилировать .cpp файл.

Кастомизация #

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

Например, я предпочитаю минималистичный вид, поэтому мой VS Code на данный момент выглядит вот так:

Темы #

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

1. Открыть панель расширений c помощью Ctrl + Shift + X на Windows и Linux или Cmd + Shift + X на Mac;
2. Найти понравившуюся тему ( @category:»themes» чтобы видеть только темы);
3. Нажать на кнопку Install;
4. Если тема не применилась автоматически, или ты хочешь выбрать другую среди установленных, достаточно открыть командную строку ( Ctrl + Shift + P на Windows и Linux или Cmd + Shift + P на Mac), после чего найти параметр Preferences: Color Theme и выбрать желаемую тему.

Иконки файлов #

Точно так же, как и темы, ты можешь изменить иконки во встроенном проводнике — боковой панели, которая отображает все файлы рабочей директории. Для этого достаточно просто написать icons в поиске расширений и установить расширение с понравившимися иконками. Если иконки не применились автоматически, или ты хочешь выбрать другую среди установленных, достаточно открыть командную строку и в параметре Preferences: File Icon Theme выбрать желаемую тему иконок.

Шрифт #

В VS Code ты можешь поменять шрифт кода с помощью параметра Editor: Font Family в настройках, где перечисляются шрифты по приоритету. Например, у меня это ‘Fira code’, Menlo, Monaco, ‘Courier New’, monospace , что означает, что будет использоваться шрифт Fira Code, но если он не найдётся среди установленных, будет использоваться Menlo и так далее. Чтобы использовать свой шрифт, просто добавь его первым в эту строку.

Оба этих шрифта поддерживают лигатуры. Что это? Лигатура — это знак, объединяющий два или более символа. В коде они применяются для отображения операторов и помогают уменьшить шум путем слияния символов и удаления лишних деталей и в определённых случаях уравновесить пространство между символами. Вот несколько примеров:

Скрытие панелей #

Ещё одним способом кастомизации VS Code является изменение поведения панелей и других элементов интерфейса, что помогает освободить огромное количество места на экране. У меня обычно скрыты все элементы интерфейса, кроме самого пространства редактора, а когда у меня появляется необходимость воспользоваться, скажем, строкой состояния, я использую соответствующую комбинацию клавиш. Все сочетания клавиш настраиваются в Preferences: Open Keyboard Shortcuts .

Настройки #

На самом деле, в VS Code есть ещё огромное количество настроек, которые ты можешь найти… в настройках. Поэтому, если тебе что-то не нравится, ты всегда можешь поискать этот параметр в настройках приложения или в интернете — скорее всего ты не первый, кто захотел изменить это, и сможешь найти готовое решение.

И ешё, все свои настройки ты можешь синхронизировать через свой аккаунт GitHub, чтобы иметь единые настройки на компьютере дома и в университете. Статья об этом .

Как изменить тему в vs code

Когда люди пишут инструкции — они такие скучные и непонятные, в которых еще нужно и разбираться! У нас все просто!

Открываем программу VS Code.

Идем — файл — параметры — цветовая тема:

Нажмите, чтобы открыть в новом окне.

В новом окне выбираем тему. список тем слева, просто кликайте оп названию темы — она установится автоматически. справа строка прокрутки.

Если тем не хватило, то можно перейти по ссылке внизу ссылки.

Нажмите, чтобы открыть в новом окне.

Горячие клавиши сменить тему на «Visual Studio Code«?

Для быстрого доступа к новым темам и смены тем в «Visual Studio Code» есть горячие клавиши.

Не буду повторять тот путь, что уже выше проделывали.

Нажмите, чтобы открыть в новом окне.

Быстрая смена тем на «Visual Studio Code«

Быстрая смена тем на «Visual Studio Code» происходит по нажатию клавиш «ctrl + K ctrl + T»
ctrl + K ctrl + T Как нажимать!?

Зажали клавишу ctrl(не отпускаем. ) — далее K и далее T

Как поставить светлую тему «Visual Studio Code«?

Как мы уже выше выяснили, быстрый доступ к темам. нажимаем:

ctrl + K ctrl + T В окне, смотрим, есть строчка — «светлые темы», либо просто выбираем светлую тему, либо слева есть несколько светлых тем для Visual Studio Code«.

Нажмите, чтобы открыть в новом окне.

Как поставить темную тему «Visual Studio Code«?

Если вам нужно поставить темную тему в «Visual Studio Code«, то проделываем аналогичные действия.
ctrl + K ctrl + T

И далее выбираем темную тему

Нажмите, чтобы открыть в новом окне.

Загрузить сторонние темы «Visual Studio Code«?

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

ctrl + K ctrl + T

Установить дополнительные цветовые темы.

Слева открываем строку поиска нажав по кнопке «extensions»(ctrl + shift + X)

В строке вводим:

Выбор сторонне темы «Visual Studio Code«?

И в двух случаях попадаем в одно и то же место:

Я пытался я прокрутить до самого низа. когда кончится список сторонних тем . но у меня не получилось — может у вас получится!?

Как создать тему для Visual Studio Code

Вчера я портировал тему из Sublime Text в VS Code, поэтому картинкой дня объявляется скриншот моей темы в VS Code.

Зачем я вообще этим занялся? Я ведь даже не хотел тратить целый день, разбираясь во всех этих настройках. Но уж слишком я привык к этим цветам. Когда я перешел на Sublime Text, я изменил тему Monokai. Теперь мне нравится VS Code, и чтобы не расстраивать себя, пришлось и туда цвета скопировать.

Короче, вот как можно сделать тему, изменив существующую:

1. Установить какую-нибудь близкую по цветам тему в VS Code.
2. Изменить цвета путем изменения значений в editor.tokenColorCustomizations в настройках VS Code. Вероятно, идеального результата на этом этапе достичь не удастся, потому что некоторые настройки в исходной теме просто не получится отменить.
3. Создать новую тему из текущих настроек.
4. Протестировать новую тему и применить финальные изменения путем изменения файла -color-theme.json в новой теме. Изменения можно легко тестировать тут же в окне Extension Development Host. Запустить его можно через F5.
5. Опубликовать новую тему, чтобы завершить процесс полностью, а еще для гордости за самого себя, ну и чтобы тема всегда и бесплатно хостилась в маркетплейсе VS Code:
   • Создать учетную запись в dev.azure.com
   • Получить персональный код доступа
   • Создать учетную запись издателя
   • Опубликовать тему, загрузив файл вручную или через командную строку. Второй путь намного быстрее и круче. Очень удобно это делать прямо в терминале VS Code. А для меня только он и сработал, в отличие от простой командной строки.

Так что всё довольно легко. Кроме самих настроек темы: большую часть времени я потратил на editor.tokenColorCustomizations из пункта 2.

Ну и вот моя тема: Homogenus. А еще она изображена на фоне этой страницы.