Visual studio code цветовая схема
Все о темах для "Visual Studio Code"
Как сменить тему на "Visual Studio Code"?
Когда люди пишут инструкции - они такие скучные и непонятные, в которых еще нужно и разбираться! У нас все просто!
Открываем программу VS Code.
Идем - файл - параметры - цветовая тема:
В новом окне выбираем тему. список тем слева, просто кликайте оп названию темы - она установится автоматически. справа строка прокрутки.
Если тем не хватило, то можно перейти по ссылке внизу ссылки.
Горячие клавиши сменить тему на "Visual Studio Code"?
Для быстрого доступа к новым темам и смены тем в "Visual Studio Code" есть горячие клавиши.Не буду повторять тот путь, что уже выше проделывали.
Быстрая смена тем на "Visual Studio Code"
Быстрая смена тем на "Visual Studio Code" происходит по нажатию клавиш "ctrl + K ctrl + T"ctrl + K ctrl + T Как нажимать!?
Зажали клавишу ctrl(не отпускаем. ) - далее K и далее T
Как поставить светлую тему "Visual Studio Code"?
Как мы уже выше выяснили, быстрый доступ к темам. нажимаем:
Как поставить темную тему "Visual Studio Code"?
Если вам нужно поставить темную тему в "Visual Studio Code", то проделываем аналогичные действия.ctrl + K ctrl + T
И далее выбираем темную тему
Загрузить сторонние темы "Visual Studio Code"?
Если вам вдруг. не хватило перечисленных тем, то можно загрузить сторонние темы.
ctrl + K ctrl + T
Установить дополнительные цветовые темы.
Загрузить сторонние темы ‘Visual Studio Code‘?
Слева открываем строку поиска нажав по кнопке "extensions"(ctrl + shift + X)
В строке вводим:
Выбор сторонне темы "Visual Studio Code"?
И в двух случаях попадаем в одно и то же место:
Я пытался я прокрутить до самого низа. когда кончится список сторонних тем . но у меня не получилось - может у вас получится!?
В Visual Studio Code (VSCode) темы оформления можно настроить несколькими способами. Самый простой — это установить уже готовый вариант. Поскольку выбор, действительно, очень большой, то можно подобрать наиболее привлекательный вариант. Второй способ — это воспользоваться он-лайн редактором тем, где можно самостоятельно настроить все цвета. И третий вариант — это используя уже готовую тему, внести необходимые коррективы в локальные настройки.
Прежде, чем рассмотреть все эти варианты, я отмечу, что VSCode может хранить настройки не только глобально для всего редактора, но и локально: для выбранной папки или для рабочей области. Однажды я установил какое-то расширение, которое поменяло цвет оформления на болотно-грязный, и потом полдня потратил на то, как его отключить. Оказалось, что цвет прописался в конфигурации папки. :-)
Готовые темы для Visual Studio Code
Здесь всё очень просто: все темы устанавливаются с официального сайта: Marketplace. На странице темы есть ссылка Install , нажав на которую, откроется сам VSCode, где и выбирается установка.
Для переключения установленных тем используются горячие клавиши Ctrl+K+T (нажать Ctrl, потом не отпуская, «K» и «T»). Дальше курсором выбираем любой вариант.
В Marketplace не очень удобно сделан предпросмотр тем, поэтому можно выбрать тему с других сайтов, например:
-
— здесь большие скриншоты всех тем на одной странице. — здесь темы уже сгруппированы на светлые и тёмные, а также доступен предпросмотр для HTML/JS/CSS-кода.
Если тема не понравилась, то её можно удалить во включенных расширениях. Готовые темы удобны тем, что это самый быстрый и простой способ установки — буквально в пару кликов.
Создание своей темы для VSCode
При желании можно создать и свою тему. Для этого нужно воспользоваться он-лайн редактором TmTheme Editor. Вначале лучше выбрать из галереи какой-то подходящий вариант, после его отредактировать. После того, как настройки выполнены, нужно скачать файл (кнопка Download ). Это будет файл с расширением .tmTheme .
После этого нужно создать расширение для этой темы. Идём в каталог c:\Users\ЮЗЕР\.vscode\extensions\ , где VSCode хранит все установленные расширения. Делаем там каталог «my.themу», в который размещаем файл package.json такого содержания:
Название, версию можно поменять на свою. Параметр 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 у меня такая:
Параметр foreground задаёт базовый черный цвет текста. Второй параметр задает полупрозрачный желтый цвет для подсветки текущей линии. Параметров очень много: все они описаны в официальной документации Theme Color.
После сохранения settings.json изменения сразу же вступают в силу.
«Подводные камни»
Если расширение не нужно, то его можно просто отключить (enable).
Подсветка кода в VSCode
Теперь самое интересное. Для изменения подсветки кода, используется секция editor.tokenColorCustomizations . В ней указывается тема оформления, для которой нужно внести изменения. То есть настройки применятся только, если будет выбрана эта тема.
Покажу на примере:
Здесь выбрана тема «Visual Studio Light». Секция textMateRules как раз и содержит оформление для каждого элемента, который задаётся в параметре scope . Само же оформление задается в параметре settings .
Если оформление для разных элементов одно и тоже, то в scope можно их перечислить через запятую, например так (здесь два элемента):
Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию.
Для начала загрузите любой файл, например PHP (как в моих примерах). После этого нажмите F1 (открется панель команд) и в неё наберите Developer: Inspect TM Scopes и после нажмите Enter .
После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента.
Здесь указывается текущее оформление. Строчка:
показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:
Верхние элементы имеют более высокий приоритет. В данном примере сработал entity.name.function.php, но в коде могут встречаться и другие, например source.php.
Если нужно изменить элемент, достаточно скопировать его из этой информации и вставить в settings.json . После сохранения файла, изменения будут сразу же видны в коде.
Подсказка. Удобно разделить окна редактора VSCode, чтобы в одном был исходный php-код, а в другом settings.json .
Таким вот нехитрым способом можно настроить Visual Studio Code под любые «капризы». :-)
Да, я наконец распробовал эту IDE, хотя изначально предвзято к ней относился из-за ассоциаций с MS и их студией. Но здесь так много про нее говорилось, что я таки решил попробовать и не разочаровался. Она реально классная - быстрая, шустрая, в меру красивая (хотя это и не важно для среды разработки, но все же, если приятно работать, то это плюс) и как-то к себе располагает.
И возник вопрос - кто какую тему оформления использует? Я долго тыкал все, что онf предлагает в дополнительных и остановился на Sublime Material Theme: Dark, они единственная показалась мне мягкой и не вырвиглазной, в отличие от остальных, что он мне предлагал. Из светлых тем от все[ вообще резало глаза (до сих пор считаю идеальной светлой темой аналогичную Delphi 7, но найти такую нигде не получается, а самому пилить лень). Красные и синие вообще смотреть не стал =)
Собственно, сабж. Вдруг я в куче предложений пропустил что-то более достойное?
хотя изначально предвзято к ней относился из-за ассоциаций с MS и их студией
Последнее исправление: K50 01.05.20 14:07:03 (всего исправлений: 1)
Да просто по ощущениям показалась быстрее идеи.
А оно сможет открыть проект, собирающийся фвтолулзами или самопальным мэйком?
Идея же на джава, емнип?
Тогда правдиво звучит
Последний год использую SynthWave’84, правда без glow эфекта
Это же не IDE. После Idea одно удовольствие от работы. А тема какая-то темная из стандартных.
Gruvbox ван лав.
Студия с решарпером это лучшая IDE.
Студия с решарпером - супер тормоз. Я подозреваю, что все истории про тормоза VS имеют корни в решарпере. А по фичам с каждой новой версией начиная с 2015 решарпер нужен все меньше и меньше
Только формально это не IDE, и после студии это ой как заметно. Особенно по части интерфейса и его (отсутствующей) настраиваемости - ограничения платформы, ничего не поделать.
Midael ★★★★★ ( 01.05.20 14:27:32 )Последнее исправление: Midael 01.05.20 14:29:13 (всего исправлений: 1)
После Idea одно удовольствие от работы.
Так оно ничего не умеет по сравнению с IDEA.
Ну то отдельный разговор. Зато скорость работы небо и земля.
У меня дефолтная белая, я только иконки сторонние добавил.
Хз почему, но я не могу прогать в тёмном гуе. При этом в тёмной консоли вообще без проблем тучу времени провожу, да и код там же пишу иногда.
Посмотрел. Понравилось. Может, даже возьму на вооружение.
Я вот перешёл на VSCode с Atom’а: после нескольких лет работы с атомом, который с каждым обновлением тормозил всё больше и больше - VSCode показался чем-то прорывным.
Ну и ещё бесит, что VSCode без онлайна и плагинов по-сути бесполезен. Жаль что таких-же удобных альтернатив нет. Эх, если-бы VIM и его разновидности и плагины не тормозили и не глючили на моих задачах, пользовался-бы им.
DawnCaster ★★ ( 01.05.20 14:48:00 )Последнее исправление: DawnCaster 01.05.20 14:54:11 (всего исправлений: 4)
Дефолт тёмная схема то, что нужно.
grim ★★★☆ ( 01.05.20 19:06:42 )Последнее исправление: grim 01.05.20 19:06:55 (всего исправлений: 1)
Свою тему оформления портировать на VSCode не стал, а нашёл похожую с цветами от Tango - Tomorrow
Если не хочешь связываться с телеметрией от MS, то можно использовать свободную сборку VSCode - VSCodium
Visual Studio Code от Microsoft является очень легким, но при этом достаточно мощным и удобным инструментом для редактирования кода. Несмотря на его обширный встроенный функционал, он легко дополняется как сторонними, так и официальными плагинами.
Встречайте – подборка лучших плагинов, а также красивых и лаконичных тем оформления для VS Code!
Live Server
Пожалуй, самый полезный плагин для верстальщиков. Открывает в соседнем с вашим кодом окне вкладку в браузере, которая будет в реальном времени демонстрировать отображение вашего сайта, автоматически при этом обновляясь. Надоело переключаться между окнами редактора кода и браузера? Устали постоянно обновлять страничку браузера? Тогда этот плагин просто создан для вас!
Polacode
Данный плагин подойдет тем, кто любит красиво оформлять свои репозитории в GitHub’е (либо делать красивые скриншоты кода, чтобы отсылать его потом друзьям). Всего в пару кликов вы можете поместить выделенный участок кода в красиво оформленную рамочку в стиле скриншотов с macOS, а также настроить эту рамочку и сохранить получившийся результат картинкой. Кстати, если у вас стоит какая-нибудь тема, то данный плагин сохранит цвет фона и подсветку синтаксиса для участка кода на самом скриншоте. Одним словом – очень полезный плагин.
P.S. У официальной версии плагина имеются проблемы с работоспособностью на свежих версиях VS Code, ниже прикреплена ссылка на рабочую версию уже от другого автора с добавленной настройкой получающихся скриншотов.
Prettier
Форматирование кода. Если данное словосочетание рождает в вашей голове ужасные ассоциации и гневные воспоминания, то данный плагин, скорее всего, станет для вас находкой даже похлеще, чем Америка для Христофора Колумба. Очень рекомендуется для использования в работе с коллегами, чтобы на споры по поводу стиля кода уходило намного меньше времени (его можно потратить на более полезные занятия).
Всего-то и нужно, что установить сам плагин. Вуаля – можете писать код, как вам заблагорассудится, а Prettier отбросит вопрос форматирования кода в дальний ящик, сделав все за вас по своему код-стайлу.
Quokka.js
Устали при написании кода каждый раз запускать его, чтобы проверить работоспособность какого-то участка? Данный плагин решит вашу проблему, ведь он отображает результат выполнения кода прямо в самом редакторе кода. Удобно ведь, да? А сколько времени экономит, убирая нужду в постоянном запуске кода после каждой правки!
Rest client
Auto Rename Tag
И снова полезный плагин для верстальщиков. При редактировании HTML/XML-тегов в начале он автоматически редактирует их и в конце. Простой плагин, но как сильно сокращает количество рутинных действий в работе. Как говорится, мелочь, а приятно!
TODO Highlight
Очень любите помечать участки кода тегами TODO и FIXME, но затем забываете о том, что нужно что-то починить или переделать? Данный плагин решит вашу проблему и будет выделять в коде фразы TODO или FIXME. А если таковыми вы ничего не помечаете, то вам не составит труда вставить туда и свои любимые теги, плагин будет и их выделять.
Faker
Предположим, у вас есть участок кода, который работает с данными из базы данных, но вам нужны просто случайно сгенерированные данные, а не взятые из БД. На помощь вам придет Faker, а точнее, сделанный на его основе плагин для VS Code. Достаточно при заполнении полей лишь вызвать соответствующую категорию данных – в нужное поле впишется случайно сгенерированное значение. Категории бывают разные, начиная с имен и заканчивая ссылкой на случайное фото.
Ознакомиться с возможностями инструмента можно на данной странице.
Bookmarks
Данный плагин упрощает перемещение в огромном пространстве кода, оставляя «книжные » закладки на определенных строчках. В общем, название плагина говорит само за себя.
Image Preview
Если в вашем коде уже присутствуют ссылки на какие-то изображения/иконки, то данный плагин покажет вам их в маленьком окошке слева от порядкового номера строки. Пригодится верстальщикам, чтобы не путаться во множестве иконок.
Бонус: лучшие темы для Visual Studio Code
Все эти практичные и полезные плагины – это, конечно, хорошо, но мы совсем забыли про внешний вид редактора кода, а ведь оформление является очень важным аспектом программирования, определяющим визуальное удовольствие от взаимодействия с программой. Здесь не будет комментариев, просто небольшая подборка очень красивых и, по моему мнению, лаконичных тем.
На этом мой топ подходит к концу. Надеюсь, что разработка в Visual Studio Code теперь будет приносить вам намного больше удовольствия. Удачи!
Читайте также: