лучшие цветовые темы visual studio code

20 лучших тем Visual Studio Code, которые вы должны использовать

Visual Studio Code от Microsoft, возможно, является одним из лучших редакторов кода. Благодаря обширной коллекции расширений, поддерживаемых сообществом, вы можете использовать VS Code для удовлетворения почти всех ваших потребностей в программировании.

Приложение доступно в Windows, macOS и Linux, что делает его идеальной программой для написания кода независимо от операционной системы. Одним из ключевых аспектов VS Code является его настраиваемость и надежные возможности создания тем.

Мы связали все темы, представленные в этой статье. Все, что вам нужно сделать, это кликнуть ссылки, чтобы посетить Visual Studio Marketplace, и нажать кнопку «Установить».

Вы также можете искать эти темы в разделе «Расширения» VS Code.

1. Ariake Dark

Ariake Dark — это тема VS Code, вдохновленная традиционными цветами Японии. Излишне говорить, что его внешний вид приятен визуально.

Скачать Темная тема Ariake

2. Pink pine

Вы получаете две дополнительные темы, а именно Rosé Pine Dawn и Rosé Pine Moon, с разными цветами фона, сохраняя при этом верную цветовую схему.

3. Celestial

Celestial — это более мрачная версия другой популярной темы VS Code, Horizon. Хотя Horizon — отличная тема сама по себе, Celestial предлагает более темный цвет фона, который я предпочитаю.

Хотя Celestial — мой личный фаворит в этом списке, он может быть приобретенным вкусом, если вы не часто используете и не цените действительно темные темы.

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

4. В постели до 19:00.

В постели к 19:00 — это тема от создателя широко используемой темы VS Code Night Owl (добавлена ​​на седьмую позицию в этом списке).

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

Скачать В постели по теме 19:00

Примечание: есть проблемы со сном? Ознакомьтесь с нашими любимыми приложениями ASMR, которые помогут вам заснуть.

5. ReUI

Если вы ищете тему VS Code, скорее всего, вы хотя бы раз посетили официальный сайт React JS. Если вам нравится цветовая палитра, используемая во фрагментах кода веб-сайта React, тема ReUI переносит ее в VS Code. В результате получилась эстетическая тема с приятными для глаз цветами.

6. Горизонт

Как упоминалось ранее, Horizon — это основа Небесной темы. Horizon — это теплая тема с богатой цветовой палитрой, которая выделяется из общей массы.

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

7. Night Owl

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

8. Andromeda

Andromeda — это тема с яркими цветами и темным фоном. Разработчик также создал вариант этой темы с выделенными курсивом ключевыми словами, которые хорошо сочетаются со шрифтами, включая Operator Mono и Catograph Mono. Также есть вариант с рамкой, если вам нравится различать несколько вкладок.

9. Nord

Тема Nord VS Code основана на цветовой палитре Nord от Arctic Ice Studio, вдохновленной красотой Арктики.

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

Если вам нравятся минимальные настройки, вам, вероятно, понравится эта тема. Однако при ярком освещении он может выглядеть слишком бледным.

10. Tokyo Night

Как следует из названия, Tokyo Night — это тема, посвященная красивым ночным огням в центре Токио. Он намеренно устанавливает низкую контрастность многих элементов пользовательского интерфейса, чтобы не отвлекать программистов.

Тема поставляется в комплекте с двумя дополнительными вариантами, а именно Tokyo Night Light и Tokyo Night Storm. В листинге темы разработчик рекомендует отключить выделение семантического синтаксиса в настройках для достижения наилучших результатов.

Существуют также конфигурации для отключения курсива, увеличения яркости текста Codelens и настройки активных и неактивных границ.

11. Mayukai Mirage

Mayukai Mirage черпает вдохновение из нескольких других тем VS Code, включая тему Ayu, тему Material, Monokai, Andromeda и Gruvbox Darktooth.

По словам создателя, эта тема идеально подходит для дневной работы над программированием. Существует семь различных вариантов Mayukai, включая Mirage, Semantic Mirage, Dark, Mirage Gruvbox Darktooth, Mono, Alucard и Sunset.

Скачать Тема Mayukai Mirage

12. One Dark Pro

До того, как VS Code стал массовым, редактор кода Atom был предпочтительным выбором многих разработчиков, и нельзя отрицать, что тема Atom One Dark выглядит великолепно.

