Love Frontend
Сообщество
фронтенд разработчиков
EN

Стиль кода с eslint-configs. Что такое preset и обзор популярных наборов правил

Дата публикации: 21.10.2017

Линтеры существуют практически для всех языков программирования и их применение является хорошей практикой для профессионального разработчика. С помощью правил заданных в конфигурации eslint можно настроить много полезных фишек для форматирования вашего JS кода. К примеру, линтер видит что вы задекларировали переменную, но ни разу не воспользовались ей в своём коде. Это определенно плохая практика. Или использование ==, вместо ===. Такие важные правила включены практически в любой конфиг. Теперь рассмотрим что же такое конфигурация линтера eslint-config или как еще вы можете услышать от некоторых людей (preset)

eslint-config

eslint-config - это конфигурационный файл, описывающий все правила линтования. Как правило лежит в корневой папке сайта в формате: .js, .json, .yml, .eslintrc. По умолчанию линтер использует правила конфигурации с названием eslint. Самое важное в использовании линтеров отнюдь не соблюдение каких-то правил для "правильного" кода. Если ваш код изначально работает неправильно, то вас не спасёт никакой линтер. Конечно критические правила, которые используются практически во всех конфигах помогают вырабатывать хорошие привычки при написании кода. Но также одной из важнейших причин использования линтера, является доступность вашего проекта другим разработчикам. Этот аспект очень важен в проектах с открытым исходным кодом или в большой команде, где есть свой style guide. Только представьте как это круто иметь привычку писать код в одном формате и потом встретить на github модуль, весь код которого оформлен в привычном вам стиле. Это позволяет нам действительно быстро понимать друг друга, пометив свой модуль значком о стиле кода (code style) вы дадите понять, что ваш код оформлен в соответствии с таким стилем, тем самым вы понизите порог вхождения разработчиков в ваш проект, а приверженцы этого же стиля форматирования будут просто в восторге читать ваш код.

Да, для самых распространённых стилей оформления кода есть свои значки, которые можно вставлять прямо в разметку md (MarkDown). Как правило в ваш README.md файл

И сейчас мы подходим к главной теме самой статьи: Обзор самых популярных code styles (я не включил сюда стандартные конфиги, вроде eslint:recommended и eslint-es, они не задают правил для самого форматирования кода). Конечно есть множество общедоступных (де-факто стандартных) наборов правил, но как правило, львиная доля использования принадлежит небольшому числу таких конфигурационных файлов. Сейчас мы коротко рассмотрим самые популярные расшариваемые конфиг файлы для eslint. Логично что чем популярнее ваш стиль, тем больше разработчиков легко поймут ваш код.

Shareable Configs (расшариваемые конфиги). Общедоступные конфигурации, выложенные как npm пакеты и их использование становится невероятно лёгким. Достаточно прописать в вашем конфигурационном файле строку с названием конфига:

   {
"extends": "starndard"
}

Standard

Да, он так и называется: JavaScript Standard Style, это не означает, что он является веб стандартом, но название конечно выбрали мощное. И это самый популярный набор правил, который используют в своём коде сам GitHub, NPM, MongoDB, Atom, Express и ещё очень много кто. Да, с большой вероятностью ваш код будет привычно читать большое количество разработчиков. И вы привыкнув к такому форматированию будете легче ориентироваться в других проектах.

Практически для всех распространённых конфигов есть свои плагины для любых текстовых редакторов, которые показывают вам ошибки сразу при написании кода, а не на этапе его сборки. Очень удобно. Сам пользуюсь в Atom'е. Также не забывайте, что вы можете запустить eslint с флагом --fix и он сам отформатирует ваш код.

Я не буду расписывать все правила для каждого конфига, со всеми правилами вы можете ознакомиться на официальных страницах проектов: Stanrdard js, но я приведу куски кода, чтобы вы сразу визуально поняли стиль форматирования.

   if (checkSomething) {
go = 'good'
bad = 'yeah'
}
animation (forward, endPoint) {
good = 'bad'
}

Что сразу бросается в глаза: отступы - два пробела, пробелы между круглыми скобками и функциями, между скобками и операторами. Отсутствие пустых строк в начале и конце функций. И конечно же отсутствие ; точки с запятой, на английском: semicolons

После того, как отлинтуете весь свой код в соответствие с данной конфигурацией, можете пометить ваш проект значком (badge), который сразу идентифицирует code style вашего проекта. Standard имеет две вариации значков:

JavaScript Semi-Standard Style

Как вы могли заметить к названию этого конфига просто добавлено спереди semi. И как вы догадались, это означает всего лишь добавление правила точки с запятой. То есть используя этот стиль оформления кода, нужно обязательно ставить в конфе инструкций и операторов JS semicolon - ;

Это всё. Реально все правила взяты из конфига Standard и просто добавляете точку с запятой.

   if (checkSomething) {
go = 'good';
bad = 'yeah';
}
animation (forward, endPoint) {
good = 'bad';
}

Happiness

Не забывайте, что для всех этих конфигов, вы просто должны прописать в вашем файле конфигурации название расшариваемого конфига, для данного примера: "extends": "happiness"

Это тот же semi-standard, но в отличие от semi-standard и самого standard для отступов используется табуляция. (да извечный спор, что лучше табы или пробелы)

Airbnb

Также очень популярный набор правил. Название соответствует названию компании. Всё что нужно знать, прекрасно описано в их репозитории: airbnb/javascript

Для общего представления и знакомства с наиболее популярными пресетами этого должно хватить, но я оставлю этот список распространённых конфигов здесь, для тех кого заинтересовали различные code styles.

Стоит отметить, что наборов правил существует огромное количество и даже устанавливая плагин для вашего редактора, вы можете увидеть в настройках те же названия стилей, но с разными постфиксами, которые обозначают отклонения от самого файла конфигурации. Не важно какой стиль вам больше нравится и какой вы выберите, главное чтобы был хоть какой-то. Серьезно. Конечно в ваших же интересах пользоваться наиболее популярными eslint-config'ами

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.