Темы для 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Theme: Overlay by Kaira Extra Text
Cape Town, South Africa