Сводите свой код в салон красоты вместе с ESLint

Код-стайл — неотъемлемая часть процесса разработки программного обеспечения. И, пожалуй, одна из самых сложных вещей в командной разработке — это совместно придти к общему стилю.

Почему это важно?

Единообразие в написании кода упрощает его сопровождение и командную работу. Разработчики могут быстрее адаптироваться к новым модулям или файлам, поскольку они уже знакомы с установленным стилем написания кода — обезличенный код способен снижать когнитивную нагрузку.

Код становится единообразным, когда становится сложно понять, кто его написал.

И когда одну и ту же вещь можно сделать несколькими способами, на помощь приходят линтеры и устанавливают единый «правильный» путь.

ESLint Plugin Perfectionist

В попытках сделать ESLint строже и сильнее унифицировать код на проекте, я написал свой плагин для ESLint — Perfectionist.

Данный плагин сортирует импорты, объекты, TypeScript интерфейсы и типы, JSX-пропсы и другие штуки.

В плагине три типа сортировки: по алфавиту, естественная сортировка (схожая с алфавитной, но ближе к людям) и сортировка по длине строки (на скрине выше пример как раз сортировки по длине строки).

На текущий момент ESLint Plugin Perfectionist насчитывает 12 правил и каждое можно настроить под себя.

Как начать использовать?

Прежде всего необходимо установить на проекте сам ESLint:

npm install --save-dev eslint 

Далее, устанавливаем плагин:

npm install --save-dev eslint-plugin-perfectionist 

Самый простой способ начать использовать плагин это импортировать один из трёх готовых конфигов в свой .eslintrc конфиг. Например, конфиг с алфавитной сортировкой:

{   "extends": [     "plugin:perfectionist/recommended-alphabetical"   ] } 

Подробнее о других конфигурациях и настройках отдельных правил в документации.

После чего линтер покажет большое количество ошибок в коде. Но это не проблема, поскольку все правила плагина являются fixable. Это значит, что после установки ничего не нужно исправлять руками, достаточно выполнить команду eslint с флагом —fix и плагин везде всё поправит сам.

Пусть линтер будет строже, а код красивее!

Спасибо за внимание

https://github.com/azat-io/eslint-plugin-perfectionist