Без форматирования кода вручную
Когда вы новичок в программировании, вы сосредоточены на том, чтобы ваш код работал, а не на том, чтобы он выглядел красиво. Если вы обратите пристальное внимание на код других людей, такой как проекты с открытым исходным кодом и примеры фрагментов в книгах или блогах, вы заметите несколько вещей:
- строки с отступом
- пробелы и новые строки используются последовательно
- строки переносятся, если они превышают некоторый порог
Во многих проектах даже есть официальные руководства по стилю, объясняющие, как эти вещи должны быть реализованы в проекте.
Давайте посмотрим, как привести ваш код в соответствие с онлайн-стандартами красоты!
Разве это не мелочь?
Отличный вопрос! Разве мы не пишем код для машин, и им наплевать на внешний вид? Да, машинам все равно, но люди тоже много потребляют кода — и для них эти маленькие детали могут иметь большое значение.
Согласованность имеет значение
Если вы тратите пять часов в день на чтение кода, вы хотите, чтобы этот опыт был максимально простым. Неожиданный выбор стиля привлекает внимание к вещам, которые не имеют значения, беспричинно беспокоя читателя. Некоторые языки программирования, такие как 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.
Другие языки
Я не знаю подобных инструментов на других языках, но я бы следовал этим рекомендациям, если бы искал какой-то инструмент:
- Независимо от текстового редактора. Обычно интегрированная среда разработки (IDE) может стилизовать ваш код, но не многие разработчики согласились бы переключить свою любимую среду на использование одного и того же инструмента стилизации. Без того, чтобы все использовали один и тот же инструмент, в изменениях кода будет шум стилей — чего мы хотим избежать.
- Интерфейс командной строки (CLI), поэтому вы можете легко интегрировать его с выбранным текстовым редактором, обработчиками git commit или непрерывной интеграцией (CI).
- Самоуверенный. Есть так много вещей, которые можно сделать лучше, чем обсуждать стиль кода. Большинство разработчиков достаточно ленивы, чтобы отказаться от своего стиля в пользу автоматизированного стиля.
Как вы оформляете свой код?
Какие инструменты вы используете для форматирования кода на JavaScript или других языках?
Первоначально опубликовано на https://how-to.dev.