Красочный код: как цвет помогает в работе с кодом

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

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

    Пример цветовой схемы Darkula в Android Studio
    Подсвечены в принципе только ключевые слова и константы


    Начало концепции положила цветовая схема Ciapre для Xcode. Она изначально (да и стоит признать, сама IDE) предоставляет такое семантическое деление именно цветом. Flat цвета не режут глаза и достаточно сильно отличаются для разных типов семантических элементов.
    В результате получилось примерно следующее разделение:

    • Ключевые слова — красный
    • Reference Types (классы) — желтый
    • Интерфейсы — оранжевый
    • Value Types — фиолетовый
    • Константные значения — тоже фиолетовый, но поярче
    • Методы и функции — синий (внешние, из пакетов/модулей — чуть ярче)
    • Поля и свойства типов — зеленый

    После переноса в разные IDE получилось примерно следующее (да-да, я знаю первую реакцию — «что за кислятина» :-) ):

    • Swift (Xcode)
      В Xcode проблемы с интерфейсами (в плане разделения от классов), они считаются за reference type и тоже отображаются желтым.

    • Kotlin (Android Studio) (можно сравнить с примером выше — darkula)
      В котлине существуют разного рода квалифаеры и метки, для них тоже есть отдельный цвет

    • Java (Android Studio)

    • C# (Visual Studio)
      В шарпе есть неймспейсы, для них — отдельный цвет. Ну а еще студия огорчает тем, что нет четкого семантического разделения в настройках (поле класса, метод и т.п.). В этом мне помогает ReSharper.


    Из дополнительных бонусов — зрение позволяет сразу находить странности уже на уровне цветового восприятия даже не прочитав текст. Если я знаю, что должен быть интерфейс, то я увижу, что не хватает оранжевого цвета там, где я это ожидаю (например, может быть написан тип, соответствующий интерфейсу и все вроде как валидно, но нет).

    Собственно и все :)

    Для желающих прикладываю цветовые схемы

    Хорошего и красивого кода всем!
    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 39

      +1
      Вам этот красный цвет в глаза не кричит? На обыденных, в общем-то, словах.
        0
        Ну, дело привычки. Flat цвет, на темном не особо режет глаза. В общем, на вкус и цвет, как говорится… Идея статьи — о выделении семантики.
        0

        Это была одна из ключевых причин перехода с WebStorm на VSCode. Но мне для TypeScript, меняйте специализацию на React Native. :)

          0
          Довольно похоже на Gruvbox.
          • НЛО прилетело и опубликовало эту надпись здесь
              0

              Когда смотрю в код у коллег, сперва ничего не могу разобрать — как-то всё бесцветно.
              Сам раскрашиваю код ещё со времён IDE на Turbo Vision.
                0
                Я себе сам настраивал цвета так чтобы не резало глаз, но можно было легко отделить одно от другого. Думал, что многие так делают, разве нет?
                  0

                  Цвета не настраиваю, но выбираю наименее контрастные цветовые схемы из доступных. Например, Monokai (дефолтная в Sublime Text) слишком контрастная, а вот Darkula в JetBrains IDE очень даже хороша. Еще нравится Solarized Dark — есть почти во всех опенсорсных редакторах и консолях, часто ее использую

                    0
                    Как показывает практика, многие привыкают к дефолтным схемам. Ну и плюс, идея в единообразии и одинаковой семантике в разных IDE.
                      0
                      Я настраиваю не цвета, а семантику. В идеале чтобы 90% кода имело не более 3 цветов. Пестрый код очень отвлекает. В этом плане и у IntelliJ и у Eclipse очень годная светлая тема.
                        0

                        Какую семантику вы имеете ввиду? Структуру кода? Потому что я тоже за семантическое выделение. Но сущностей много, следовательно и цветов много.

                      0

                      На схожую тему в IDE от JetBrains есть опция Semantic highlighting.
                      Только она немного о другом: свой цвет (до 5 штук) выбирается для каждого параметра или локальной переменной. Т.е. везде в коде метода параметр foo будет "зелёненьким", а параметр bar — "синеньким".

                        0
                        Хорошая идея. Столкнулся с такой же проблемой, если это можно так назвать: мне же сразу не понравилось подсветка по умолчанию в XCode. Решением была вот эта находка =)
                          0

                          Тема работает для всех языков и панелей или только swift/obj-c?

                            0
                            По идее в Xcode это все будет работать для всех языков, которые переваривает IDE. Плюсы, например — запросто.
                              0

                              Все что не было заточено под яблоки в XCode не работало по-человечески. В том числе подсветка у плюсов — та семантика, что настраивается в obj-c не настравивается в c++. Темы оформления вообще приходилось через Alcotraz настраивать. Было это во времена El Captain. Сейчас не знаю как обстоят дела с поддержкой

                                0

                                Сейчас более-менее

                                  0

                                  Для полного набора не хватает членов класса

                                    0
                                    Так есть же: методы — синие, свойства — зеленые.
                            0
                            Я наоборот в Visual Studio for Mac/MonoDevelop использую цветовую схему от Xcode) только VS не поддерживает разделение между библиотечными и своими классами
                            0
                            Большое спасибо за статью. Давно хотел потратить часок другой на то, чтобы подогнать цветовую схему икскода под себя. Всегда предпочитал Dusk, который вполне контрастный, но у него есть недостаток, к которому я привык. Все, что ты создал сам (неважно, класс, структура, метод или константа) — зеленое, все что идет из коробки — синее. Есть очень хорошее понимание того, что есть твое создание, а что нет, но это является и недостатком, потому что нет разделения между классами, методами, value types и константами. В итоге у меня получилась такая смесь между вашим Ciapre и икскодовским Dusk, где вроде как получилось и свое от чужого отделить, и внутри компоненты по их назначению отличать друг от друга. http://joxi.net/Dr8ZD4lckDLkj2
                            Сначала очень начало рябить в глазах, но через минуты три стало гораздо комфортнее. И отдельное вам спасибо за очень приятный желтый! Желтый цвет сделать комфортным — это вообще отдельное искусство.
                              0

                              Я надеялся тут будет какое-то исследование про восприятие, синестезию или что-то в этом роде, а в статье "Я настроила одинаковую тему во всех IDE". Кто-нибудь может пояснить в чем соль статьи?

                                +1

                                Соль статьи не в "одинаковости" темы в разных IDE, а в идее цветового выделения семантики.
                                Мне, например, она "открыла глаза". И я собираюсь сделать что-то подобное в своей схеме раскраски.

                                  0

                                  То есть вы до этого работали в блокноте и понятия не имели, что элементы можно красить в зависимости от их назначения?

                                    0

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


                                    Если вам идея раскрасить по-разному классы и методы пришла раньше — отлично. Но это не значит, что статья "ниачём", а те, кто с этим не согласны, только оторвались от блокнота.

                                0
                                Подскажите! А как заюзать эту цветовую схему в Android Studio?
                                  0

                                  Скачать файлик, в студии выбрать пункт меню File > Import Settings и указать скачанный файл

                                    0
                                    А в xcode?)
                                      0

                                      Положить файлик в ~/Library/Developer/Xcode/UserData/FontAndColorThemes

                                  0
                                  Мне бы такую статью по vim…
                                    0

                                    В одном из комментариев в начале упоминается https://github.com/morhetz/gruvbox
                                    Это не оно?

                                      0

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


                                      Вот пример
                                      image
                                    +1

                                    Следующий уровень: находить странности в коде по запаху.

                                      0
                                      в свое время создатель языка FORTH так проникся цветовой идентификацией, что разработал ColorFORTH вставив цветовую идентификацию на уровень языка
                                      image
                                        0

                                        Для Visual Studio смотрите расширение SemanticColorizer. Он позволяет сделать расширения в C# курсивом.

                                          0
                                          О! Спасибо, выглядит интересно
                                          0
                                          а может и vs code есть удобные схемы?
                                            –1
                                            Как программирующий каждый день, скажу: крайности всегда проигрывают. Ваша «семантическая помощь» превращает код в попугайское мельтешение цветных ленточек — мозг тупо устаёт различать «цвета и смыслы». У вас я насчитал СЕМЬ(!) разных цветов на общеупотребительные вещи (и уверен, для хабровчан это не предел! :) ). Это мрак. Цвет конкретной сущности языка имеет смысл, но сугубо под кратковременную задачу — скажем, найти все употребления локальных переменных. Но нужно ли это в регулярной работе?.. Увы, нет.

                                            И да, не устану повторять: надоели здоровые глаза? Ставьте «тёмную» тему!
                                              +1
                                              Ваше мнение очень важно для нас :-) Сразу же ясно, что это все дело вкуса. Пожалуйста, не надо беспокоиться за мои глаза.
                                              Вы думаете, я программирую только каждый первый четверг после полнолуния? Право, не стоит так сильно беспокоиться, поберегите себя.

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое