Подсветка синтаксиса - это инструмент. Она помогает быстрее читать код. Быстрее находить нужную информацию. Ориентироваться в большом файле.
Как и любой инструмент, её можно использовать правильно или неправильно. Давайте посмотрим, как использовать подсветку синтаксиса для облегчения работы.
Безумие новогодней елки
Большинство цветовых тем имеют уникальный яркий цвет буквально для всего: один для переменных, другой для ключевых слов языка, констант, знаков препинания, функций, классов, вызовов, комментариев и т. д.
Иногда всё настолько плохо, что не видно основного цвета текста: всё подсвечено. Какой здесь основной цвет текста?
Проблема в том, что если всё выделено, то ничто не выделяется. Ваш глаз адаптируется и воспринимает это как новую норму: всё яркое и блестящее, и вместо того, чтобы разделяться, всё сливается воедино.
Вот быстрый тест. Попробуйте найти определение функции здесь:
и здесь:
Понимаете, о чём я?
Так что да, к сожалению, невозможно просто выделить всё. Приходится принимать решения: что важнее, что менее важно. Что должно выделяться, а что нет.
Выделение всего - это как назначение «высшего приоритета» каждой задаче в линейном календаре. Это работает только в том случае, если у большинства задач приоритет ниже.
Если выделено всё, то ничего не выделено.
Достаточно цветов для запоминания
Есть два основных варианта использования, которые должна решать ваша цветовая тема:
Взглянуть на что-то и определить, что это за объект, по его цвету (да, это можно определить, прочитав текст, но зачем тогда нужна подсветка синтаксиса?)
Поиск чего-либо. Вы хотите знать, что искать (какой цвет).
Первая задача - это прямой поиск по индексу: цвет → тип объекта. Вторая - это обратный поиск: тип объекта → цвет. По правде говоря, большинство людей вообще не делают таких поисков. Они могут думать, что делают, но на самом деле это не так.
Позвольте мне проиллюстрировать. До:
После:
Видите? Я неправильно написал return вместо retunr, и цвет сменился с красного на фиолетовый.
А я - нет, не вижу.
Вот ещё один тест. Закройте глаза (ещё нет! сначала дочитай��е это предложение!) и попытайтесь вспомнить, какой цвет ваша цветовая тема использует для имён классов.
Вспомнили?
Если ответ на оба вопроса «нет», то ваша цветовая тема нефункциональна. Она может вас успокоить (например, «я чувствую себя в безопасности. Если что-то выделено, это, вероятно, код»), но вы не можете использовать её как инструмент. Она вам не помогает.
Какое решение? Используйте абсолютный минимум цветов. Настолько мало, чтобы все они сразу умещались в голове. Например, моя цветовая тема, Alabaster, использует всего четыре:
Зелёный - для строк;
Фиолетовый - для констант;
Жёлтый - для комментариев;
Светло-голубой - для определений верхнего уровня.
Вот и всё! И я смог напечатать всё это по памяти. Этот минимализм позволяет мне выполнять поиск: если я ищу строку, я знаю, что она будет зелёной. Если я ищу что-то жёлтое, я знаю, что это комментарий. В общем, ограничьте количество различных цветов тем, что можете запомнить. Если вы поменяете местами зелёный и фиолетовый в моём редакторе, это будет катастрофа. Если кто-то поменяет цвета в вашем, вы вообще заметите?
Ограничьте количество различных цветов тем, что можете запомнить.
Если вы поменяете местами зелёный и фиолетовый в моём редакторе, это будет катастрофа. Если кто-то поменяет цвета в вашем, вы вообще заметите?
Что нужно выделять?
Что-то, чего не так много. Помните - мы хотим, чтобы подсветка была заметна. Именно поэтому я не выделяю переменные или вызовы функций - они повсюду, ваш код, вероятно, на 75% состоит из имён переменных и вызовов функций.
Я выделяю константы (числа, строки). Они обычно используются реже и часто служат опорными точками - многие логические цепочки начинаются с констант.
Определения верхнего уровня - ещё одна хорошая идея. Они быстро дают представление о структуре.
Пунктуация: она помогает немного отделить имена от синтаксиса, а имена важны в первую очередь, особенно при быстром просмотре кода.
Пожалуйста, пожалуйста, не выделяйте ключевые слова языка: класс, функция, if, else и тому подобное. Вы редко их ищете: «где этот if» - вопрос вполне обоснованный, но вы будете смотреть не на ключевое слово if, а на условие после него. Условие - важная, отличительная часть. Ключевое слово - нет.
Выделяйте имена и константы. Пунктуацию оставляйте серым. Не выделяйте ключевые слова языка.
Комментарии важны
Традиция использовать серый цвет для комментариев восходит к временам, когда людям платили построчно. Если у вас есть что-то вроде
то, конечно, вы бы хотели оставить его серым! Это бессмысленный текст, который ничего не добавляет и был написан для того, чтобы его просто проигнорировали.
Но с хорошими комментариями ситуация обратная. Хорошие комментарии дополняют код. Они объясняют то, что нельзя выразить напрямую. Они важны.
Поэтому вот вам еще одна идея для размышления:
Комментарии следует выделять, а не прятать.
Используйте яркие цвета, привлекайте к ним внимание. Не стесняйтесь. Если кто-то уделил время, чтобы что-то вам сказать, значит, вам стоит это прочитать.
Два типа комментариев
Ещё один секрет, о котором никто не говорит, заключается в том, что существует два типа комментариев:
Пояснения
Закомментированный код
Большинство языков не различают эти типы, поэтому с синтаксисом мало что можно сделать. Иногда есть соглашение (например, -- вместо /* */ в SQL), так что используйте его!
Вот реальный пример из кодовой базы Clojure, который идеально использует два типа комментариев:
Светлая или тёмная тема?
По статистике, 70% разработчиков предпочитают тёмные темы. Будучи в числе оставшихся 30%, этот вопрос всегда озадачивал меня. Почему?
И, кажется, у меня есть ответ. Вот типичная тёмная тема:
А вот светлая:
На последнем варианте цвета гораздо менее яркие. Вот, я их для вас выбрал:
Это связано с тем, что тёмные цвета, как правило, менее различимы и более размыты. Посмотрите на шкалу оттенков при уменьшении яркости:
По сути, в тёмной части спектра просто меньше цветов для игры. Нет «тёмно-жёлтого» или красивого «тёмно-бирюзового».
Здесь ничего не поделаешь. Нет никаких волшебных цветов, которые бы одновременно хорошо контрастировали на белом фоне и хорошо смотрелись. Выбирая светлую тему, вы обрекаете себя на очень ограниченный, некрасивый, едва различимый набор тёмных цветов.
Так что это логично. Тёмные темы выглядят лучше. Вернее: светлые не могут выглядеть хорошо. Наука ¯_(ツ)_/¯
Но!
Но.
Есть один трюк, который я нечасто вижу. Используйте фоновые цвета! Сравните:
В первом примере приятные цвета, но слишком низкий контраст: буквы становится трудночитаемыми.
Во втором - хороший контраст, но цвета едва различимы.
В последнем есть и то, и другое: высокая контрастность и чистые, яркие цвета. Более светлые цвета читаются даже на белом фоне, поскольку занимают гораздо большую площадь. Текст имеет ту же яркость, что и во втором примере, но создаёт впечатление более чёткого цвета. В этом есть и плюс.
UI-дизайнеры давно знают об этом приёме, но я редко вижу его применение в редакторах кода:
Если ваш редактор поддерживает выбор цвета фона, попробуйте. Возможно, он откроет для вас светлые темы.
Жирный шрифт и курсив
Не используйте. Это относится к той же категории, что и слишком много цветов. Это просто ещё один способ выделить что-то, и вам не нужно слишком много цветов, потому что вы не можете выделить всё.
Теоретически, можно попробовать заменить цвета типографикой. Сработает ли это? Не знаю. Я не видел примеров.
Миф о совершенстве, основанном на числах
Некоторые темы слишком усердствуют в научном единообразии. Например, все цвета имеют одинаковую яркость, а оттенки равномерно распределены по окружности.
Это могло бы быть интересно, но на практике это работает не так хорошо, как кажется:
Идея выделения заключается в том, чтобы сделать элементы выразительными. Если сделать все цвета одинаковой яркости и насыщенности, они будут выглядеть очень похожими, и их будет сложно отличить.
Наши глаза гораздо более чувствительны к различиям в яркости, чем в цвете, и нам следует использовать это, а не пытаться игнорировать.
Давайте вместе создадим цветовую тему
Давайте применять эти принципы шаг за шагом и посмотрим, к чему это нас приведёт. Начнём с темы, из которой мы начали этот пост:
Во-первых, давайте уберем подсветку ключевых слов языка и заново введем базовый цвет текста:
Далее мы убираем цвет из использования переменной:
и из вызова функции/метода:
Идея заключается в том, что ваш код в основном состоит из ссылок на переменные и вызовов методов. Если мы их выделим, нам придётся выделить более 75% кода.
Обратите внимание, что мы сохранили объявления переменных. Они не так распространены и помогают быстро ответить на распространённый вопрос: откуда берётся то-то и то-то?
Далее давайте смягчим пунктуацию:
Я предпочитаю немного приглушить его, потому что это помогает им лучше выделяться. Одни только имена могут дать общее представление о том, что происходит, и точное расположение скобок редко бывает столь же важно.
Но можно использовать и пунктуацию основного цвета:
Ладно, уже близко. Давайте выделим комментарии:
Мы не используем здесь красный, потому что он обычно нужен для волнистых линий и ошибок.
Всё равно на один цвет больше, чем нужно, поэтому я объединяю числа и строки, используя зелёный:
Наконец, давайте немного поменяем цвета. Мы хотим сохранить логику вложенности, поэтому объявления функций должны быть ярче (жёлтыми), чем объявления переменных (синими).
Сравните с тем, что мы начали:
На мой взгляд, мы получили гораздо более удобную цветовую тему: она приятнее для глаз и помогает быстрее находить нужную информацию.
Заключение
Я применяю эти принципы уже около 8 лет, и они мне отлично подошли. Я никогда не хотел возвращаться к прежней подсветке, и один взгляд на любую «традиционную» цветовую схему теперь пугает меня.
Подозреваю, единственная причина, по которой мы не видим более сдержанных цветовых схем, заключается в том, что люди никогда об этом не задумывались. Что ж, это ваш тревожный звоночек. Надеюсь, это вдохновит людей использовать цвет более осознанно и изменить привычный подход к созданию и использованию цветовых схем.
Время бесстыдного пиара
Я называю эту тему Alabaster и пару раз создавал её для редакторов, которые использовал:
Sublime Text (дважды)
Она также была портирована на множество других редакторов и терминалов; самый полный список, вероятно, здесь. Если вашего редактора нет в списке, попробуйте поискать его по названию - возможно, он уже встроен! Мне всегда было интересно, откуда берутся эти цветовые темы, и теперь я стал автором одной (и до сих пор не знаю).
Вы можете использовать Alabaster как есть или создать свою собственную тему, используя принципы, изложенные в статье - меня устраивает любой из них.