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

How to Change the Theme in VS Code

Visual Studio Code turns editing and writing new code into a hassle-free, fun experience. The default dark theme of VS Code was designed to be easier on the eyes than a regular harsh, white background which can cause fatigue after long hours of work. But what if you don’t really like the dark colors on your screen while working?

The benefit of VS Code’s modular design is that you have tremendous freedom in changing the original dark theme with a lot of different customization options that span the gamut of screen color, fonts, and even the look of VS Code’s integrated terminal itself.

This article will tell you all you need to know about changing themes in VS Code.

How to Change Theme in VS Code

Changing the overall theme in VS Code is quick and easy. Here’s what you need to do:

1. Open VS Code.
   
2. Select “File” (“Code” on macOS), select “Preferences,” then choose “Color Theme.”
   
3. VS Code will show you a selection of pre-built themes to choose from in a dropdown menu.
   
4. Use your cursor keys to preview how each theme looks directly on the screen.
   
5. Press “Enter” while selecting to choose that theme to use.
   

Changing the theme to a different pre-configured one might be the first thing you do when you open VS Code for the first time. Coding can take a lot of time, so it’s beneficial to use a theme you’re comfortable with and which doesn’t hurt your eyes while working.

How to Change Your Terminal Theme in VS Code

If you want to stick to the several pre-configured options for the terminal color and theme, the process is the same as changing the overall theme. All of the integrated themes include options to change your terminal’s appearance, but you can’t separate it from the other parts of the theme itself from the main menu.

Before using the aforementioned steps to change the theme, open the terminal console (Ctrl + Shift + P) to preview the changes made to the terminal. Some themes don’t make any changes to the terminal, while others can shift it drastically. In addition, using a theme you like only moderately is no good either, as you might find yourself using the terminal more than you initially thought.

However, there are a few workarounds that will allow you to change the terminal theme, which we’ll cover in the sections below.

How to Change Material Theme in VS Code

VS Code’s main feature is the overabundance of exciting extensions to customize your coding experience and bring more functionalities to the text editor. One of such extensions is the Material Theme, one of the most popular of its kind in the VS Code Marketplace.

Material Theme has a lot of benefits over pre-customized designs, but some users might find it lacking. The user manual for this extension includes a few tips on how to make further changes to suit your needs. Here’s how to change the overall theme in Material Theme:

1. Open the quick menu (Ctrl + Shift + P).
   
2. Type “theme” in the prompt.
   
3. Choose “Preferences: Color Theme.”
   
4. Select one of the Material Theme’s presets.
   

Setting an accent color will make a part of the code pop, which can be useful if it’s a particularly important or troublesome line to diagnose. To set an accent color, use the following steps:

1. Open the quick menu (Ctrl + Shift + P).
   
2. Type “material theme” in the prompt.
   
3. Choose “Material Theme: Set accent color.”
   
4. Choose the color you like from the list.

With a changed Material Theme, you can get customization that is above the norm, and we’ll show you how.

How to Manually Customize a Theme in VS Code

VS Code allows for much more customization than simply changing between a few presets. Here are two ways to customize the theme according to your liking.

Method 1 – Download a Custom Theme

When talking about customization, we can’t go without mentioning the expansive VS Code Marketplace. Various extensions exist that solely change the appearance of VS Code without interfering with its functionality. Here’s how to download a theme.

1. Open the VS Code Marketplace. You can also use the integrated “Extensions” menu on the left of the screen.
   
2. Type in “theme” in the search bar to browse only those items that change the theme. One of our top recommendations is the Material Theme mentioned above, but we’re sure you can find one that suits you best.
   
3. Download the extension (if using a browser) then install the .VSIX file by going to “Extensions > ellipsis icon > Install from VSIX.” Alternatively, when you find the theme you like in VS Code, click on it, then select the “Install” button on the details (right) menu.
   
4. Once the theme is installed and enabled, select it with the “Preferences: Color Theme” command.
   

Method 2 – Editing the Theme

All themes and settings are stored in VS Code using plaintext. Follow the steps to access these settings and make the changes you want:

1. Create a workbench or user settings file. The former will only change the appearance of the current project, but the latter will remain across new projects.
2. Type in “Preferences: Open Settings” command in the main menu.
   
3. Select the tab on the top left to choose between user and workbench settings.
   
4. Press on “Edit in settings.json” to open the file that contains the settings you need to change.
   
5. Find the setting named “workbench.colorCustomizations.”
   
6. Focus on changing the theme you want by putting in

The Theme_name is the name of the theme you want to change. Keep the quotes.

1. Further changes to the theme are made in the new brackets. Type in the name of the parameter you want to change (in quotes), type ‘:’ then choose the appropriate setting you need.
2. Use this guide to find the parameters you want to change.
3. Colors are stored in hexadecimal code. Use a color hexadecimal guide to pinpoint the color you want.
   
4. When you’re done with the changes, save the file.
   

This method can be used to change most of the UI and code appearance, including the base theme color, backgrounds, terminal appearance, button colors, and font styles.

If you’re wondering how to change the font in VS code, use method 2 outlined above. You’ll probably need a font guide.

Additional FAQ

Where Are VS Code Themes Stored?

The themes that come from extensions are stored in the extensions folder of VS Code. This location is in your installation directory (for example C:) and can be usually found here:

” is the install directory for VS Code.

Base themes are stored in: Microsoft VS Code\resources\app\extensions\theme-defaults\themes

However, you don’t need to spend time looking for files to change. Changing the user settings via the “settings.json” file will deliver much faster results.

How Do I Change the Comment Color in VS Code?

To change the comment colors, open the “settings.json” file (use “Method 2” outlined above), select the theme you want to change, then input (with quotes):

Here, “hexcode” is the code for the desired color. Use a color picker to choose an appropriate color.

What Is the Best Theme in VS Code?

The best VS Code theme is the one you find most pleasing and useful for your programming efforts. Different users can have distinct color and theme preferences. Thankfully, there are plenty of options to choose from, whether in the pre-configured themes, extension downloads, or in the ability to customize a theme exactly to your liking.

Choose Your Theme

With these instructions, you can fully customize a theme as you want. With its wealth of options, VS Code remains one of the most popular text editors, and its ability to gain new features with extensions make it very similar to an IDE.

What themes do you use in VS Code? Have you made any changes to your preferred theme? Let us know in the comments section below.

Установка Visual Studio Code (VSCode) на Windows 10

Сегодня мы рассмотрим установку бесплатной IDE с открытым исходным кодом Visual Studio Code на Windows 10, а также поменяем тему среды и установим дополнительную тему из каталога.

Несмотря на то, что автором является Microsoft данная среда разработки полностью бесплатна и к тому же Open Source.

Я часто использую её для разработки на PHP или Go Lang.

Для чистоты эксперимента я буду устанавливать VSCode на чистую Windows 10 2H20 в виртуальной машине.

Скачивание

Скачать дистрибутив вы можете на сайте проекта — https://code.visualstudio.com/

Объем дистрибутива около 70 мегабайт.

После скачивания запускаем установку.

Установка

Саму установку нет смысла подробно описывать, единственное что вы можете поставить галочку напротив «Создать значок на рабочем столе», а так всё сводится к нажатию на кнопку «Далее» и в конце «Установить».

Первый запуск

После установки среда запуститься автоматически.

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

И так, после запуска вы увидите главное окно VSCode.

Я не понимаю эту моду везде ставить темные темы по умолчанию. Может это модно и молодёжно, но лично для меня такие темы слишком контрастны, глаза быстро начинают болеть. Хотя не будем спорить, тут все индивидуально.

Меняем тему оформления VSCode

Для того чтобы сменить тему нажмите сочетание клавиш:

Щелкаем на пункт Light (Visual Studio)

Цветовая тема тут же меняется

Но меня это не устраивает – не нравится темная боковая панель.

К счастью для VSCode создано просто огромное количество тем.

Установка дополнительной темы для VSCode

Для установки дополнительной схемы опять нажмем

И пролистаем список вниз:

Щелкните на Visual Studio 2017 Light Theme и нажмите на кнопку Install

Тема будет установлена и откроется окно с предложением установить её текущей:

Visual Studio Code: кому и зачем он нужен

Недавно мы беседовали с Анной Леоновой о её пути в программировании. Аня пишет код в редакторе Visual Studio Code и сегодня поделится своими настройками. Вы узнаете, как установить программу и подготовить её для комфортной работы.

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

Что за Visual Studio Code?

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

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

VSCode — один из самых популярных редакторов кода, потому что он бесплатный и открытый, его можно сделать каким угодно под свои задачи. Есть и другие: например, Sublime Text или продукты компании JetBrains.

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

Установка

Перейдите на code.visualstudio.com и скачайте актуальную версию редактора под свою операционную систему — есть поддержка для Linux, Windows и Mac OS. Далее просто следуйте командам программы-загрузчика и откройте редактор.

Приветственное окно Visual Studio Code после установки

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

❌ Новички часто выбирают редактор методом тыка: скачивают несколько программ, визуально оценивают их интерфейс и начинают работать там, где им кажется удобнее или красивее. Редко бывает так, что программиста устраивает стандартный интерфейс и настройки — новички в этом случае прыгают между разными редакторами, сравнивают их базовые возможности и теряют время.

✅ Выбирайте редактор, который можно как угодно изменять и настраивать. Нравится внешний вид Sublime Text, но не хватает мощи VS Code — нет проблем: находите тему, меняете шрифт, добавляете пару расширений и готово. Чтобы быстро освоить VS Code, изучайте интерфейс по документации.

