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