Как настроить внешний вид Visual Studio Code
Visual Studio Code — замечательный редактор, поддерживающий множество расширений для настройки под нужды пользователя. Сейчас для него доступно более 8 000 тем, которые помогают настроить цвета интерфейса, иконки, используемые для отображения типов файлов, и многое другое.
Шрифт и лигатуры
Правильно подобранный шрифт может стать удивительно эффективным средством повышения производительности и снижения утомляемости глаз. Существует множество шрифтов, созданных специально для разработчиков.
Обычно это моноширинные шрифты, все символы которых занимают одинаковое пространство по горизонтали.
Другим распространенным дополнением является добавление лигатур, специфичных для конкретного кода. Лигатуры — это символы, состоящие из двух и более соединенных символов. Вот две причины использовать лигатуры для кода.
- Наш мозг воспринимает многосимвольную последовательность, например === , как три отдельных символа. Это заставляет глаза сканировать все три символа, что требует затрат энергии на их обработку.
- Некоторые комбинации символов позволяют корректировать пробельные символы, что также делает лигатуры более заметными для глаз при сканировании и обработке.
Остановимся на двух популярных шрифтах для разработчиков:
Оба шрифта замечательны сами по себе и оба бесплатны для использования. Попробуйте скачать и потестить в течение какого-то времени оба шрифта, чтобы понять, какой из них подходит именно вам.
Алгоритм по использованию предпочитаемого шрифта в VS Code
- Скачайте шрифт по указанным выше ссылкам на свой компьютер и установите их локально. Рекомендую установить шрифты TTF из загруженного .zip-файла.
- Откройте файл VS Code settings.json через командную палитру (⇧⌘P). Введите settings (настройки) и затем Preferences: Open User Settings (JSON) — Предпочтения: открыть настройки пользователя (JSON).
- Добавьте следующие две строки кода в файл settings.json , чтобы выбрать предпочитаемый шрифт и включить лигатуры. Это позволит использовать несколько моноширинных шрифтов.
"editor.fontFamily": "JetBrains Mono, Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true
>
Темы иконок
Visual Studio Code показывает иконку перед каждым элементом в проводнике папок. Каждая иконка указывает определенный тип элемента. Таким образом, вы можете быстро увидеть различия между папкой, файлом Javascript и HTML.
Иконки можно настраивать. Маркетплейс предлагает на выбор множество отличных пакетов. Рассмотрим несколько популярных вариантов.
1. Material Icon Theme (14,5 млн установок)
Material Icon Theme — наиболее часто скачиваемое расширение на VSCode Marketplace. Оно имеет красивый набор четких иконок и заслуживает всяческих похвал.
2. Monokai Pro (1,7 млн установок)
Monokai Pro — это и цветовая тема, и тема иконок, переключающиеся независимо друг от друга. Обе выглядят эффектно и позволяют сосредоточиться на коде.
3. vscode-icons (12,1 млн установок)
vscode-icons — это удивительный набор иконок, который сразу же внесет ясность в вашу боковую панель. Я использовал его с самого первого выпуска VS Code до недавнего времени. Если вы затрудняетесь с выбором набора иконок, рекомендую загрузить vscode-icons. Каждая его иконка проста и понятна, к тому же хорошо сочетается с любой цветовой темой.
4. Пакет City Lights Icon (96 тыс. установок)
Пакет City Lights Icon включает в себя две темы иконок для цветного и монохромного вариантов. Монохромный вариант удивительно чистый и, на мой взгляд, очень хорошо сочетается с темой Night Owl.
Цветовые темы
Цветовые темы — это, безусловно, самое радикальное визуальное изменение, которое вы можете внести в свой редактор. Их выбор очень индивидуален. Тем не менее я хочу привести здесь несколько отличных вариантов, которые завоевали наибольшую популярность в сообществе VS Code.
1. One Dark Pro (6,2 млн установок)
One Dark Pro — точная копия темы One Dark от Atom. Это самая популярная темная тема на VS Code Marketplace. Она вызывает ностальгию у многих разработчиков, которые использовали Atom в прошлом.
Популярность One Dark Pro вполне заслужена: цвета красивые и не отвлекают от кода.
2. Github Theme (5,4 млн установок)
GitHub выпустил набор собственных цветовых тем. Доступны темная и светлая тема, каждая из которых имеет режим по умолчанию, высокую контрастность и режим для дальтоников.
Если вы являетесь давним пользователем GitHub и приверженцем его цветовой темы, то вам определенно стоит попробовать этот набор.
3. Dracula Official (4,4 млн установок)
Dracula Official — популярная тема для различных редакторов, оболочек и других инструментов. Идея заключается в том, чтобы создать единую цветовую тему для всех рабочих процессов. Это красивая темная цветовая тема, вдохновленная ночной романтикой (отсюда и название).
Узнать больше об этой теме можно на сайте разработчика Dracula Official.
4. Night Owl (1,6 млн установок)
Night Owl — это впечатляющая темная тема, созданная специально для тех, кто пишет код до поздней ночи. Как утверждает автор: “При выборе цветовой схемы учитывались возможности, доступные людям с дальтонизмом и в условиях недостаточной освещенности. Решения также были основаны на контрастности, значимой для понимания прочитанного и оптимальной яркости”.
5. One Monokai (1,5 млн установок)
Тема One Monokai представляет собой нечто среднее между One Dark Theme и Monokai.
6. Shades of Purple (1,3 млн установок)
Shades of Purple — завораживающая тема со смелыми оттенками фиолетового. В этой теме код практически “выпрыгивает” с экрана.
7. SynthWave ’84 (1 млн установок)
Эта креативная тема создана под влиянием электронной музыки и обложек синтвейв-групп, таких как Timecop 1983 FM-84 и The Midnight. Она очень яркая, так что код будет буквально пылать на вашем экране. Если вы любите стиль 80-х, эта тема может прийтись вам по вкусу!
8. Tokyo Night (650 тыс. установок)
Эта тема для Visual Studio Code воспевает огни ночного Токио. Она очень чистая и выглядит великолепно.
9. Kanagawa (100 тыс. установок)
Kanagawa — своеобразный VSCode-порт в цветовую схему KANAGAWA.nvim. Это темная тема, вдохновленная колористикой знаменитой картины Кацусики Хокусая.
10. Bracket Lights Pro (65 тыс. установок)
Тема Bracket Lights Pro привлекает внимание красивой цветовой палитрой. Она придает VS Code светлую тему, характерную для редактора кода Brackets.
Заключение
Visual Studio Code обладает множеством вариантов настройки. Такое разнообразие предложений позволяет сделать редактор эстетически приятным для каждого разработчика.
- Расширения VS Code, в 3 раза повышающие скорость работы
- 5 секретов продуктивной работы в VS Code
- ReSvelte — инструмент разработчика Svelte и визуализатор дерева компонентов (расширение VS Code)
Читайте нас в Telegram, VK и Дзен
Черные полосы в Blend for Visual Studio 2019
Гуглеж ничего не дал, тк я даже не понимаю как это описать.
переустановка студии не помогла.
Помогите с решением пожалуйста.
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Размер Visual Studio 2017 и Visual Studio 2019
Почему visual studio 2019 после скачивания занимает 24гб, а visual studio 2017 до 45гб? может я что.
Expression blend 4 и Visual Studio 2012
Как открыть в Expression blend 4 проэкт который был создан в Visual Studio 2012?
Поиск книг по Blend for Visual Studio
Добрый вечер. Подскажите, где можно найти информацию по Blend for Visual Studio и как можно.
Можно ли делать exe приложения в Blend for Visual Studio?
Не очень могу понять, можно ли в Blend делать обвчные exe приложения как в VS с помощью windows.
Регистрация: 07.06.2019
Сообщений: 1

