Как поменять тему в vs code

Изменение внешнего вида (темы) visual studio

В общем при гуглении различных тем для изменения внешнего вида IDE (пример ниже на фото, но это вроде Atom или Visual Code) в интернете можно найти только различные темы для Visual Studio Code. Знаю, что можно вручную устанавливать различные цвета для текста, но можно ли в VS менять разные темы (кроме светлой и темной) так же автоматически, как в VSCode или Atom и если да, то где их найти и как установить? P.S. Если не совсем понятно что за темы для VSCode то вот пример сайта с ними — vscodethemes.com

Отслеживать
задан 4 апр 2022 в 15:38
449 2 2 серебряных знака 14 14 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Нажмите на кнопку «Средства», потом «Параметры», потом выберите тему, которая Вам нравится.

Отслеживать
ответ дан 4 апр 2022 в 15:48
Alex_Programmer_WPF Alex_Programmer_WPF
1 2 2 бронзовых знака
.. можно ли в VS менять разные темы (кроме светлой и темной. ) .
4 апр 2022 в 16:02
Да. Там кроме темной и светлой темы есть синяя и синий (дополнительный контраст)
4 апр 2022 в 16:05
отредактировал вопрос чтобы было понятно
4 апр 2022 в 16:07

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Color Themes

Color themes let you modify the colors in Visual Studio Code’s user interface to suit your preferences and work environment.

Selecting the Color Theme

1. In VS Code, open the Color Theme picker with File >Preferences >Theme >Color Theme.
2. You can also use the keyboard shortcut ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T ) to display the picker.
3. Use the cursor keys to preview the colors of the theme.
4. Select the theme you want and press Enter .

The active color theme is stored in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+, ) ).

 // Specifies the color theme used in the workbench. "workbench.colorTheme": "Solarized Dark" 

Tip: By default, the theme is stored in your user settings and applies globally to all workspaces. You can also configure a workspace specific theme. To do so, set a theme in the Workspace settings.

Color Themes from the Marketplace

There are several out-of-the-box color themes in VS Code for you to try.

Many more themes have been uploaded to the VS Code Extension Marketplace by the community. If you find one you want to use, install it and restart VS Code and the new theme will be available.

You can search for themes in the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) search box using the @category:»themes» filter.

Auto switch based on OS color scheme

Windows and macOS support light and dark color schemes. There is a setting, window.autoDetectColorScheme , that instructs VS Code to listen to changes to the OS’s color scheme and switch to a matching theme accordingly.

To customize the themes that are used when a color scheme changes, you can set the preferred light, dark, and high contrast themes in the Settings editor:

• Workbench: Preferred Dark Color Theme — defaults to «Dark Modern»
• Workbench: Preferred Light Color Theme — defaults to «Light Modern»
• Workbench: Preferred High Contrast Color Theme — defaults to «Dark High Contrast»
• Workbench: Preferred High Contrast Light Color Theme — defaults to «Light High Contrast»

Customizing a Color Theme

Workbench colors

You can customize your active color theme with the workbench.colorCustomizations and editor.tokenColorCustomizations user settings.

To set the colors of VS Code UI elements such as list & trees (File Explorer, suggestions widget), diff editor, Activity Bar, notifications, scroll bar, split view, buttons, and more, use workbench.colorCustomizations .

You can use IntelliSense while setting workbench.colorCustomizations values or, for a list of all customizable colors, see the Theme Color Reference.

To customize a specific theme only, use the following syntax:

"workbench.colorCustomizations":  "[Monokai]":  "sideBar.background": "#347890"  > > 

If a customization applies to more than one themes, you can name multiple themes or use * as wildcard at the beginning and the end of the name:

"workbench.colorCustomizations":  "[Abyss][Red]":  "activityBar.background": "#ff0000"  >, "[Monokai*]":  "activityBar.background": "#ff0000"  > > 

Editor syntax highlighting

To tune the editor’s syntax highlighting colors, use editor.tokenColorCustomizations in your user settings settings.json file:

A pre-configured set of syntax tokens (‘comments’, ‘strings’, . ) is available for the most common constructs. If you want more, you can do so by directly specifying TextMate theme color rules:

Note: Directly configuring TextMate rules is an advanced skill as you need to understand on how TextMate grammars work. Go to the Color Theme guide for more information.

Again, to customize specific themes, you can do this in one of the following ways:

"editor.tokenColorCustomizations":  "[Monokai]":  "comments": "#229977"  >, "[*Dark*]":  "variables": "#229977"  >, "[Abyss][Red]":  "keywords": "#f00"  > > 

