Темы для visual studio: Visual Studio Code Themes

Как настроить оформление 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можно их перечислить через запятую, например так (здесь два элемента):

{
    "scope": "comment.block.documentation.phpdoc.php, comment.line.double-slash.php",
    "settings": {
        "foreground": "#7c7c7c",
    }
},

Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию.

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

После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента.

Здесь указывается текущее оформление. Строчка:

entity.name.function.php { "foreground": "#000000" }

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

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.

Таким вот нехитрым способом можно настроить Visual Studio Code под любые «капризы». 🙂

Другие записи сайта

5 расширений и тем для VS Code, которые способны изменить жизнь фронтенд-разработчика

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

SCSS IntelliSense

→ Страница SCSS IntelliSense

Создание переменных в SCSS — это просто и приятно. А как их запомнить? Вот с этим обычно возникают сложности.

Если вы похожи на меня, то у вас имеется файл _variables.scss, в котором имеются сотни значков доллара и имён переменных, пришедших вам в голову в три часа утра. Расширение SCSS IntelliSense даёт подсказки по именам переменных при работе над кодом проекта. И помнить эти имена во всех подробностях вам больше не нужно. Не нужно и рыться в файле с именами переменных для того, чтобы их вспомнить.

Вот как выглядит работа с расширением SCSS IntelliSense.

Расширение SCSS IntelliSense в действии

Auto Rename Tag

→ Страница Auto Rename Tag

Вне зависимости от того, каким фронтенд-фреймворком вы пользуетесь, написание HTML (или JSX) может оказаться утомительным занятием. Особенно — в ситуации, когда между открывающим и закрывающим тегами имеется что-то наподобие 50 строк некоего кода. Возможно, в ходе работы вам понадобилось поменять тег h3 на h4. Возможно, возникла необходимость в замене div на span. В любом случае, если решать подобные задачи без использования вспомогательных инструментов, они, в масштабных фрагментах кода, сводятся к непростому поиску закрывающих тегов.

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

Вот как работает Auto Rename Tag.

Работа с расширением Auto Rename Tag

Duplicate Action

→ Страница Duplicate Action

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

Собственно говоря, для того чтобы оснастить VS Code вышеописанной возможностью, достаточно установить расширение Duplicate Action. Когда оно включено, в распоряжении разработчика оказывается команда контекстного меню Duplicate file or directory.

Расширение Duplicate Action и изменения в контекстном меню файла

CodeStream

→ Страница CodeStream

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

Многим программистам не нравится покидать свою IDE. Но для того чтобы объяснять что-то коллегам, и чтобы самим задавать вопросы, приходится выходить из привычной среды и пользоваться Trello, Slack, Asana, Bitbucket, Microsoft Teams. CodeStream поддерживает массу инструментов и IDE, что позволяет работать с проблемами и вопросами, не покидая привычную среду редактора кода. Многие, занимаясь работой, стремятся попасть в так называемое «состояние потока». Выход из редактора обычно выводит человека из этого состояния. Благодаря CodeStream вопросы, касающиеся кода, можно решать, не покидая привычной среды.

Обсуждение кода в CodeStream

Night Owl

→ Страница Night Owl

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

Тема Night Owl

Бонус: тема Synthwave ‘84

→ Страница Synthwave ’84

Эта тема родом из вселенной киберпанка. Она хорошо сочетается с кожаным плащом, с Lamborghini Countach и с генератором дыма. Если вам всё это близко — включайте любимую Vaporwave-музыку и пишите свой прекрасный код до тех пор, пока ваше сознание не влилось в базу данных Нейроманта.

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

Тема Synthwave ‘84

Уважаемые читатели! Знаете какие-нибудь интересные расширения и темы для VS Code?

Создание своей темы для Visual Studio Code / Хабр

Visual Studio Code — новый редактор для разработчиков от компании Microsoft.

Конечно, на данный момент он уступает по количеству поддерживаемых функций широко распространённому Sublime Text, но при этом быстро «набирает обороты». Подтверждением тому является уже достаточно большой набор расширений в Visual Studio Marketplace.

В принципе, тем кто до этого пробовал редактор Sublime Text будет несложно найти много общего между этими продуктами как в визуальном оформлении, так и в наборе базовых возможностей.

В совсем свежей статье на Habrahabr автор указывает на то, что

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

Кроме готовых тем, можно создавать и свои, полностью отвечающие Вашим требованиям.

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

В редакторе можно поменять всё что угодно (шрифт, цвет, подсветку ключевых слов и т.п.). Есть готовые темы. Также можно создать свою на основе базовой, предлагаемой по умолчанию. После того, как новая тема готова, вам достаточно её сохранить на компьютер.

Установка своей темы в VS Code

1. Переходим в каталог %USER_PROFILE%\.vscode\extensions;
2. Создаём новый каталог с названием нашей темы;
3. Создаём в каталоге нашей темы файл package.json со следующим содержимым:

{        
    "name": "theme-name", //Имя темы
    "version": "0.0.1",
    "engines": {
        "vscode": ">=0.9.0-pre.1"
    },
    "publisher": "Your Name", //имя автора темы
   "contributes": {
        "themes": [
            {
                "label": "Theme label",
                "uiTheme": "vs-dark", // use "vs" to select the light UI theme
                "path": "./themes/YourTheme_Theme.tmTheme" //указываем путь к нашему файлу темы
            }
        ]
    }
}

4. Создаём каталог themes и кладём в него нашу новую тему.

Готово. Теперь в меню «File»-«Preferences»-«Color Theme» Вы можете выбрать и применить свою тему.

10 полезных плагинов Visual Studio Code / Блог компании Edison / Хабр

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

Если в качестве среды разработки вы используете Visual Studio Code, вам повезло. Вы можете установить кучу плагинов и облегчить себе жизнь по максимуму.

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

«Сперва мы меняем инструменты, а потом они меняют нас»

— Джефф Безос

Все плагины бесплатны и доступны на Visual Studio Marketplace.

Visual Studio Intellicode

Это самый часто скачиваемый плагин для Visual Studio (более 3 200 000 скачиваний). И, на мой взгляд, самый полезный.

Этот плагин создан, чтобы помогать разработчикам писать код. Он поддерживает огромное количество языков программирования. Visual Studio Intellicode использует методы машинного обучения. Он ищет и анализирует шаблоны, используемые в многочисленных проектах GitHub с открытым исходным кодом, и предлагает их вам, когда вы пишите код.

Статья переведена при поддержке компании EDISON Software, которая разрабатывает приложения и сайты, а также инвестирует в стартапы.

Git Blame

Кто это сделал?!

Время от времени вам нужно знать, кто написал определенный кусок кода. Git Blame вам в помощь. Git Blame сообщает вам, когда и кем редактировалась каждая строка файла в последний раз.

Это полезная информация, особенно когда вы работаете с ветвями функций. Так как Git Blame сообщает вам, в каком коммите (то есть в какой ветке) была изменена строка кода, вы знаете, какой тикет вызвал это изменение. Это поможет вам лучше понять причины изменений.

Prettier

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

Prettier совместим с JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL и другими современными инструментами и позволяет правильно форматировать код.

JavaScript (ES6) Code Snippets

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

The JavaScript (ES6) code snippets — удобный плагин, который предоставляет некоторые очень полезные фрагменты кода JavaScript для ленивого разработчика. Он связывает стандартные вызовы функций с горячими клавишами. Как только вы с этим разберетесь, ваша продуктивность увеличиться в разы.

Sass

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

Path Intellisense

Path Intellisense — верный способ увеличить вашу продуктивность во время написания кода. Если вы работаете над многими проектами одновременно и используете слишком много разных технологий, вам наверняка понадобится удобный инструмент, который сможет запомнить для вас имена путей файла. Этот плагин сэкономит вам кучу времени, которое в противном случае было бы потрачено впустую на поиск нужного каталога.
Path Intellisence задумывался как простое расширение для автозаполнения имен файлов. Но с тех пор он стал ценным помощником в наборе инструментов большинства разработчиков.

Debugger for Chrome

Необязательно уходить из Visual Studio Code, если нужно дебажить JavaScript. Debugger for Chrome, выпущенный Microsoft, позволяет отлаживать исходные файлы непосредственно в Visual Studio Code

ESLint

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

SVG Viewer

Расширение SVG Viewer добавляет ряд утилит для работы с SVG в Visual Studio Code. Этот плагин позволяет отображать файлы SVG и просматривать их внешний вид, не выходя из редактора. Кроме того, этот плагин позволяет конвертировать файлы в PNG и создавать URI схемы данных.

Themes

Темы — последние в списке, но не по значимости. Поскольку вы будете смотреть на свой редактор каждый день, почему бы не сделать его максимально красивым? Существует множество плагинов для настройки, которые меняют цветовую схему и значки на боковой панели. Некоторые популярные темы доступны бесплатно: One Monokai, One Dark Pro и Material Icon.

Перевод: Диана Шеремьева

Как переключить темы в Visual Studio 2012

Visual Studio 2012 предлагает две темы: светлую и темную. Я хочу переключить тему на Dark, но я не могу найти никаких меню или опций для этого.

я узнал способ импорта настроек из:

Microsoft Visual Studio 11.0\Common7\IDE\ FontsAndColorsThemesded0138-47ce-435e-84ef-9ec1f439b749.vssettings

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

что я должен сделать, чтобы переключить темы?

387

автор: Edward Thomson

10 ответов

в Visual Studio 2012 откройте диалоговое окно Параметры (инструменты ->опции). Под окружающая среда ->общие первый параметр-это «цветовая тема.- Ты можешь использовать это, чтобы переключаться между Светом и Тьмой.

тема оболочки отличается от темы редактора-вы можете использовать любые настройки шрифтов и цветов редактора с любой темой оболочки.

также цвета Редактор Тем расширение, которое можно использовать для создания новых тем.

712

автор: James McNellis

25

автор: Cihan Yakar

18

автор: Brian Chavez

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

1. переход к разделу реестра: HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\11.0_Config\Themes (или какая бы версия VS вы ни использовали)
2. экспорт ключа темы, которую вы хотите (это куча случайных букв / чисел) в a .рег файл.
3. затем скопируйте имя ключа» high contrast » (снова случайные буквы / цифры)
4. удалите клавишу высокой контрастности, а затем переименуйте темную тему в скопированное имя
5. затем импортируйте экспортированную тему из файла reg.

это навсегда устанавливает тему на тот, который вы выбрали.

8

автор: Eric Alan Solo

Синяя тема теперь поддерживается через Visual Studio update 2 и доступна как ответ, выбранный для этого вопроса.

Инструменты—> Параметры—>Общие—>Цветовая Тема

5

автор: user3430861

кроме того, можно использовать или создавать и совместно использовать цветовые схемы Visual Studio:
https://studiostyl.es/

это работает для меня !
Перейти к Tools->Options(Last Item)->Color theme Drop down и выберите any

1

автор: Praveen Kumar Rejeti

Расширения для семейства продуктов Visual Studio

перейти к содержанию

Visual Studio

| Торговая площадка

войти в систему

• Связаться с нами
• Вакансии
• Конфиденциальность
• Условия эксплуатации
• Товарные знаки

© Microsoft, 2020 г.

.

Расширения для семейства продуктов Visual Studio

перейти к содержанию

Visual Studio

| Торговая площадка

войти в систему

• Связаться с нами
• Вакансии
• Конфиденциальность
• Условия эксплуатации
• Товарные знаки

© Microsoft, 2020 г.

.

Расширения для семейства продуктов Visual Studio

перейти к содержанию

Visual Studio

| Торговая площадка

войти в систему

• Связаться с нами
• Вакансии
• Конфиденциальность
• Условия эксплуатации
• Товарные знаки

© Microsoft, 2020 г.

.