Настраиваем автоматическое форматирование кода и проверку на ошибки при помощи Prettier и ESLint согласно стайлгайду Airbnb.
Во время работы над последним проектом я опробовал в деле два прекрасных иструмента, ESLint и Prettier. Захотелось написать о том, что это такое, чем полезен линтер и prettier, как их настроить, и как использовать.
Что такое Lint?
Lint, или линтер - это инструмент для поиска ошибок в коде. Пример работы линтера в проекте Create React App, ниже:
Клавиатура моего ноутбука иногда срабатывает неправильно, и делает двойное нажатие клавиши, вместо однократного. В 8 и в 25 строке опечатка, вместо logo - logoo а вместо App - Appp
Линтер нашел эти ошибки и сообщил о них в терминал. Прекрасно!
Теперь можно их исправить, и все заработает как надо:
ESLint в Create React App и расширение для VS Code
В Create React App линтер уже установлен, он называется ESLint. Именно его сообщения об ошибках мы видим в терминале.
Существует так же ESLint расширение для VS Code:
Установив это расширение в VS Code, получим сообщения ESLint и подсветку ошибок в редакторе кода:
Настройка ESLint
У ESLint есть конфиг, в котором находятся правила, согласно которым он выполняет проверку кода. Как я говорил ранее, ESLint уже встроен в Create React App, и использует конфиг который называется eslint-config-react-app
В Create React App этот конфиг подключается к ESLint в package.json, 22 строка:
Eslint сейчас настроен так, как решили создатели CRA. Давайте инициализируем ESLint и заново сами все настроим, так, как нам необходимо. Для этого выполним команду:
$ npx eslint --init
Запустится мастер настройки ESLint.
Пройдем настройку согласно предложенным вариантам:
В конце мастер создаст файл настроек линтера, .eslintrc.json:
На этом базовая настройка линтера закончена, теперь было бы неплохо расширить его конфигурацию и подключить несколько дополнительных плагинов с правилами.
Установка и подключение дополнительных плагинов ESLint
установим правила ESLint для React:
$ npm install eslint-plugin-react --save-dev
Если вы используете версию React старше 17, и не импортируете React from 'react' можно после установки этого плагина, добавить в конфиг .eslintrc.json строку "plugin:react/jsx-runtime", тогда ESLint не будет ругаться, что 'React' must be in scope when using JSX
В этом случае конфиг будет выглядеть так:
Установим правила для поддержки хуков React, eslint-plugin-react-hooks:
$ npm install eslint-plugin-react-hooks --save-dev
подключим их, добавив строку "plugin:react-hooks/recommended" в .eslintrc.json:
Установим правила доступности для людей с ограниченными возможностями eslint-plugin-jsx-a11y
$ npm install eslint-plugin-jsx-a11y --save-dev
добавляем "plugin:jsx-a11y/recommended" в .eslintrc.json:
установим правила, которые будут отвечать за синтаксис импортов и экспортов eslint-plugin-import
$ npm install eslint-plugin-import --save-dev
добавим "plugin:import/recommended" в .eslintrc.json:
С ESLint мы пока что закончили, переходим к Prettier
Prettier
Prettier. Что это такое и зачем вообще нужно?
Prettier - это инструмент для автоматического форматирования кода.
Форматирование кода - это процесс придания коду определенного вида.
Prettier берет код, который вы ему дали, и преобразует этот код к единому стилю.
Вот простой пример:
Здесь у нас стандартный файл App.js из Create React App проекта, у которого я где то убрал, а где то добавил отступы и точки с запятыми в конце строк, в некоторых местах использовал длинные, плохо читаемые строки.
Prettier автоматически исправил мой код при сохранении файла, добавил нужные отступы, точки с запятыми, а длинные линии кода разбил на более короткие и лучше читаемые блоки. Теперь все выглядит лучше и опрятнее.
Установка Prettier в проект
Установка хорошо описана в официальной документации, пройдем ее вместе, по шагам.
Первым делом устанавливаем Prettier в наш Create React App проект, локально:
$ npm install --save-dev --save-exact prettier
Создаем пустой конфигурационный файл, .prettierrc.json в корне проекта:
$ echo {}> .prettierrc.json
Отключаем конфликтующие правила ESLint
Теперь нужно сделать так, чтобы Prettier не конфликтовал с линтером. Дело в том, что когда ESLint ищет ошибки в коде, он руководствуется определенными правилами, которые хранятся в его конфиге. Эти правила отвечают как за качество кода, так и за стиль кода. Так вот, у Prettier есть свои собственные правила, которые тоже отвечают за стиль кода. Чтобы у линтера и Prettier не было конфликтов по части оформления кода, нужно отключить кофликтующие правила у линтера, чтобы за стиль кода отвечал только Prettier.
Сделать это можно очень просто, установив eslint-config-prettier
ставим:
$ npm install --save-dev eslint-config-prettier
Далее открываем конфиг нашего линтера, (файл .eslintrc.json), и добавляем "prettier" в конец массива:
Cтрока "prettier" в конфиге .eslintrc.json отключает конфликтующие с Prettier правила ESLint.
Теперь Prettier и линтер будут корректно работать вместе.
Мы установили Prettier в наш проект. Давайте теперь добавим поддержку Prettier в VS Code.
Интеграция Prettier в VS Code
Установим расширение Prettier для VS Code:
После того как мы установили расширение Prettier в VS Code, можно сделать так, чтобы Prettier автоматически форматировал наш код, когда мы сохраняем файл. Для этого нужно добавить два значения в JSON конфиг VS Code, (файл settings.json).
Чтобы открыть settings.json нужно, находясь в VS Code, нажать Ctrl + Shift + P, ввести в поиск "settings" и выбрать пункт Open Settings (JSON). Откроется файл settings.json.
Добавим в него следующие строки:
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
Первая строка устанавливает Prettier как инструмент форматирования кода по-умолчанию.
Вторая строка включает форматирование кода при сохранении файла.
.prettierrc.json и .prettierignore
Пара слов об этих двух файлах.
Для чего нужен .prettierrc.json?
.prettierrc.json - это файл конфигурации Prettier.
Перечислю базовые настройки, которые в него можно добавить:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
"trailingComma" - отвечает за висящие, (или "последние") запятые. Можно разрешить Prettier ставить их там, где это возможно, или отключить эту функцию
"tabWidth" - ширина отступа, в пробелах
"semi" - отвечает за добавление точек с запятыми в конце инструкций. Можно добавлять, можно не добавлять
"singleQuote" - отвечает за использование одинарных или двойные кавычек
Мой конфиг .prettierrc.json сейчас выглядит так:
В нем я запретил использование точек с запятыми в конце строк. Такое вот личное предпочтение, при работе над персональными проектами.
В итоге, когда мы сохраняем файл, Prettier будет удалять точки с запятыми в конце строк, если они были, и менять одинарные кавычки на двойные. (замена кавычек на двойные производится по умолчанию, этим поведением можно управлять при помощи параметра "singleQuote")
вот как это выглядит:
Сохранили файл - произошло форматирование кода.
.prettierignore
Файл .prettierignore существует для того, чтобы запретить Prettier форматировать определенные файлы. Какие файлы запретить форматировать, решаете вы. Я добавил туда файл .eslintrc.json, потому что не хочу, чтобы Prettier его трогал:
Установка правил Airbnb для ESLint
Теперь, когда мы настроили ESLint и Prettier в нашем проекте, давайте установим популярный конфиг eslint-config-airbnb, который настроен с учетом стайлгайда по JavaScript от Airbnb
для этого выполним команду:
$ npm install --save-dev eslint-config-airbnb
и добавим "airbnb" в .eslintrc.json.
Финальный конфиг ESLint с учетом правил Airbnb будет выглядеть вот так:
Чтобы ESLint не ругался на то, что у нас JSX присутствует в файлах с расширением '.js', можно добавить правило
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
в .eslintrc.json, тогда ошибки JSX not allowed in files with extension '.js' не будет:
Установка и настройка ESLint и Prettier закончена!
Что мы сделали:
- разобрались с тем, что такое линтер
- установили и настроили ESLint в Create React App проект
- установили ESLint в VS Code
- узнали, что такое Prettier
- установили и настроили Prettier в нашем проекте
- установили расширение Prettier в VS Code и настроили форматирование кода при сохранении файла
- установили в линтер популярные правила написания JavaScript кода от Airbnb
Увидимся в новых постах!
Top comments (13)
Спасибо за подробную статью. Сохранил)
Евгений, статья просто огонь!
Спасибо Вам огромное! Всё настолько понятно и подробно, что просто супер! Пишите еще! У Вас талант)
Елена, большое спасибо) Как будет время, постараюсь сделать еще какую нибудь статью) Рад что она пригодилась)
Бывает такое паришься неделями, а потом в один прекрасный солнечный день читаешь статью и всё получается. Спасибо!
Руслан, спасибо за отзыв) Рад что всё получилось)
расписано все хорошо наверное. я всего этого не делал. у меня вопрос как все это сохранить для всех проектов? чтобы неповторять установку в каждом заново. можно ли как-то глобально все установить и использовать во всех проектах?
Вопрос открыт, сам я глобально не ставил, потому что для разных проектов бывают нужны разные настройки.
Спасибо👍
Не за что, надеюсь статья помогла разобраться с ESLint и Prettier)
И зачем я в это ввязался... Линтер был со стандартными настройками, теперь сижу вместо написания кода - ошибки исправляю, т.к. много чего было прописано не по "правилам" ))
Отличное руководство! Подробно и понятно.
Спасибо большое, добрый человек! Единственная статья, которая все по полочкам разложила!
Большое спасибо за отзыв) Рад что статья помогла!
Я бы добавил ещё про dependences , что можно с флагом -D