Без форматирования кода вручную

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

  • строки с отступом
  • пробелы и новые строки используются последовательно
  • строки переносятся, если они превышают некоторый порог

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

Давайте посмотрим, как привести ваш код в соответствие с онлайн-стандартами красоты!

Разве это не мелочь?

Отличный вопрос! Разве мы не пишем код для машин, и им наплевать на внешний вид? Да, машинам все равно, но люди тоже много потребляют кода — и для них эти маленькие детали могут иметь большое значение.

Согласованность имеет значение

Если вы тратите пять часов в день на чтение кода, вы хотите, чтобы этот опыт был максимально простым. Неожиданный выбор стиля привлекает внимание к вещам, которые не имеют значения, беспричинно беспокоя читателя. Некоторые языки программирования, такие как Python, сделали отступ значимой частью синтаксиса языка, чтобы обеспечить разумный отступ. Подобный подход был привнесен в мир JS с помощью CoffeeScript. В какой-то момент довольно популярный язык был скомпилирован в JS.

Значимые различия

Так больно пересматривать ветки, в которых сочетаются:

  • значимые изменения кода
  • бессмысленные изменения стиля

Просто взгляните на скриншот GitHub Pull Requests:

vs.

В обоих случаях смысл изменения одинаков: я удалил sourceMap: true.

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

Инструменты

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

Фронтенд: красивее

Prettier — форматировщик кода, ориентированный на внешний интерфейс. Он поддерживает следующее:

  • код: JS, ТС, JSX
  • стили: CSS, Меньше, SCSS
  • представления: шаблоны HTML, Vue, Ember и Angular, Markdown
  • файлы конфигурации: JSON, YAML

И еще немного с плагинами.

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

Prettier широко распространен в сообществе JS. Он используется основными командами React, Vue и Angular. Стилизация вашего проекта с его помощью сделает ваш код похожим на все остальные, и это хорошо, поскольку он сохраняет согласованность во многих проектах, над которыми работают люди.

питон: черный

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

Другие языки

Я не знаю подобных инструментов на других языках, но я бы следовал этим рекомендациям, если бы искал какой-то инструмент:

  1. Независимо от текстового редактора. Обычно интегрированная среда разработки (IDE) может стилизовать ваш код, но не многие разработчики согласились бы переключить свою любимую среду на использование одного и того же инструмента стилизации. Без того, чтобы все использовали один и тот же инструмент, в изменениях кода будет шум стилей — чего мы хотим избежать.
  2. Интерфейс командной строки (CLI), поэтому вы можете легко интегрировать его с выбранным текстовым редактором, обработчиками git commit или непрерывной интеграцией (CI).
  3. Самоуверенный. Есть так много вещей, которые можно сделать лучше, чем обсуждать стиль кода. Большинство разработчиков достаточно ленивы, чтобы отказаться от своего стиля в пользу автоматизированного стиля.

Как вы оформляете свой код?

Какие инструменты вы используете для форматирования кода на JavaScript или других языках?

Первоначально опубликовано на https://how-to.dev.