- PVSM.RU - https://www.pvsm.ru -
Раньше я думал, что иметь индивидуальный стиль кодирования это хорошо для программиста. Это показывает, что вы опытный разработчик, который знает, как должен выглядеть хороший код.
В колледже мои преподаватели говорили, что они понимают, когда мои однокурсники используют мой код в своих работах из-за особого стиля кодирования. Сейчас я думаю, что они понимали это потому, что мой код был по крайней мере хоть как-то отформатирован, в то время как у других была полная неразбериха.
С тех пор я потратил много времени, рассуждая о стиле кодирования и выбирая инструменты для его осуществления. Настало время что-то менять.
После прочтения “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 нет официального стиля кодирования. Есть несколько популярных стилей написания кода [3], таких как Airbnb [4] или Standard [5]. Вы можете использовать их для того, чтобы ваш код выглядел знакомым для других разработчиков.
Вы можете использовать ESLint [6], чтобы задавать стиль кодирования и даже проводить автоформатирование кода. Но это не сделает вашу кодовую базу на 100% согласованной. ESLint c конфигурацией Airbnb упорядочат только первый мой первый пример и создадут противоречия в двух других.
В некоторых языках есть строгие стили кодирования, а также инструменты для форматирования кода. Таким образом, разработчики не тратят время на рассуждения о стиле кодирования. Взгляните на 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 уже используется некоторыми популярными проектами [12], такими как React или Babel. И я начинаю переделывать свои проекты [13], отходя от своего привычного стиля кодирования, в пользу Prettier’a. Я бы порекомендовал использовать его вместо стиля кодирования Airbnb.
В начале моей работы с Prettier’ом было много моментов, когда я думал “фу, это ужасно”. Но когда я думаю, что мне нужно было бы, например, вручную форматировать код JSX из однострочного вида в многострочный, если я добавляю еще один prop и это не умещается в одну строку — тогда я понимаю, что оно абсолютно точно стоит того.
Prettier форматирует ваш код, когда вы сохраняете файл.
Прочитайте, как внедрить Prettier [14] в свой проект.
P.S. Посмотрите на мое новое средство [15], которое упростит добавление ESLint, Prettier и других инструментов в ваш проект, а также хранение и синхронизацию их настроек.
Автор: 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/
Нажмите здесь для печати.