Сообщение было отмечено OwenGlendower как решение
Решение
Решение довольно неожиданное. Попробуй установить любую цветовую схему, кроме синей. Средства/Параметры/Окружение/Общие/Цветовая схема/Светлая(или темная). У меня артефакты сразу же исчезли. А в тырнетах и правда ничего толком не посоветовали.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

QtCreator и Visual Studio 2019
Всем привет! Переустановил ОС. Поставил самую новую Visual Studio 2019. Затем установил QtCreator.
Установка Visual Studio 2019
Всех приветствую,нужна ваша помощь! Решил установить VS 2019,но после высвечивания окна.
Ошибки в Visual Studio 2019
Здравствуйте, проблема такая. Имеется код на СИ. Когда пытаюсь его запускать в программе, выдает.
Не устанавливается Visual Studio 2019
Я посмотрел много ответов на этот вопрос на разных форумах. То что его нужно скачать с оф сайта.

Проблема с Visual Studio 2019
Здравствуйте. Хочу создать консольное приложение в VS 2019. Но возникает следующего рода проблема.
Visual studio 2019 и KMSBox
Может ли KMSBox активировать Visual Studio 2019 Enterprise.
Как сделать светлую тему в visual studio 2019
Когда люди пишут инструкции — они такие скучные и непонятные, в которых еще нужно и разбираться! У нас все просто!
Открываем программу 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«?
Как мы уже выше выяснили, быстрый доступ к темам. нажимаем:
ctrl + K ctrl + T В окне, смотрим, есть строчка — «светлые темы», либо просто выбираем светлую тему, либо слева есть несколько светлых тем для Visual Studio Code«.
Нажмите, чтобы открыть в новом окне.
Как поставить темную тему «Visual Studio Code«?
Если вам нужно поставить темную тему в «Visual Studio Code«, то проделываем аналогичные действия.
ctrl + K ctrl + T
И далее выбираем темную тему
Нажмите, чтобы открыть в новом окне.
Загрузить сторонние темы «Visual Studio Code«?
Если вам вдруг. не хватило перечисленных тем, то можно загрузить сторонние темы.
ctrl + K ctrl + T
Установить дополнительные цветовые темы.

