Подключаем eslint и prettier – ReactJS Полный курс
При работе с ReactJS очень важно следить за качеством кода, чтобы проект был чистым и понятным для всех участников команды. Для этого часто используются инструменты linting и форматирования кода, такие как eslint и prettier.
Давайте разберем, как подключить эти инструменты к нашему проекту ReactJS.
Шаг 1: Установка eslint и prettier
Сначала нам нужно установить eslint и prettier через npm:
npm install eslint prettier
Шаг 2: Создание конфигурационных файлов
Далее создадим конфигурационные файлы для eslint и prettier. Для eslint это файл .eslintrc:
touch .eslintrc
Для prettier – файл .prettierrc:
touch .prettierrc
Шаг 3: Настройка eslint и prettier
Откроем созданные файлы и добавим необходимые настройки. Например, в файл .eslintrc мы можем добавить правила для проверки кода:
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
В файле .prettierrc добавим настройки форматирования кода:
{
"singleQuote": true,
"semi": false
}
Шаг 4: Добавление скриптов в package.json
Наконец, добавим скрипты для запуска eslint и prettier в файл package.json:
"scripts": {
"lint": "eslint .",
"format": "prettier --write ."
}
Шаг 5: Запуск инструментов
Теперь мы можем запустить eslint и prettier для проверки и форматирования нашего кода:
npm run lint
npm run format
С помощью eslint и prettier мы можем значительно улучшить качество нашего кода и сделать проект более понятным и поддерживаемым. Благодаря этим инструментам мы сможем быстрее исправлять ошибки и соблюдать единый стиль кодирования в команде.
Если у кого-то форматирование во время сохранения не работает – надо в Настройках -> Editor: Default Formatter выбрать Prettier
в реакте же из коробки уже 4 скрипта должно быть
Женя, а если мы просто используем расширение для VS Code – "Prettier – Code formatter"? Этого достаточно самого по себе? с ручным форматированием или автоматическим при сохранении файла …. для чего тогда ещё устанавливать зависимость и делать форматирование с помощью npm команды "prettier –write ." …. Это разве то же самое?
И ещё там есть интересное расширение для VS Code – "Prettier – ESLint" ? оно для чего? просто делает сразу 2 в 1 ? )
Решение с автосохранением интересное, но увы, не всегда применимое. Например, когда ты пришел на проект в котором в репозитории, на сервере не подключена автопроверка в CI'ке. Получится ситуация когда ты с этими автоформатированиями при сохранении будешь изменять любой файл, не только своим кодом, но и будет форматироваться чужой код (файл форматируется целиком, а не только новый код). В таких случаях остается 2 варианта: 1) настаивать на более строгой настройке в CI или 2) довольствоваться простой подсветкой проблемных мест с помощью es-lint.
🎉🎉🎉