Написание кода - это достаточно сложно, не усложняйте его из-за плохого форматирования

Форматирование кода: это не только для приверженцев и грамматических нацистов

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

Теперь, когда я привлек всеобщее внимание, позвольте мне дать вам гипотетический (реальный) пример того, с чем вы можете столкнуться при открытии существующей базы кода JavaScript, которую собрала команда разработчиков.

Вы можете увидеть некоторые (или все) из следующего:

  • Отсутствующие точки с запятой,
  • Тонны пробелов между одними строками и без пробелов между другими,
  • Запускайте строки, которые заставляют вас прокручивать вправо целую вечность, чтобы увидеть все, что они содержат,
  • Казалось бы, случайный отступ,
  • Закомментированные фрагменты кода,
  • Инициализированные, но неиспользуемые переменные,
  • Некоторые файлы, в которых используется «строгий» JS, а другие - нет,
  • Блоки кода без пробелов и комментариев, что значительно усложняет их чтение и расшифровку происходящего.

Возьмите этот фрагмент кода из базы кода, над которой я сейчас работаю:

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

Как вы уже, наверное, догадались, то, с чем один разработчик отлично справляется (нигде нет пробелов), вероятно, сводит с ума другого. И хотя один разработчик может каждый раз идеально отделять каждую строку, другой разработчик, вероятно, не заботится (и знает, что JavaScript тоже не заботится слишком сильно, так что ему / ей это может сойти с рук).

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

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

Вот что подводит меня к сегодняшнему сообщению.

Сегодня я собираюсь волшебным образом устранить несоответствия кода множества разных разработчиков с помощью Visual Studio Code, Prettier и ESLint и оставить вам красивый унифицированный код, который выиграла ваша команда разработчиков » т даже думать о форматировании.

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

VS Code и плагины на помощь

Хорошо, давайте сразу перейдем к решениям проблем с форматированием кода. Если вы не знакомы с этим, VS Code сегодня де-факто JavaScript IDE.

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

До этого я был сторонником всех вещей JetBrains, таких как WebStorm и IntelliJ, но, попробовав Visual Studio Code, меня продали.

Что приводит к…

Шаг 1, если вы еще не загрузили его, скачайте VS Code прямо сейчас. Решить эту проблему форматирования и согласованности кода - важнейшая часть нашей головоломки.

Шаг 2, начало работы с плагинами. Одна из моих любимых вещей в VS Code - это чрезвычайно надежная экосистема плагинов и простота интеграции этих плагинов. Вы настраиваете их один раз, потом можете забыть о них, и они просто продолжают работать, проект за проектом.

Сегодня в вашем арсенале есть два плагина: Prettier и ESLint.

Если вы откроете вкладку «Расширения» сбоку от окна VS Code, вы увидите множество расширений, созданных для VS Code.

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

Красивее

Очень просто, Prettier - это «пакет VS Code для форматирования вашего JavaScript / TypeScript / CSS» - сайт Prettier

На практике Prettier - это самоуверенный форматировщик кода, который выполняет всевозможные полезные вещи, например:

  • Заменяет все одинарные кавычки на двойные,
  • Добавляет пропущенные точки с запятой,
  • Помещает пробелы между фигурными скобками или скобками и переменными,
  • Устанавливает стандартную ширину табуляции.

Это лишь малая часть того, что заботит Prettier, и в VS Code очень легко переопределить любые правила, которые вам не нравятся, о чем я немного расскажу.

Prettier создан для обеспечения единообразия форматирования кода, а плагин VS Code будет работать с файлом .prettierrc в проекте или без него (хотя это, вероятно, хорошая рекомендация для команды разработчиков, работающих над базой кода). Это сохранит ваш код чистым и легким для чтения, и будет одинаковым для всех разработчиков в команде.

Один из самых больших преимуществ для меня?

Prettier можно настроить на автоматическое форматирование кода при каждом сохранении.

Мне не нужно думать об этом, мне не нужно настраивать сложные задачи для отслеживания файлов, я меняю один параметр в VS Code, и он просто работает. Каждый раз. Период.

