Аватарка пользователя Azat S.
Azat S.

ESLint-плагин для сортировки элементов кода TS/JS

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

457
Обложка поста eslint-plagin-dlya-sortirovki-importov-obektov-typescript-interfejsov-jsx-propsov-i-dr

Все любят, когда код на проекте выглядит единообразно. Но, к сожалению, чем больше программистов на проекте, тем сильнее стилистически отличаются файлы в нём. 

Эту проблему призваны решать линтеры, которые сигнализируют об ошибках в коде.

Я написал свой плагин для 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-natural"
  ]
}
		

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

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

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

GitHub - azat-io/eslint-plugin-perfectionist: 🦄 ESLint plugin for sorting various data such as objects, imports, types, enums, JSX props, etc.
github.com
Следите за новыми постами по любимым темам

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

JavaScript
Инструменты
TypeScript
457
Что думаете?
0 комментариев
Сначала интересные