После прочтения Камня программиста я долго ставил такие скобки:

if (food === 'pizza')
{
    alert('Pizza ;-)');  
}
else
{  
    alert('Not pizza ;-(');
}

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

if (food === 'pizza') {
    alert('Pizza ;-)');  
} else {
    alert('Not pizza ;-(');
}

Или это:

if (food === 'pizza') {
    alert('Pizza ;-)');  
}
else {  
    alert('Not pizza ;-(');
}

Так что я сменил свой стиль на последний.

Мне очень нравится этот стиль цепочки:

function foo(items) {
  return items
    .filter(item => item.checked)
    .map(item => item.value)
  ;
}

Я вижу те же преимущества рефакторинга, что и для конечных запятых:

const food = [
  'pizza',
  'burger',
  'pasta',
]

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

Есть еще кое-что, чем никто, кроме меня, не занимается. Я всегда ставлю два пробела перед комментарием в конце строки:

const volume = 200;  // ml

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

Чем занимаются разработчики JavaScript

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

Вы можете использовать ESLint для обеспечения соблюдения стиля кода и даже в некоторых случаях для автоматического форматирования кода. Но это не сделает вашу кодовую базу на 100% последовательной. ESLint с конфигурацией Airbnb нормализует только мой первый пример и допустит несогласованность в двух других примерах.

Что должны делать разработчики JavaScript

Некоторые языки имеют строгие стили кода и инструменты для форматирования кода. Так что разработчики не тратят время на споры о стиле кода. Посмотрите Refmt для Reason и Rustfmt для Rust.

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

Давайте попробуем Prettier на моих примерах:

if (food === 'pizza') {
  alert('Pizza ;-)');
} else {
  alert('Not pizza ;-(');
}

function foo(items) {
  return items.filter(item => item.checked).map(item => item.value);
}

const volume = 200; // ml

Вы можете не согласиться с этим стилем. Например, мне не нравится else размещение и написание цепочек функций в одну строку вызывает сомнения. Но я вижу огромные преимущества в использовании Prettier:

  • Практически никаких решений - у Prettier мало вариантов.
  • Никаких споров о конкретных правилах, если вы работаете в команде.
  • Участникам не нужно изучать стиль кода вашего проекта.
  • Нет необходимости исправлять проблемы стиля, о которых сообщает ESLint.
  • Можно настроить автоформат при сохранении файла.

Заключение

Prettier уже был принят некоторыми популярными проектами, такими как React и Babel. И я начинаю конвертировать все свои проекты из собственного стиля кода в Prettier. Я рекомендую его вместо стиля кода Airbnb.

Сначала у меня было много моментов типа «Ух, это мерзко» с Prettier. Но когда я думаю, что мне придется, например, вручную переформатировать JSX-код из однострочного в многострочный, когда я добавляю еще одну опору, а она не умещается в одной строке, я понимаю, что это того стоит.

Прочтите, как настроить Prettier в своем проекте.

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

Подпишитесь на мою рассылку: https://tinyletter.com/sapegin