Слева открываем строку поиска нажав по кнопке «extensions»(ctrl + shift + X)
В строке вводим:
Выбор сторонне темы «Visual Studio Code«?
И в двух случаях попадаем в одно и то же место:
Я пытался я прокрутить до самого низа. когда кончится список сторонних тем . но у меня не получилось — может у вас получится!?
Темная или светлая тема кода?
Почему большинство тем темные, как оно вообще на зрение сказывается?
Увлекаюсь фронтендом и соответственно приходится туда сюда бегать в браузер, смотреть результат. Если у многих в этот момент темная тема, то переход(темный->светлый и наоборот) между редактором кода и браузером(большинство сайтов светлые) не режет глаза?
Или может я чего упускаю?
KRex ★
27.02.18 11:59:41 MSK
Я использую светлую тему.
Deleted
( 27.02.18 12:07:17 MSK )

Специально изучал данный вопрос.
Тёмные темы для глаз лучше, на тёмном фоне (не чёрном, лучше тёмно сером) светлый текст (не белый).
Основной принцип в малой контрастности между фоном и текстом.
Чем меньше света излучает монитор, тем меньше устают глаза.
Так же важен фон за монитором, лучше приглушённые неяркие цвета, плохо когда за монитором окно (днём).
Я использую в xterm фон 080808 текст 585858
Браузер firefox есть аддон «Dark Background and Light Text» там те же цвета установил.
Ещё очень важен шрифт и его размер под себя. Я юзаю https://github.com/adobe-fonts/source-code-pro
qqsi
( 27.02.18 12:19:10 MSK )

запили свои css и будут у тебя все сайты темные, вот тут есть готовые примеры https://userstyles.org/
amd_amd ★★★★★
( 27.02.18 12:20:11 MSK )

Пока кода мало писал, сидел на светлой теме. Потом, когда код стало нужно вычитывать и рефакторить, перешёл на тёмную тему. Сделал всё тёмным, даже офис. Верстать светлые сайты не мешает.
Shadow ★★★★★
( 27.02.18 12:30:59 MSK )
Ответ на: комментарий от amd_amd 27.02.18 12:20:11 MSK

Спасибо за наводку
Сейчас нашел там пару приемлемых global, засунул через Violentmonkey сейчас допилю под себя.
qqsi
( 27.02.18 12:35:31 MSK )
Мне комфортнее на светлой теме.
rumgot ★★★★★
( 27.02.18 13:10:37 MSK )

Какое тебе дело до чужих глаз? Ты не можешь понять режет ли *тебе* глаза?
Причин для чёрного фона есть две:
1. Чёрный фон был актуален на ЭЛТ с низкой частотой обновления кадров: чёрный фон не мерцает, в отличие от белого. На эта причина не распространяется.
2. Подсветка синтаксиса: светлые буквы на тёмном фоне представляют больше возможностей для выделения текста цветом, так как при малой яркости (тёмные буквы на светлом фоне) человеческий глаз хуже различает цвета («ночью все кошки серы»). Поэтому тёмный фон популярен именно в редакторах кода. Во всяких «вордах» белый фон более эргономичен.
debugger ★★★★
( 27.02.18 13:35:17 MSK )
Ответ на: комментарий от debugger 27.02.18 13:35:17 MSK

Можешь сомневаться, но в thunderbird с тёмной темой легче распутывать треды сотен писем.