- PVSM.RU - https://www.pvsm.ru -

Почему роботы должны форматировать код за нас

image

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

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

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

Несколько примеров

После прочтения “The Programmers’ Stone [1]”, я еще долгое время ставил скобки таким образом:

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)
  ;
}

На мой взгляд, это также способствует рефакторингу в случае перемещения запятых [2]:

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

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

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

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

const volume = 200;  // ml

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

Что делают разработчики JavaScript

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

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

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

В некоторых языках есть строгие стили кодирования, а также инструменты для форматирования кода. Таким образом, разработчики не тратят время на рассуждения о стиле кодирования. Взгляните на Refmt [7] для Reason или на Rustfmt [8] для Rust.

Кажется, что у JavaScript наконец-то имеется решение [9] этой проблемы. Новый инструмент под названием Prettier [10]переформатирует ваш код в соответствии со своими правилами. Он совершенно не учитывает изначальный вид кода.

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

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 уже используется некоторыми популярными проектами [12], такими как React или Babel. И я начинаю переделывать свои проекты [13], отходя от своего привычного стиля кодирования, в пользу Prettier’a. Я бы порекомендовал использовать его вместо стиля кодирования Airbnb.

В начале моей работы с Prettier’ом было много моментов, когда я думал “фу, это ужасно”. Но когда я думаю, что мне нужно было бы, например, вручную форматировать код JSX из однострочного вида в многострочный, если я добавляю еще один prop и это не умещается в одну строку — тогда я понимаю, что оно абсолютно точно стоит того.

image

Prettier форматирует ваш код, когда вы сохраняете файл.

Прочитайте, как внедрить Prettier [14] в свой проект.

P.S. Посмотрите на мое новое средство [15], которое упростит добавление ESLint, Prettier и других инструментов в ваш проект, а также хранение и синхронизацию их настроек.


Перевод выполнен при поддержке компании EDISON Software [16], которая профессионально занимается разработкой на Amiro.CMS [17] и WordPress [18] и для крупных заказчиков.

Автор: MagisterLudi

Источник [19]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/266076

Ссылки в тексте:

[1] The Programmers’ Stone: https://www.datapacrat.com/Opinion/Reciprocality/r0/index.html

[2] перемещения запятых: https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8

[3] популярных стилей написания кода: http://blog.sapegin.me/all/javascript-code-styles

[4] Airbnb: http://airbnb.io/javascript/

[5] Standard: https://standardjs.com/

[6] ESLint: https://eslint.org/

[7] Refmt: https://reasonml.github.io/guide/what-and-why

[8] Rustfmt: https://github.com/rust-lang-nursery/rustfmt

[9] имеется решение: http://jlongster.com/A-Prettier-Formatter

[10] Prettier : https://github.com/prettier/prettier

[11] работу Prettier: https://prettier.github.io/prettier/

[12] некоторыми популярными проектами: https://github.com/prettier/prettier/issues/1351

[13] переделывать свои проекты: https://github.com/tamiadev/eslint-config-tamia

[14] внедрить Prettier: https://survivejs.com/maintenance/code-quality/code-formatting/

[15] мое новое средство: https://github.com/sapegin/mrm

[16] EDISON Software: https://www.edsd.ru/

[17] Amiro.CMS: https://www.edsd.ru/razrabotka-sajtov-na-amiro-cms

[18] WordPress: https://www.edsd.ru/korporativnye-sajty-na-wordpress

[19] Источник: https://habrahabr.ru/post/340304/