Если вам не хватает одной темной темы Atom, то One Dark Pro — это то, что вам нужно установить на VS Code. Создатели этой темы также включили в список фрагменты, которые помогут вам настроить цвета и добавить курсив в пользовательский интерфейс.

13. LaserWave

LaserWave — это тема, вдохновленная синтвейвом 80-х, с теплым ретро-дизайном. В настоящее время он поддерживает Python, React JS, Angular, Ruby, Markdown, Java, C # и Dart.

Если вы ищете тему, которая не является темной и хорошо сочетается с вашим плейлистом lo-fi, вы не ошибетесь с LaserWave. У него уникальное ощущение, и оно вам обязательно понравится.

14. Даркула

Даркула (не путать с популярным Дракула Официальный) переносит знакомую тему Darcula, которую можно увидеть в IDE Jetbrains и Android Studio, в VS Code.

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

Вы можете использовать эту тему для унифицированного взаимодействия, если используете предложения IDE Jetbrains.

15. Огни большого города

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

Пока вы пробуете эту тему, убедитесь, что вы не пропустите пакет значков City Lights с более чем 60 значками типов файлов. Он также доступен для других популярных редакторов кода, таких как Sublime Text и Atom.

Скачать Тема «Огни большого города»

16. Quiet Light

Quiet Light — это официальный порт темы Quiet Light, созданный сначала для текстового редактора Espresso на Mac. Хотя VS Code поставляется с темой Quiet Light, эта версия настолько хороша, насколько и может быть, поскольку была разработана первоначальным дизайнером.

Тема поддерживает HTML / CSS / LESS / SCSS, JavaScript, PHP, Python, Markdown и другие. Если вам нравится тема Quiet Light по умолчанию, скорее всего, она вам понравится.

Скачать Тихая светлая тема

17. Тема GitHub

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

18. Light Pro

Brackets Light Pro переносит светлую тему редактора кода Adobe Brackets в VS Code. Если вы переходите на VS Code из Brackets, поскольку Adobe готова прекратить поддержку Brackets с 1 сентября 2021 года, вам понравится использовать тему Brackets Light Pro.

Рекомендуемые шрифты и значки для этой темы — Fantasque Sans Mono и VSCode Great Icons.

Скачать Brackets Light Pro Тема

19. Aofuji Light

Aofuji Light — это минималистичная тема для VS Code. Эта тема относительно новая, и подсветка синтаксиса была протестирована с файлами HTML, JavaScript, CSS и Markdown.

Если вы предпочитаете светлые темы, вы можете попробовать Aofuji Light, чтобы убедиться, что он идеально вписывается в ваш рабочий процесс.

Скачать Светлая тема Aofuji

20. Bluloco Light

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

Скачать Тема Bluloco Light

Это наш выбор из лучших тем Visual Studio Code. Мы надеемся, что эта статья поможет вам выбрать новую тему и придаст общий вид вашей настройке кодирования.

Итак, какая из этих тем Visual Studio Code вам нравится больше всего? Дайте нам знать в комментариях ниже. Кроме того, если вы используете тему, которую мы не упомянули, но которая должна быть в списке, не стесняйтесь поделиться ею с другими в комментариях.

Источник

Самые полезные плагины и красивейшие темы для VS Code

Visual Studio Code от Microsoft является очень легким, но при этом достаточно мощным и удобным инструментом для редактирования кода. Несмотря на его обширный встроенный функционал, он легко дополняется как сторонними, так и официальными плагинами.

Встречайте – подборка лучших плагинов, а также красивых и лаконичных тем оформления для VS Code!

Live Server

Пожалуй, самый полезный плагин для верстальщиков. Открывает в соседнем с вашим кодом окне вкладку в браузере, которая будет в реальном времени демонстрировать отображение вашего сайта, автоматически при этом обновляясь. Надоело переключаться между окнами редактора кода и браузера? Устали постоянно обновлять страничку браузера? Тогда этот плагин просто создан для вас!

Polacode

Данный плагин подойдет тем, кто любит красиво оформлять свои репозитории в GitHub’е (либо делать красивые скриншоты кода, чтобы отсылать его потом друзьям). Всего в пару кликов вы можете поместить выделенный участок кода в красиво оформленную рамочку в стиле скриншотов с macOS, а также настроить эту рамочку и сохранить получившийся результат картинкой. Кстати, если у вас стоит какая-нибудь тема, то данный плагин сохранит цвет фона и подсветку синтаксиса для участка кода на самом скриншоте. Одним словом – очень полезный плагин.

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

Prettier

Форматирование кода. Если данное словосочетание рождает в вашей голове ужасные ассоциации и гневные воспоминания, то данный плагин, скорее всего, станет для вас находкой даже похлеще, чем Америка для Христофора Колумба. Очень рекомендуется для использования в работе с коллегами, чтобы на споры по поводу стиля кода уходило намного меньше времени (его можно потратить на более полезные занятия).

Всего-то и нужно, что установить сам плагин. Вуаля – можете писать код, как вам заблагорассудится, а Prettier отбросит вопрос форматирования кода в дальний ящик, сделав все за вас по своему код-стайлу.

Quokka.js

Устали при написании кода каждый раз запускать его, чтобы проверить работоспособность какого-то участка? Данный плагин решит вашу проблему, ведь он отображает результат выполнения кода прямо в самом редакторе кода. Удобно ведь, да? А сколько времени экономит, убирая нужду в постоянном запуске кода после каждой правки!

Скачать плагин можно на этой странице.

Rest client

При работе с различными API, чтобы не тыкать пальцем в небо, вы, наверное, используете различные сторонние программы для отправки HTTP-запросов, вроде Postman, да? Забудьте про все это, ведь данный плагин позволяет вам отправлять HTTP-запросы и просматривать ответы на них прямо в окне VS Code, отбрасывая нужду в переключении между окнами и задействовании иных программ, кроме самого редактора.

Auto Rename Tag

И снова полезный плагин для верстальщиков. При редактировании HTML/XML-тегов в начале он автоматически редактирует их и в конце. Простой плагин, но как сильно сокращает количество рутинных действий в работе. Как говорится, мелочь, а приятно!

TODO Highlight

Очень любите помечать участки кода тегами TODO и FIXME, но затем забываете о том, что нужно что-то починить или переделать? Данный плагин решит вашу проблему и будет выделять в коде фразы TODO или FIXME. А если таковыми вы ничего не помечаете, то вам не составит труда вставить туда и свои любимые теги, плагин будет и их выделять.

Страница в магазине расширений VS Code.

Faker

Предположим, у вас есть участок кода, который работает с данными из базы данных, но вам нужны просто случайно сгенерированные данные, а не взятые из БД. На помощь вам придет Faker, а точнее, сделанный на его основе плагин для VS Code. Достаточно при заполнении полей лишь вызвать соответствующую категорию данных – в нужное поле впишется случайно сгенерированное значение. Категории бывают разные, начиная с имен и заканчивая ссылкой на случайное фото.

Ознакомиться с возможностями инструмента можно на данной странице.

Bookmarks

Данный плагин упрощает перемещение в огромном пространстве кода, оставляя «книжные » закладки на определенных строчках. В общем, название плагина говорит само за себя.

Image Preview

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

Бонус: лучшие темы для Visual Studio Code

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

На этом мой топ подходит к концу. Надеюсь, что разработка в Visual Studio Code теперь будет приносить вам намного больше удовольствия. Удачи!

Источник

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

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

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.

Customizing a Color Theme

Workbench colors

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

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:

Editor syntax highlighting

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

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 a specific theme only, use the following syntax:

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:

Users can override the theme setting by:

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» :

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.

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

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

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+, ) ).

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.

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:

Источник

10 Best Visual Studio Code Themes from Light to Dark

Visual Studio Code is Microsoft’s source code editor that comes with support for multiple programming languages. It’s open-source, free, and cross-platform, so you can use it in all major operating systems. The biggest appeal of Visual Studio Code is versatility. With the help of built-in settings, plugins, and themes, you can customize any aspect of your code editor, from design to functionality.

Why Choose a Custom Visual Studio Code Theme?

Custom VS Code themes let you give a completely unique look and feel to your editor. This might not seem that important first, but working in a pleasant environment can significantly increase productivity. If you are coding in more than one programming languages you can also use a different theme for each, so it will be easier to switch your brain between the languages.

Light conditions also matter when choosing a code editor theme. Themes with a light background are typically recommended for daylight use, while dark themes are easier to view at night or in dark conditions.

Where to Find VS Code Themes?

Visual Studio Code has two kinds of themes: color themes and file icon themes. The editor comes with the following default themes that you don’t have to install and work out of the box:

You can find the themes by clicking the File > Preferences > Color Theme and File > Preferences > File Icon Theme options in the top menu bar. If you are happy with the default themes, you need not go further, just select one from the drop-down menu and you are good to go.

