• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ (Украина) →
Вход
×
или зарегистрироваться

Как настроить оформление Visual Studio Code

СофтПросмотров: 56238Комментарии: 58 декабря 2019 г.

В Visual Studio Code (VSCode) темы оформления можно настроить несколькими способами. Самый простой — это установить уже готовый вариант. Поскольку выбор, действительно, очень большой, то можно подобрать наиболее привлекательный вариант. Второй способ — это воспользоваться он-лайн редактором тем, где можно самостоятельно настроить все цвета. И третий вариант — это используя уже готовую тему, внести необходимые коррективы в локальные настройки.

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

Готовые темы для Visual Studio Code

Здесь всё очень просто: все темы устанавливаются с официального сайта: Marketplace. На странице темы есть ссылка Install , нажав на которую, откроется сам VSCode, где и выбирается установка.

Для переключения установленных тем используются горячие клавиши Ctrl+K+T (нажать Ctrl, потом не отпуская, «K» и «T»). Дальше курсором выбираем любой вариант.

Выбор темы оформления в Visual Studio Code

В 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 переключаемся на вкладку расширений и включаем его.

Своя тема для VSCode

Если вы решите изменить какой-то цвет в 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.

Инструмент Developer: Inspect TM Scopes

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

Окно информации об элементе

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

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 под любые «капризы». :-)


Создание сайтов (Украина) →
Обновление сайта
Скидка 50% на шаблон MF в «черную пятницу»
twitter.com facebook.com
Другие записи сайта
Виды PHP-роутинга
Виды PHP-роутинга
Как организовать древовидные рубрики на сайте (Adjacency List)
Как организовать древовидные рубрики на сайте (Adjacency List)
Вебальта - шпион?
Вебальта - шпион?
О переделке запросов в MaxSite CMS 0.41
О переделке запросов в MaxSite CMS 0.41
Создаём To-do List на Alpine.js
Создаём To-do List на Alpine.js
LESS-компиляция через Node.js и Grunt
LESS-компиляция через Node.js и Grunt

Комментариев: 5 RSS

1Дмитрий13-05-2020 20:49

Спасибо за статью, все в принципе понятно, но не могу изменить цвет фона для PHP зон кода, т.е. чтобы в шаблонах было удобно видеть куски кода, хотел сделать фон для них как в notepad++ - background FEFCF5. Но почему то если делаю так, то получаю такой варинг: Цвет фона маркера сейчас не поддерживается.

"editor.tokenColorCustomizations": {
"[Default Light+]": {
"textMateRules": [
{
"scope": "source.php",
"settings": {
"background": "#FEFCF5",
}
},
],
},
}

Не подскажешь почему? И кстати команда для Inspect изменилась, сейчас это >Developer: Inspect Editor Tokens and Scopes

2MAX14-05-2020 08:24

Сложно сказать. Может нужно указывать как «textCodeBlock.background» или что-то подобное.

3Serg22-07-2020 23:50

О, классная статья,

но, вопрос: а как определить для конкретного языка(к примеру, Java) его методы, свойства, константы...?

Например, я хотел бы, чтобы при объявлении переменной ключевым словом int, int принимал бы наклонный шрифт. А при вызове функции это ключевое слово было бы жирным.

Ясно, что это делается в scope. А где взять определения спецификаций языка? К примеру, откуда у вас взялось .phpdoc.php

"scope": "comment.block.documentation.phpdoc.php, comment.line.double-slash.php",

4MAX23-07-2020 09:13

Наверное только через Developer: Inspect TM Scopes, отмечая нужные элементы и потом переносите их «код» свои настройки.

5Владимир04-05-2022 09:44

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

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2689 | SQL: 20 | Память: 4.64MB | Вход