Настройка

VS Code готов к работе сразу после установки — в него по умолчанию добавлено большинство плагинов для веб-разработки. Можно сразу загрузить проект или начать программировать в новом файле. Нужно только привыкнуть к интерфейсу.

Если вы раньше пользовались другим редактором и не удалили его с компьютера, то VS Code автоматически предложит перенести сохранённые настройки. Для переноса вам достаточно кликнуть на всплывающую подсказку и перезагрузить VS Code — переносятся плагины, расширения и установленные горячие клавиши.

Если у вас ещё не было кодового редактора, то ниже мы рассмотрим несколько базовых настроек, которые помогут персонализировать интерфейс VS Code.

Устанавливаем русский язык. На левой боковой панели нажмите Extensios и в строке поиска напишите Russian Language Pack — это языковой пакет, который адаптирует VS Code под русский язык. Выберите расширения, кликните Install и перезапустите редактор. У вас должен открыться русифицированный интерфейс.

Языковой пакет Russian Language Pack

Если после перезагрузки язык не изменился — на левой боковой панели нажмите значок шестерёнки и выберите раздел Command Palette. Появится строка поиска: напишите Display, выберите команду Configure Display Language и нажмите Enter. Смените язык с английского на русский и повторно перезагрузите редактор.

Приветственное окно Visual Studio Code после установки языкового пакета

Меняем цветовую тему. В левой боковой панели нажмите на значок шестерёнки, перейдите в раздел «Цветовая тема» и выберите тему, встроенную в редактор.

Если ничего не нравится — установите любую внешнюю тему, которую получится найти в интернете. Если тема совместима с VS Code, то после скачивания она сама откроется в редакторе и вам достаточно нажать «Установить». Начать поиск рекомендуем с официального маркетплейса, где собраны тысячи бесплатных тем.

Анна Леонова рекомендует тему Night Owl — ночная сова. Её мы и поставили для теста

Добавляем любимый шрифт. В боковой панели нажмите на шестерёнку, выберите раздел «Параметры» → «Текстовый редактор» → «Шрифт». Перед вами будет вкладка Font Family, в которую нужно вписать название выбранного шрифта — если этот шрифт скачан или сохранён в операционной системе, то он сразу отобразится в редакторе. Здесь же можно изменить размер и жирность шрифта.

Меняем стандартный шрифт Visual Studio Code на Courier New

Включаем автосохранение. В боковой панели выберите шестерёнку, перейдите в «Параметры» → «Текстовый редактор» → «Файлы». Вы увидите вкладку Auto Save, в которой нужно указать период сохранения файлов. Мы рекомендуем режим afterDelay с задержкой в одну секунду — так вы будете сразу сохранять всё, что запишете. Если вы выберете режим onFocusChange, то изменения в рабочем файле будут сохраняться каждый раз, когда вы будете открывать другие вкладки редактора. В режиме onWindowChange изменения происходят сразу после того, когда вы сворачиваете VS Code и открываете окна других программ.

Включаем режим автосохранения и делаем так, чтобы файлы сохранялись ежесекундно

Горячие клавиши

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

1. Переходим в меню и открываем вкладку «Файл».
2. Выбираем команду «Новый файл».
3. Возвращаемся в меню и повторно открываем вкладку «Файл».
4. Находим команду «Сохранить как».
5. Пишем название файла, выбираем место хранение, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
6. Вручную прописываем скелет HTML-документа или тратим время, чтобы найти и скопировать структуру из интернета.

Мы превратили простую задачу в многоэтапный процесс, где нужно постоянно отрывать руки от клавиатуры, хвататься за мышку и искать нужные команды в выпадающем списке. Теперь посмотрим, как это же действие можно выполнить с помощью горячих клавиш. Для примера мы используем Mac OS — в других системах горячие клавиши будут немного отличаться, но сути это не меняет:

1. Command + N — создаём новый файл.
2. Shift + Command + S — включаем команду «Сохранить как».
3. Пишем название файла, выбираем место хранения, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
4. ! + tab — создаём структуру HTML-документа и можем работать.

С горячими клавишами мы сократили количество рутинных действий и быстро выполнили простую задачу — создали HTML-файл и написали структуру. В случае с объёмными проектами горячие клавиши помогают сэкономить часы работы.

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

Для просмотра всех горячих клавиш нажмите в боковой панели на шестерёнку и выберите раздел «Сочетания клавиш». Или воспользуйтесь горячими клавишами и нажмите Command + K + Command + S. Перед вами появится длинный список с названием команд и комбинацией кнопок, которые установлены по умолчанию — любую команду можно перепрограммировать или найти с помощью поисковика.

Что дальше

А дальше прочитайте нашу статью про Vim и подключите его к своему VSCode ��