File > Preferences > Color Theme

If you want a more unique solution, you need to install it as a Visual Studio Code extension. You can search for extensions right from the editor by opening the Extensions bar in one of the following ways:

Typing the “color theme” query into the search bar will return the available color themes you can install with a single click.

The themes you can find in the Extensions bar are pulled from the Visual Studio Code Marketplace. If it’s easier for you to check out the themes in your web browser, you can also go right to the marketplace. To get the most relevant results, set the search category to Themes.

If you want to browse only pre-selected themes, you can also use collections such as VSCodeThemes or our own hand-picked list below.

The Best Visual Studio Code Themes

Now, let’s see the best Visual Studio Code themes we liked the most in the marketplace.

Winter is Coming Light

Winter is Coming is a collection of five Visual Studio Code color themes: Light, Dark Blue, Dark Black, Dark Blue No Italics, and Dark Black No Italics. As the five themes come as one package, you need to install all, even if you just want to use one of them. Winter is Coming Light adds highly visible fonts to a light background that are perfect for daylight conditions.

Material Light

Material Light is an excellent choice if you are a fan of material design. For a full material look, you can use it together with the popular Material Icon Theme that changes the default file icons to material icons within the entire editor interface.

Bluloco Light

Bluloco Light is a carefully designed light color theme. The author put real research into this theme, as he took the rules of syntax scopes, color contrast, and readability into consideration. With Bluloco Light, you can be sure that the colors weren’t just randomly picked from the color wheel. If you want to use the same meticulous design in dark colors, you can give a go to Bluloco Dark, too.

Snazzy Light

Snazzy Light is a light color theme that comes with clear and bright colors. It’s part of the Snazzy theme family together with Snazzy Operator, Snazzy Plus, and others. Snazzy Light makes use of the syntax highlighting samples created by the author of the Bluloco Light theme (see above). Due to its distinct colors and light background, its author recommends Snazzy Light for “bright ambient light conditions”, for instance, “for train commute with intense sunlight”.

Noctis Lux

Noctis is a Visual Studio Code theme family that includes 8 dark and 3 light color themes. According to the theme’s description, it was designed to “be easy on the eyes thus reducing the eye strain”. Noctis Lux is one of the light themes of the family. It has a very light warm orange background, so it can be a great choice if you are looking for a light theme that is darker than white.

Sandstorm

Sandstorm is a darkish VS Code color theme that neither is based on the black and grey colors nor has the blue-y tint typical of dark UI themes. It comes in two versions: Classic and Darker. Although you might not want to use Sandstorm at daylight, its sunset colors make it ideal for late-night coding.

Shades of Purple

Shades of Purple is an elegant purple-based color theme that uses the variants of yellow, green, and orange for syntax highlighting. All colors used in this theme have been hand-picked by the author. With almost 1.5 million downloads and all five-star ratings, Shades of Purple is currently one of the most popular Visual Studio Code color themes in the marketplace.

Night Owl

Night Owl is a Visual Studio Code theme that was created with “night owls” specifically in mind. If you frequently work at night you will love this theme. The author didn’t only pay attention to optimizing the theme for low-light circumstances but also made it accessible to people with colorblindness. The theme package includes Night Owl Light, too, that applies the same design principles to daylight conditions.

Dracula Official

Dracula Official is the Visual Studio Code variant of the Dracula theme implemented for many different code editors such as Vim, Xcode, Sublime Text, Atom, and Notepad++. With its dark and distinct colors, Dracula is a great choice for anyone who cannot stand the light. If Dracula Official is too scary for you, you can use the subtler Dracula Soft which is also included in the theme package.

One Dark Pro

One Dark Pro is the VS Code version of Atom’s default One Dark UI theme. If you have recently moved from Atom to Visual Studio Code and still missing the interface, One Dark Pro can give you back Atom’s look and feel. It comes in three versions: Classic, Bold, and Vivid, so you can easily find the one that best fits with your preferences.

Next Steps

Even though you can choose from multitudes of Visual Studio Code themes, it can still happen you don’t find the one you are looking for. But, as VS Code is a fully customizable editor, you can also create your own theme or customize an existing one.

If you want to know more about how VS Code stacks up to other code editors, check out our article about the five best cross-platform code editors, too. And, if you’d rather use Atom, also have a look at our collection of the best Atom themes.

Источник