Как настроить Prettier, ESLint, Stylelint и Husky в проекте с нуля

В одном из прошлых постов мы говорили о таких инструментах, как Prettier, ESLint и Stylelint, и чем они отличаются. А сегодня мы попробуем поэтапно настроить все три библиотеки на нашем проекте, а также настроить прекоммитную проверку с помощью Husky и lint-staged.

В качестве примера проекта будем использовать шаблон react-ts на vite. Начнем нашу настройку с Prettier, так как он требует минимальной конфигурации.

Prettier

Устанавливаем пакет, используя команду:

npm install --save-dev --save-exact prettier

Далее создаем файл .prettierrc с пустыми фигурными скобками ({}) - это нужно для того, чтобы IDE знали о том, что вы используете Prettier на своем проекте.

После этого установим плагин для Prettier в IDE. Для VSCode он выглядит так:

Дальше в настройках IDE нужно указать, каким форматтером мы пользуемся:

А также можно выставить опцию, которая позволяет IDE автоматически форматировать файлы после сохранения:

Готово! Теперь проект будет форматироваться с помощью Prettier. Вот как это работает:

Однако, Prettier не будет подчеркивать неправильный код, например такой:

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

Аналогично с CSS, такой код никак не будет валидироваться в IDE:

Чтобы добиться более серьезной валидации кода, нам нужно подключить и использовать ESLint и Stylelint. Поэтому подключим и настроим две эти библиотеки.

ESLint

Устанавливаем пакет, согласно документации:

npm init @eslint/config@latest

В процессе выполнения данной команды предлагается несколько вопросов, отвечаем на них исходя из нашего проекта и того, что мы хотим:

После этого в директории у нас появляется автоматически сгенерированный файл eslint.config.js с первоначальными настройками.

Далее устанавливаем плагин для IDE, если он еще не установлен:

И сразу после этого мы начинаем видеть базовые подсказки в IDE:

Однако, так как мы используем на нашем проекте Prettier, нужно донастроить ESLint так, чтобы их правила не конфликтовали друг с другом. Для этого можно использовать специальный конфиг для ESLint eslint-config-prettier.

Устанавливаем пакет:

npm install --save-dev eslint-config-prettier

И затем добавляем новую конфигурацию в eslint.config.js:

Также вы можете указать в настройках VSCode, какие действия и когда нужно запускать при сохранении файла:

Готово! Теперь после сохранения файла IDE автоматически заменит неправильный код, если такое возможно:

При установке ESLint также поставились рекомендованные конфиги для React, однако не все правила в этих конфигах нам подходят. Например, правило о том, что в файле с JSX должен быть явно указан импорт React:

Т.к. мы знаем название правила, то легко можем переопределить его в нашем конфиге:

И теперь ошибка больше не подчеркивается:

Кроме этого, добавим сортировку импортов. В ESLint есть правило, которое проверяет сортировку - sort-imports, однако оно не обеспечивает автоматическую перестановку строк.

Воспользуемся сторонним плагином eslint-plugin-simple-import-sort.

Установим его с помощью команды:

npm install --save-dev eslint-plugin-simple-import-sort

А затем добавим нужные настройки в наш конфиг:

Возможно, потребуется перезапутить IDE.

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

После того как мы пересохраним наш файл, в IDE сработает автоматическое исправление и импорты будут отсортированы:

Готово! Осталось подключить линтер к нашим CSS-файлам, и для этого будем использовать Stylelint.

Stylelint

Устанавливаем пакет:

npm init stylelint

В проекте также появился файл со стандартными настройками:

Устанавливаем плагин в IDE:

И расширяем настройки самой IDE, чтобы у нас также работало автоматическое исправление:

Теперь даже без дополнительной настройки IDE уже подсказывает какие-то моменты в файлах CSS:

Добавим явный запрет на использование !important и общего селектора *:

Теперь IDE подчеркивает в нашем коде некорректные моменты:

Последний шаг - это настройка pre-commit hook в git, чтобы измененные файлы проверялись с помощью ESLint и Stylelint.

Husky и lint-staged

По документации устанавливаем и настраиваем husky:

npm install --save-dev husky
npx husky init

У нас появился файл .husky/pre-commit, в котором нужно будет указать то, что необходимо выполнить перед коммитом. Именно там должна быть команда проверки наших измененных файлов.

Для того, чтобы проверять только файлы, которые изменились, можно использовать пакет lint-staged. Устанавливаем его:

npm install --save-dev lint-staged

Настраиваем, добавляя секцию lint-staged в package.json, где указываем, каким линтером для каких файлов пользоваться:

Теперь в файл .pre-commit добавляем команду для его запуска:

Готово! Теперь при попытке закоммитить что-то не то в измененных файлах будет выпадать ошибка.

Lint-staged может быть особенно полезен, если вы добавляете линтеры на проект с большой кодовой базой и не хотите разом обновлять все файлы в проекте.

📂 Подробнее пример как всегда можно посмотреть в моём GitHub