Почему вам следует использовать отступы столбцов, чтобы улучшить читабельность кода

1656651625 pochemu vam sleduet ispolzovat otstupy stolbczov chtoby uluchshit chitabelnost koda

Леонардо Каррейро

1*EWTTZDqP8okovm5BF4QPFA

Я считаю, что важнейшим аспектом программирования является читабельность исходного кода, который вы пишете или поддерживаете. Это касается многих вещей, от синтаксиса языка программирования до имен переменных, комментариев и отступлений. Здесь я обсуждаю последнюю из них, отступление.

Дело не в размере отступления, выборе между табуляцией и пробелами, или в том, нужно ли это требовать в таком языке, как Python. Многие любят использовать максимальную длину строки для каждой строки кода, как правило, 80 или 120 символов. С этой идеей не существует максимальной длины, и иногда вам нужно использовать горизонтальную полосу прокрутки. Но не пугайтесь, это не для всего кода – это только для некоторых его частей.

Четыре примера улучшений с помощью отступов кода

Первый пример

Посмотрите на этот код:

Читабельность не очень хорошая, и вы могли бы получить нечто подобное, чтобы избежать беспорядка:

И ваши семь строк превратились почти в 40 строк. Это всего три-четыре свойства на объект. Будь это восемь свойств, это стало бы 70 строк.

Идея, о которой я говорю, заключается в том, чтобы использовать что-то вроде этого (я называю это кодом с отступлением в столбце):

Второй пример

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

Его можно использовать в JS import тоже. Сравните эти две версии:

Эти тринадцать импортов упорядочены по алфавиту пути. Все они из vs папка — пять от vs/base и восемь от vs/platform.

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

Теперь посмотрите, как это выглядит, когда тот же код имеет отступление столбца:

Разве это не делает его получше?

Третий пример

В этом примере мы имеем объявление метода от компилятора TypeScript:

Опять же вы можете легче увидеть разницу между линиями. Это помогает читать все пять строк одновременно, тратя гораздо меньше усилий. И если вам нужно добавить параметр в каждую из этих 5 строк, вы можете сделать это только один раз, используя многострочный курсор почти во всех редакторах кода.

Четвертый пример

Вот последний пример вместе с оригиналом и сравнением:

плюсы:

  • Ваш код выглядит более чистым.
  • Ваш код стал более читабельным
  • Вы можете уменьшить количество строк в своем коде

минусы:

  • Опция автоматического форматирования редакторов кода может мешать макете
  • Добавляя одну строку в блок строк, иногда нужно изменить все остальные строки
  • Написание кода может занять много времени

Какие инструменты могут этого достичь?

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

Я использую Visual Studio и Visual Studio Code, поэтому я попытался найти расширение или плагин, который поможет добиться этого. Я не нашел ни одного. Поэтому в ноябре 2017 года я начал создавать собственное расширение Visual Studio Code и назвал его Smart Column Indenter.

Я опубликовал первый пригоден для использования версия в том же месяце. Посмотрите, как это работает:

1*gIMmQyMNnEpLgqAUcDTOUA
«Умный инструмент отступления столбцов» для Visual Studio Code

Есть области, где расширение можно улучшить. Пока он работает только с *.ts, *.js и *.json файлы. Я думаю, что это также может помочь с файлами XML и HTML, например отступления столбцов одинаковых атрибутов повторяющихся тегов или различных тегов, которые повторяются в группе строк.

Когда код выбран для отступления столбца, алгоритм работает в три шага:

  1. Лексический анализ (или токенизация) кода. Я установил пакет TypeScript npm в качестве зависимости и использовал API компилятора, чтобы не изобретать колесо.
  2. Выполните алгоритм самой длинной совместной подпоследовательности (LCS), передавая каждую строку кода в качестве последовательности маркеров. Это трудная часть. Многие ссылки в Интернете говорят о LCS только для двух последовательностей как входных данных, что легко решить с помощью динамическое программирование. Поскольку мы обычно хотим отступить столбец более двух строк кода, проблемой становится поиск самой длинной совместной последовательности (LCS) из нескольких строк. Это NP-сложная проблема. Поскольку это общая проблема, я создал отдельный пакет npm (multiple-lcs) с базовой реализацией для его решения. В некоторых случаях это не самое лучшее решение, но оно действенное.
  3. Перепишите код, чтобы отступить столбцы токенов, появляющиеся в LCS. Каждый маркер у LCS помещается в новый столбец.

Для некоторых типов маркеров, таких как строки или имена переменных, имя типа используется вместо содержимого в алгоритме LCS. Результатом является большая подпоследовательность.

Я поместил всю логику в отдельный пакет npm (smart-column-indenter). Если вы хотите создать подобное расширение или плагин для другой IDE на основе JavaScript, вы можете использовать этот пакет.

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

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

Спасибо, что прочли.

Обновление (2018–03–29): После того, как он был опубликован несколько дней назад, я получил много отзывов, большинство из них отрицательные, но все равно спасибо всем, хорошо знать, почему многим людям это не нравится. Позже я узнал, что люди обычно называют это «выравнивание кода», вы не найдете ничего об «отступах столбцов», поэтому, если вы хотите узнать больше об этом, ищите «выравнивание кода». Я сделал это, и я нашел интересную публикацию в блоге Теренса Идена, поскольку большинство негативных комментариев касаются проблем со слиянием VCS, историей и грязными отличиями, я скопирую его вывод: «Если наши инструменты улучшат понимание этих идей сложно, изменить нужно инструменты, а не нас».

Обновление (2018–05–03): Как будто кто-то из команды GitHub прочитал негативные комментарии относительно выравнивания кода, теперь вы можете игнорировать пробелы при просмотре кода.

Обновление (2018–05–20): Если вы используете Visual Studio (не Code), Shadman Kudchikar сделал подобное расширение, вы можете прочесть об этом здесь или скачать его здесь.

Factoid

Теперь у нас есть 22-дюймовые экраны с разрешением 1920×1080. Нет причин ограничивать себя 80 символами на строчку, хотя вам нужно определиться с максимальным ограничением. Происхождение этого ограничения составляет 80 символов:

1*UV-JCMR337fEAsvCF2eVuw
Не один человек задумывался над этим.

Добавить комментарий

Ваш адрес email не будет опубликован.