Я тоже покажу вам, как это сделать, но прежде чем я доберусь до него, мне нужно, чтобы вы скачали Prettier для VS Code.

Откройте Extensions Marketplace в окне VS Code (это маленький квадратный рисунок под отладчиком).

Это первый плагин, который вы будете искать в расширениях VS Code. Если вы введете «Красивее» в строку поиска, ваши результаты должны выглядеть примерно так:

Вы видите первый результат? Тот, у которого 5,7 миллиона загрузок и их количество продолжает расти? Это тот, который вы хотите установить. Если вы сомневаетесь, найдите расширение с наибольшим количеством загрузок, которое ближе всего к тому, что, по вашему мнению, название расширения, и используйте его.

Если вы думаете, что кнопки «Установить» в VS Code выглядят как ярлыки или баннеры, а не как готовые, нажимаемые кнопки, я согласен с вами. Но это обсуждение на другой день.

После установки расширения Prettier мы готовы перейти к нашему второму плагину: ESLint.

ESLint

Суть ESLint заключается в следующем: «JavaScript, будучи динамическим языком со слабой типизацией, особенно подвержен ошибкам разработчика. Без преимущества процесса компиляции код JavaScript обычно выполняется для поиска синтаксиса или других ошибок. Инструменты линтинга, такие как ESLint, позволяют разработчикам обнаруживать проблемы в своем коде JavaScript, не выполняя его ». - Сайт ESLint

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

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

Плагин ESLint для VS Code является расширением официальной утилиты ESLint с открытым исходным кодом, используемой такими компаниями, как Google, Facebook, Netflix и другими.

Если ESLint им подходит, то и мне.

Вот что вы увидите при поиске ESLint на торговой площадке расширений VS Code:

Одним из самых больших преимуществ ESLint является то, что каждое «правило», установленное в ESLint, является полностью автономным. Каждый из них может быть включен или выключен, могут быть добавлены новые правила, ненужные правила можно игнорировать, и есть масса правил, которые уже задокументированы, чтобы быть включенными с помощью всего лишь строчки кода.

По умолчанию правила не включены, поэтому вы можете добавлять их по своему усмотрению, но многие команды разработчиков любят начинать с чего-то вроде файла ESLint Airbnb, который упакован в виде удобного модуля NPM (npm i eslint-config-airbnb), и приспосабливайте их к своим потребностям.

Кстати: все руководство по стилю Airbnb - отличный пример того, как в целом подходить к написанию JavaScript. Я полагаю, 79000+ звезд на Github - довольно хороший показатель качества. Но опять же, это касательная к другому сообщению.

А пока давайте загрузим Prettier и ESLint и перейдем к их запуску в VS Code.

Установка и настройка Prettier и ESLint

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

После того, как вы скачали эти плагины, пора их включить.

Чтобы убедиться, что ваши новые плагины установлены и включены, пока все еще находится на экране расширений, вы можете щелкнуть три точки в правом верхнем углу поля поиска и выбрать «Показать установленные расширения» или «Показать включенные расширения» в раскрывающемся списке. , и если ваши новые расширения загружены / включены, там будут отображаться ESLint и Prettier.

Если какой-либо из них не включен, просто нажмите на расширение и нажмите кнопку «Включить» (да, это похоже на ярлык, но это кнопка). Затем перезапустите программу VS Code, чтобы изменения вступили в силу.

Настройки пользователя по умолчанию

Отлично, теперь оба плагина должны быть включены, и мы готовы приступить к работе. Как я уже сказал, Prettier имеет множество настроек, включенных по умолчанию, и вы можете точно увидеть, что включено / отключено, и внести любые изменения, которые должны вступить в силу глобально, здесь.

Чтобы перейти к этим настройкам, перейдите в Код ›Настройки› Настройки и выполните поиск «красивее» в поле ввода. После того, как вы войдете в общие настройки, нажмите фигурные скобки в правом верхнем углу окна, и вы перейдете в «Настройки пользователя по умолчанию», где вы сможете увидеть все настройки Prettier и их значения по умолчанию.

