Кастомизация темы VSCode.

Кастомизация — индивидуализация продукции под заказы конкретных потребителей путём внесения конструктивных или дизайнерских изменений.

Сегодня я хочу вам рассказать об очень простой штуке, которая во многом, я уверен, облегчит жизнь всем тем, кто работает в редакторе VSCode. Речь пойдет о некоторых возможностях кастомизировать (настроить для ваших нужд и вкусов) тему самого редактора.

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

Подумал, что было бы здорово, если бы можно было отличать их по визуальным признакам. Например - какой-либо особенный цвет верхней панели, или еще что-нибудь. Потом захотелось менять всю тему от проекта, к проекту, говорят, что это способствует лучшей усидчивости и откладывает "выгорание" на долгий срок. Короче говоря, приступаем.

Погнали!

1. Открываем редактор VSCode. Идем в настройки. Ctrl + +, или по длинному пути - нажимаем внизу, слева - шестеренку и выбираем "Параметры"







2. В строке поиска (сверху) забиваем - title и нас сразу перекинет в нужную часть настроек. Там опускаемся чуть ниже и ищем такие строки:

   "Window: Title Bar Style
   Вы можете настроить внешний вид заголовка окна. В Linux и Windows этот параметр также влияет на внешний вид меню приложения и контекстного меню. Для применения изменений требуется полная перезагрузка."

   В выпадающем списке выбираем пункт - Custom. VSCode - редактор, сообщит, что изменения вступят в силу сразу после перезагрузки редактора







3. Теперь остается только добавить нужные изменения, чтобы редактор VSCode их отобразил. Для этого, если вы вносите изменения в готовый проект, то ищите в нем папку .vscode, а в ней файл settings.json. Если проект новый, или хотите выделить какую-то отдельную папку, то нужно создать эту папку и в ней файл. У меня в нем уже были прописаны пара моих настроек (автосохранение и размер шрифта) и сразу после них, добавим строки отвечающие за цвет шрифта и окраску верхней панели


settings.json

{
   "files.autoSave": "onWindowChange",
   "editor.fontSize": 16,
   "workbench.colorCustomizations": {
       "titleBar.activeForeground": "#000",
       "titleBar.inactiveForeground": "#000000CC",
       "titleBar.activeBackground": "#51ff00",
       "titleBar.inactiveBackground": "#51ff00cc",
   }
}



Не забывайте добавить запятую, перед вставкой вашего куска кода!

Как вы можете легко понять из названий свойств, то мы поменяли только верхнюю панель (title).

Ctrl + S - сохраняем, чтобы изменения вступили в силу.

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

settings.json

{
  "files.autoSave": "onWindowChange",
  "editor.fontSize": 16,
  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#000",
    "titleBar.inactiveForeground": "#000000CC",
    "titleBar.activeBackground": "#51ff00",
    "titleBar.inactiveBackground": "#51ff00cc",
    "editorGroupHeader.tabsBackground": "#1d262a",
    "editorWhitespace.foreground": "#263238", // theme background
    "background": "#FF00FF",
    "badge.foreground": "#B4B4B4",
    "panel.border": "#1d262a",
    "sideBar.foreground": "#B4B4B4",
    "sideBar.background": "#1d262a",
    "statusBar.background": "#1d262a",
    "tab.border": "#546e7a",
    "tab.inactiveForeground": "#B4B4B4",
    "tab.inactiveBackground": "#1d262a"
  }
}

Общий вид темы будет таким:

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

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE