Быстро различайте базы кода с помощью цветов окна VScode.

Введение

При работе над проектом в качестве разработчика нередко бывает открыто несколько окон, независимо от того, работает ли он в тандеме в отдельных кодовых базах серверной и клиентской частей или обращается к прошлой части работы за руководством по реализации функции. Я часто работаю с Vue и Laravel в двух отдельных окнах: Vue управляет моим интерфейсом, а Laravel — моим бэкендом. Я постоянно переключаюсь между окнами, особенно при работе на одном экране, добавляю браузер и дизайн, и все довольно быстро становится довольно запутанным. Существует лучший способ.

Лучший способ

Оконные краски спешат на помощь! Цвета окон — это расширение кода VS, которое позволяет вам назначать собственные цвета строки заголовка окна для ваших проектов, делая их мгновенно различимыми. Мало того, что цвета будут видны, когда окно открыто, но окна в вашей доке также будут иметь пользовательский цвет строки заголовка.

Чтобы найти расширение цветов окна, найдите window colors на панели расширений кода VS.

Настройка цветов окна

Найдите и установите window colors в панели расширений кода VS или найдите его здесь. После установки цветов окна расширение добавит 3 настройки цвета в файл .vscode/settings.json, используя уникальные цвета на основе хэша имени корневого каталога. Эти настройки цвета: activityBar.background, titleBar.activeBackground и titleBar.activeForeground.

По умолчанию цвета строки заголовка будут присутствовать только в том случае, если окно активно, однако вы можете обеспечить сохранение цветов, даже когда окно неактивно, просто добавив еще 2 параметра: titleBar.inactiveBackground, titleBar.activeForeground.

Настройки

Вы можете выбрать уникальный пользовательский цвет для каждой из ваших кодовых баз, однако, как я упоминал во введении, общий вариант использования для меня — это работа с Vue и Larvel над одним проектом, в двух кодовых базах, переднем и заднем концах. . Поэтому я предпочитаю, чтобы каждая база кода представляла преобладающую структуру, например, красный (#F05304) для Laravel и зеленый (#42B883) для Vue. Я также предпочитаю удалить параметр activityBar.background:

Настройки кодовой базы Laravel:

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#F05340",
        "titleBar.activeForeground": "#FFFFFFFF",
        "titleBar.inactiveBackground": "#F05340",
        "titleBar.inactiveForeground": "#FFFFFFFF"
    }
}

Настройки кодовой базы Vue:

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#42B883",
        "titleBar.activeForeground": "#FFFFFF",
        "titleBar.inactiveBackground": "#42B883",
        "titleBar.inactiveForeground": "#FFFFFF"
    }
}

Вывод

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

Если вы нашли эту статью полезной, пожалуйста, похлопайте ей и подпишитесь на меня на Medium, Dev.to и/или Twitter.