Editor semantic highlighting

Some languages (currently: TypeScript, JavaScript, Java) provide semantic tokens. Semantic tokens are based on the language service’s symbol understanding and are more accurate than the syntax tokens coming from the TextMate grammars that are driven by regular expressions. The semantic highlighting that is computed from the semantic tokens goes on top of syntax highlighting and can correct and enrich the highlighting as seen in the following example:

The «Tomorrow Night Blue» color theme without semantic highlighting:

The «Tomorrow Night Blue» color theme with semantic highlighting:

Notice the color differences based on language service symbol understanding:

• line 10: languageModes is colored as a parameter.
• line 11: Range and Position are colored as classes and document as a parameter.
• line 13: getFoldingRanges is colored as a function.

The settings editor.semanticHighlighting.enabled serves as the main control on whether semantic highlighting is applied. It can have values true , false , and configuredByTheme .

• true and false turn semantic highlighting on or off for all themes.
• configuredByTheme is the default and lets each theme control whether semantic highlighting is enabled or not. All the themes that ship with VS Code (for example, the «Dark+» default) have semantic highlighting enabled by default.

Users can override the theme setting by:

"editor.semanticTokenColorCustomizations":  "[Rouge]":  "enabled": true  > > 

When semantic highlighting is enabled and available for a language, it is up to the theme to configure whether and how semantic tokens are colored. Some semantic tokens are standardized and map to well-established TextMate scopes. If the theme has a coloring rule for these TextMate scopes, the semantic token will be rendered with that color, without the need for any additional coloring rules.

Additional styling rules can be configured by the user in editor.semanticTokenColorCustomizations» :

"editor.semanticTokenColorCustomizations":  "[Rouge]":  "enabled": true, "rules":  "*.declaration":  "bold": true >  >  > > 

To see what semantic tokens are computed and how they are styled, users can use the scope inspector (Developer: Inspect Editor Tokens and Scopes), which displays information for the text at the current cursor position.

If semantic tokens are available for the language at the given position and enabled by theme, the inspect tool shows a section semantic token type . The section shows the semantic token information (type and any number of modifiers) as well as the styling rules that apply.

More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.

Creating your own Color Theme

Creating and publishing a theme extension is easy. Customize your colors in your user settings then generate a theme definition file with the Developer: Generate Color Theme From Current Settings command.

VS Code’s Yeoman extension generator will help you generate the rest of the extension.

See the Create a new Color Theme topic in our Extension API section to learn more.

Remove default Color Themes

If you’d like to remove some of the default themes shipped with VS Code from the Color Theme picker, you can disable them from the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ). Click the Filter Extensions button from the top of the Extensions view, select the Built-in option, and you’ll see a THEMES section listing the default themes.

You can disable a built-in theme extension as you would any other VS Code extension with the Disable command on the gear context menu.

File Icon Themes

File icon themes can be contributed by extensions and selected by users as their favorite set of file icons. File icons are shown in the File Explorer and tabbed headings.

Selecting the File Icon Theme

1. In VS Code, open the File Icon Theme picker with File >Preferences >Theme >File Icon Theme.
2. You can also use the Preferences: File Icon Theme command from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).
3. Use the cursor keys to preview the icons of the theme.
4. Select the theme you want and hit Enter .

By default, the Seti file icon set is used and those are the icons you see in the File Explorer. Once a file icon theme is selected, the selected theme will be remembered and appear again whenever VS Code is restarted. You can disable file icons by selecting None.

VS code ships with two file icon themes; Minimal and Seti. To install more file icon themes, select the Install Additional File Icon Themes item in the file icon theme picker and you’ll see a query for file icon themes (tag:icon-theme) in the Extensions view.

You can also browse the VS Code Marketplace site directly to find available themes.

The active File Icon theme is persisted in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+, ) ).

 // Specifies the file icon theme used in the workbench. "workbench.iconTheme": "vs-seti" 

Creating your own File Icon Theme

You can create your own File Icon Theme from icons (preferably SVG), see the File Icon Theme topic in our Extension API section for details.

VS Code for the Web

VS Code for the Web provides a free, zero-install VS Code experience running entirely in your browser at https://vscode.dev.

You can share and experience color themes through VS Code for the Web through the URL schema: https://vscode.dev/theme/ .

For instance, you can go to https://vscode.dev/theme/sdras.night-owl to experience the Night Owl theme without having to go through the download and install process.

You can learn more about previewing and sharing themes with VS Code for the Web in its documentation.

Next steps

Themes are just one way to customize VS Code. If you’d like to learn more about VS Code customization and extensibility, try these topics:

• Settings — Learn how to configure VS Code to your preferences through user and workspace settings.
• Snippets — Add additional snippets to your favorite language.
• Extension API — Learn about other ways to extend VS Code.
• Color Theme — Color Theme extension API.
• File Icon Theme — File Icon Theme extension API.

Как настроить оформление Visual Studio Code

В Visual Studio Code (VSCode) темы оформления можно настроить несколькими способами. Самый простой — это установить уже готовый вариант. Поскольку выбор, действительно, очень большой, то можно подобрать наиболее привлекательный вариант. Второй способ — это воспользоваться он-лайн редактором тем, где можно самостоятельно настроить все цвета. И третий вариант — это используя уже готовую тему, внести необходимые коррективы в локальные настройки.

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

Готовые темы для Visual Studio Code

Здесь всё очень просто: все темы устанавливаются с официального сайта: Marketplace. На странице темы есть ссылка Install , нажав на которую, откроется сам VSCode, где и выбирается установка.

Для переключения установленных тем используются горячие клавиши Ctrl+K+T (нажать Ctrl, потом не отпуская, «K» и «T»). Дальше курсором выбираем любой вариант.

В Marketplace не очень удобно сделан предпросмотр тем, поэтому можно выбрать тему с других сайтов, например:

• orta.io/vscode-themes — здесь большие скриншоты всех тем на одной странице.
• vscodethemes.com — здесь темы уже сгруппированы на светлые и тёмные, а также доступен предпросмотр для HTML/JS/CSS-кода.

Создание своей темы для VSCode

При желании можно создать и свою тему. Для этого нужно воспользоваться он-лайн редактором TmTheme Editor. Вначале лучше выбрать из галереи какой-то подходящий вариант, после его отредактировать. После того, как настройки выполнены, нужно скачать файл (кнопка Download ). Это будет файл с расширением .tmTheme . После этого нужно создать расширение для этой темы. Идём в каталог c:\Users\ЮЗЕР\.vscode\extensions\ , где VSCode хранит все установленные расширения. Делаем там каталог «my.themу», в который размещаем файл package.json такого содержания:

< "name": "My theme", "version": "1.0.0", "engines": < "vscode": ">=0.9.0-pre.1" >, "publisher": "MAX", "contributes": < "themes": [ < "label": "MyTheme", "uiTheme": "vs", "path": "./themes/my.tmTheme" >] > >

Название, версию можно поменять на свою. Параметр path указывает на tmTheme-файл. Его мы скачали с TmTheme Editor — нужно его переименовать в my.tmTheme . Делаем подкаталог themes и кидаем в него этот файл. Параметр uiTheme указывает на базовый UI — в данном примере «vs» означает светлую тему. Если вы используется темную, то нужно указать «vs-dark». После этого в Visual Studio Code переключаемся на вкладку расширений и включаем его. Если вы решите изменить какой-то цвет в TmTheme Editor, то скачиваете новый файл и заменяете им my.tmTheme . Чтобы изменения вступили в силу, можно выключить расширение и опять его включить.

Свои настройки оформления Visual Studio Code

Лично я предпочитаю светлые темы оформления, хотя тёмные выглядят красивей, поскольку цвет на темном фоне лучше различим. Для меня проблема в том, что приходится постоянно переключаться с редактора на сайт в браузере и мельтешение «тёмное-светлое» довольно сильно раздражает. Поэтому, чтобы не насиловать глаза, я использую светлое оформление. У готовых светлых тем существенный недостаток — низкий контраст цветов на белом фоне. Из-за этого подобрать нормальный цвет не такое простое занятие. Например многие используют светло-серый цвет текста: выгладит красиво, но для зрения получается слишком малый контраст. Другие, наоборот, ставят насыщенные цвета: синий, красный — для нас они несут ещё и смысловой оттенок, поэтому их нужно подбирать с умом. В общем, если вы такой же капризный как я, 🙂 то самым лучшим способом будет собственная настройка оформления VSCode. И делается это, на самом деле, достаточно просто.

Общий принцип

Все настройки хранятся как обычно в settings.json . Visual Studio Code разделяет оформление самого редактора от цветовой схемы подсветки кода. Сам редактор настраивается в очень широких пределах — изменить можно буквально каждый элемент дизайна. В settings.json нужно сделать секцию workbench.colorCustomizations , в которой указываются изменяемые параметры. Это «глобальное оформление», которое перекроет оформление любой темы.

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

Оформление самого редактора

Я использую стандартную тему оформления Visual Studio Light и секция workbench.colorCustomizations у меня такая:

. "workbench.colorCustomizations": < "foreground": "#000000", "editor.lineHighlightBackground": "#F0F05D70" >, .

Параметр foreground задаёт базовый черный цвет текста. Второй параметр задает полупрозрачный желтый цвет для подсветки текущей линии. Параметров очень много: все они описаны в официальной документации Theme Color. После сохранения settings.json изменения сразу же вступают в силу.

«Подводные камни»

Некоторые расширения могут перекрывать ваши настройки. Я столкнулся с тем, что например расширение Git (сейчас это стандартное расширение, доступное в общих настройках), изменяет цвет списка файлов. То есть я указываю цвет #000000, но он принудительно меняет их на малоконтрастный серый. В данном случае Git нашёл существующий репозиторий и решил, что изменения не заcommit’чены. Настройки оформления для Git’а другие (они есть в документации). Поэтому, если какой-то параметр вдруг не работает, то возможно его перебивает какое-то расширение. Если расширение не нужно, то его можно просто отключить (enable).

Подсветка кода в VSCode

Теперь самое интересное. Для изменения подсветки кода, используется секция editor.tokenColorCustomizations . В ней указывается тема оформления, для которой нужно внести изменения. То есть настройки применятся только, если будет выбрана эта тема. Покажу на примере:

. "editor.tokenColorCustomizations": < "[Visual Studio Light]": < "textMateRules": [ < "scope": "entity.name.function.php", "settings": < "foreground": "#000000", "fontStyle": "italic underline" >>, < "scope": "variable.other.php", "settings": < "foreground": "#0000BB", >>, ], >, >, .

Здесь выбрана тема «Visual Studio Light». Секция textMateRules как раз и содержит оформление для каждого элемента, который задаётся в параметре scope . Само же оформление задается в параметре settings . Если оформление для разных элементов одно и тоже, то в scope можно их перечислить через запятую, например так (здесь два элемента):

Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию. Для начала загрузите любой файл, например PHP (как в моих примерах). После этого нажмите F1 (открется панель команд) и в неё наберите Developer: Inspect TM Scopes и после нажмите Enter . После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента. Здесь указывается текущее оформление. Строчка:

entity.name.function.php
показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:

entity.name.function.php meta.function-call.php source.php meta.embedded.block.php text.html.php

Верхние элементы имеют более высокий приоритет. В данном примере сработал entity.name.function.php, но в коде могут встречаться и другие, например source.php. Если нужно изменить элемент, достаточно скопировать его из этой информации и вставить в settings.json . После сохранения файла, изменения будут сразу же видны в коде.

Подсказка. Удобно разделить окна редактора VSCode, чтобы в одном был исходный php-код, а в другом settings.json .

Форматирование кода с помощью Prettier в Visual Studio Code

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

В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.

Для демонстрации мы будем форматировать следующий код:

const name = "James"; const person =first: name > console.log(person); const sayHelloLinting = (fName) =>  console.log(`Hello linting, $fName>`) > sayHelloLinting('James'); 

Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:

• Смесь одинарных и двойных кавычек.
• Первое свойство объекта person должно находиться в отдельной строке.
• Выражение консоли внутри функции должно быть выделено отступами.
• Вам могут понравиться или не понравиться необязательные скобки, в которые заключен параметр функции arrow.

Предварительные требования

Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.

Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier — Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:

Шаг 1 — Использование команды форматирования документа

После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.

Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.

Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:

Затем выберите Prettier — Code Formatter.

Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default Formatter значение esbenp.prettier-vscode .

Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:

const name = 'James'; const person =  first: name >; console.log(person); const sayHelloLinting = (fname) =>  console.log(`Hello linting, $fName>`); > sayHelloLinting('James'); 

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

body color: red; > h1  color: purple; font-size: 24px > 

Будет переформатирован как:

body  color: red; > h1  color: purple; font-size: 24px; > 

Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.

Шаг 2 — Форматирование кода при сохранении

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

Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:

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

Шаг 3 — Изменение параметров конфигурации Prettier

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

Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:

Вот несколько наиболее распространенных параметров:

• Single Quote — выберите, нужно ли использовать одинарные или двойные кавычки.
• Semi — выберите, нужно ли добавлять точку с запятой в конце строк.
• Tab Width — укажите, сколько пробелов должно вставляться при табуляции.

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

Шаг 4 — Создание файла конфигурации Prettier

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

Создайте новый файл .prettierrc. extension с одним из следующих расширений:

Вот пример простого файла конфигурации в формате JSON:

 "trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true > 

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

Заключение

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

Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.