Отсюда вы можете сделать то же самое, введя «eslint» в поле поиска, и увидеть все правила, установленные по умолчанию для этого расширения.

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

Пользовательские настройки пользователя

VS Code предлагает этот действительно удобный способ переопределить любые настройки по умолчанию определенных расширений с помощью того, что он называет «Пользовательскими настройками».

Все это - файл, который VS Code генерирует с настройками, специфичными для вашего текстового редактора. Если вы хотите переопределить определенное правило, просто наведите курсор на правило, которое нужно изменить, затем щелкните карандаш, который появляется слева, и откроется новое окно с названием «Настройки пользователя» и добавит это правило в качестве изменяемой настройки. .

Вот пример того, как мои пользовательские настройки выглядят справа на скриншоте ниже. Я перезаписал пару настроек Prettier: singleQuote и trailingComma, а также включил функцию autoFixOnSave ESLint.

Однако, безусловно, лучшее, что я использовал, - это Prettier formatOnSave, так что мне даже не нужно об этом думать. Это было сделано с помощью следующего фрагмента кода.

"[javascript]": {
    "editor.formatOnSave": true
}

Prettier использует formatOnSave для каждого языка, поэтому, если вы хотите добавить форматирование для CSS, HTML или какого-либо другого языка, вам просто нужно добавить его сюда. И тогда все готово.

Внесите изменение в файл JavaScript, сохраните изменение, и код переформатируется в соответствии с Prettier. Это великолепно. Поистине, одна из моих любимых функций, безусловно.

Файлы конфигурации для конкретного проекта

И, наконец, файлы конфигурации для конкретного проекта. Это больше относится к ESLint, чем к Prettier (из-за настроек Prettier по умолчанию), но я бы порекомендовал команде .prettierrc файл для конкретного проекта.

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

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

Это урезанный, но вы поняли идею. Любые правила, которые необходимо нарушить, добавляются в конец файла.

И как только этот файл присутствует, если есть нарушение правила, он появится в разделе «Проблемы», где встроенный терминал запускается в окне VS Code.

Без файла .eslintrc для конкретного проекта, если у вас нет большого количества жестких и быстрых правил, которые вы хотите установить в своих пользовательских настройках, вы не получите большой помощи от ESLint. Лично мне нравится файл ESLint для конкретного проекта, он дает кристально ясное представление о правилах и стандартах, и в отличие от Prettier, который по умолчанию очень самоуверен, ESLint не будет жаловаться, пока вы не сообщите об этом.

Подводя итог, можно сказать, что параметры конфигурации в VS Code немного похожи на CSS и его правила специфичности - чем конкретнее файл настроек, тем выше приоритет, который ему придает VS Code. Если нет файла конфигурации для конкретного проекта, VS Code возвращается к пользовательским настройкам, а если пользовательских настроек нет, в последнюю очередь ищет настройки по умолчанию.

Заключение

Вот и все. Теперь ваша команда разработчиков настроена на успех - по крайней мере, когда дело доходит до согласованного, хорошо отформатированного и чистого кода JavaScript. VS Code упрощает реализацию тщательного анализа кода и самоуверенного форматирования кода с минимальными усилиями со стороны разработчика. Нет причин не соглашаться с этим.

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

Вернитесь через несколько недель, я буду писать чтение действительно больших файлов на Java (продолжение моей серии из двух частей о чтении действительно больших файлов с помощью Node.js) или что-то еще, связанное с веб-разработкой, поэтому, пожалуйста, следите меня, чтобы вы не пропустили.

Спасибо за чтение, я надеюсь, что это дает вам представление о том, как легко поддерживать соответствие вашего кода с Prettier и ESLint. Мы очень ценим аплодисменты и акции!

Если вам понравилось это читать, возможно, вам понравятся и другие мои блоги:

Ссылки и дополнительные ресурсы: