DEV Community

Cover image for Как настроить ESLint и Prettier в VS Code и Create React App и подключить Airbnb стайлгайд
Evgeny Prikhodko
Evgeny Prikhodko

Posted on

Как настроить ESLint и Prettier в VS Code и Create React App и подключить Airbnb стайлгайд

Настраиваем автоматическое форматирование кода и проверку на ошибки при помощи 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:

ESLint расширение для VS Code

Установив это расширение в VS Code, получим сообщения ESLint и подсветку ошибок в редакторе кода:

Сообщения об ошибках в коде, которые можно посмотреть прямо в VS Code, а не в терминале, при помощи плагина ESLint для VS Code


Настройка ESLint

У ESLint есть конфиг, в котором находятся правила, согласно которым он выполняет проверку кода. Как я говорил ранее, ESLint уже встроен в Create React App, и использует конфиг который называется eslint-config-react-app

В Create React App этот конфиг подключается к ESLint в package.json, 22 строка:

package.json

Eslint сейчас настроен так, как решили создатели CRA. Давайте инициализируем ESLint и заново сами все настроим, так, как нам необходимо. Для этого выполним команду:



$ npx eslint --init


Enter fullscreen mode Exit fullscreen mode

Запустится мастер настройки ESLint.
Пройдем настройку согласно предложенным вариантам:

мастер настройки ESLint

В конце мастер создаст файл настроек линтера, .eslintrc.json:

файл .eslintrc.json

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


Установка и подключение дополнительных плагинов ESLint

установим правила ESLint для React:



$ npm install eslint-plugin-react --save-dev


Enter fullscreen mode Exit fullscreen mode

Если вы используете версию 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


Enter fullscreen mode Exit fullscreen mode

подключим их, добавив строку "plugin:react-hooks/recommended" в .eslintrc.json:

добавили


Установим правила доступности для людей с ограниченными возможностями eslint-plugin-jsx-a11y



$ npm install eslint-plugin-jsx-a11y --save-dev


Enter fullscreen mode Exit fullscreen mode

добавляем "plugin:jsx-a11y/recommended" в .eslintrc.json:

добавили


установим правила, которые будут отвечать за синтаксис импортов и экспортов eslint-plugin-import



$ npm install eslint-plugin-import --save-dev


Enter fullscreen mode Exit fullscreen mode

добавим "plugin:import/recommended" в .eslintrc.json:

добавили

С ESLint мы пока что закончили, переходим к Prettier


Prettier

Prettier. Что это такое и зачем вообще нужно?

Prettier - это инструмент для автоматического форматирования кода.

Форматирование кода - это процесс придания коду определенного вида.

Prettier берет код, который вы ему дали, и преобразует этот код к единому стилю.

Вот простой пример:

Prettier форматирует код

Здесь у нас стандартный файл App.js из Create React App проекта, у которого я где то убрал, а где то добавил отступы и точки с запятыми в конце строк, в некоторых местах использовал длинные, плохо читаемые строки.

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


Установка Prettier в проект

Установка хорошо описана в официальной документации, пройдем ее вместе, по шагам.

Первым делом устанавливаем Prettier в наш Create React App проект, локально:



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


Enter fullscreen mode Exit fullscreen mode

Создаем пустой конфигурационный файл, .prettierrc.json в корне проекта:



$ echo {}> .prettierrc.json


Enter fullscreen mode Exit fullscreen mode

.prettierrc.json конфиг

Отключаем конфликтующие правила ESLint

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

ставим:



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


Enter fullscreen mode Exit fullscreen mode

Далее открываем конфиг нашего линтера, (файл .eslintrc.json), и добавляем "prettier" в конец массива:

добавляем

Cтрока "prettier" в конфиге .eslintrc.json отключает конфликтующие с Prettier правила ESLint.
Теперь Prettier и линтер будут корректно работать вместе.

Мы установили Prettier в наш проект. Давайте теперь добавим поддержку Prettier в VS Code.


Интеграция 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.

редактируем конфиг settings.json

Добавим в него следующие строки:



"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true


Enter fullscreen mode Exit fullscreen mode

Первая строка устанавливает Prettier как инструмент форматирования кода по-умолчанию.
Вторая строка включает форматирование кода при сохранении файла.


.prettierrc.json и .prettierignore

Пара слов об этих двух файлах.

Для чего нужен .prettierrc.json?

.prettierrc.json - это файл конфигурации Prettier.

Перечислю базовые настройки, которые в него можно добавить:



{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}


Enter fullscreen mode Exit fullscreen mode

"trailingComma" - отвечает за висящие, (или "последние") запятые. Можно разрешить Prettier ставить их там, где это возможно, или отключить эту функцию

"tabWidth" - ширина отступа, в пробелах

"semi" - отвечает за добавление точек с запятыми в конце инструкций. Можно добавлять, можно не добавлять

"singleQuote" - отвечает за использование одинарных или двойные кавычек


Мой конфиг .prettierrc.json сейчас выглядит так:

файл .prettierrc.json

В нем я запретил использование точек с запятыми в конце строк. Такое вот личное предпочтение, при работе над персональными проектами.


В итоге, когда мы сохраняем файл, Prettier будет удалять точки с запятыми в конце строк, если они были, и менять одинарные кавычки на двойные. (замена кавычек на двойные производится по умолчанию, этим поведением можно управлять при помощи параметра "singleQuote")

вот как это выглядит:

Alt Text

Сохранили файл - произошло форматирование кода.


.prettierignore

Файл .prettierignore существует для того, чтобы запретить Prettier форматировать определенные файлы. Какие файлы запретить форматировать, решаете вы. Я добавил туда файл .eslintrc.json, потому что не хочу, чтобы Prettier его трогал:

файл .prettierignore


Установка правил Airbnb для ESLint

Теперь, когда мы настроили ESLint и Prettier в нашем проекте, давайте установим популярный конфиг eslint-config-airbnb, который настроен с учетом стайлгайда по JavaScript от Airbnb

для этого выполним команду:



$ npm install --save-dev eslint-config-airbnb


Enter fullscreen mode Exit fullscreen mode

и добавим "airbnb" в .eslintrc.json.
Финальный конфиг ESLint с учетом правил Airbnb будет выглядеть вот так:

финальный вариант конфига .esnlintrc.json

Чтобы ESLint не ругался на то, что у нас JSX присутствует в файлах с расширением '.js', можно добавить правило



"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]


Enter fullscreen mode Exit fullscreen mode

в .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)

Collapse
 
necelentano profile image
Андрей | Andrey

Спасибо за подробную статью. Сохранил)

Collapse
 
elenaismylova profile image
Elena Ismylova

Евгений, статья просто огонь!
Спасибо Вам огромное! Всё настолько понятно и подробно, что просто супер! Пишите еще! У Вас талант)

Collapse
 
eprikhodko profile image
Evgeny Prikhodko

Елена, большое спасибо) Как будет время, постараюсь сделать еще какую нибудь статью) Рад что она пригодилась)

Collapse
 
akseonowww profile image
Ruslan Akseonowww

Бывает такое паришься неделями, а потом в один прекрасный солнечный день читаешь статью и всё получается. Спасибо!

Collapse
 
eprikhodko profile image
Evgeny Prikhodko

Руслан, спасибо за отзыв) Рад что всё получилось)

Collapse
 
romanown profile image
roman

расписано все хорошо наверное. я всего этого не делал. у меня вопрос как все это сохранить для всех проектов? чтобы неповторять установку в каждом заново. можно ли как-то глобально все установить и использовать во всех проектах?

Collapse
 
eprikhodko profile image
Evgeny Prikhodko

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

Collapse
 
sergeyshar profile image
Sergey-Shar

Спасибо👍

Collapse
 
eprikhodko profile image
Evgeny Prikhodko • Edited

Не за что, надеюсь статья помогла разобраться с ESLint и Prettier)

Collapse
 
skyline2r profile image
SkyLine2R

И зачем я в это ввязался... Линтер был со стандартными настройками, теперь сижу вместо написания кода - ошибки исправляю, т.к. много чего было прописано не по "правилам" ))
Отличное руководство! Подробно и понятно.

Collapse
 
raubzeug profile image
Hellen

Спасибо большое, добрый человек! Единственная статья, которая все по полочкам разложила!

Collapse
 
eprikhodko profile image
Evgeny Prikhodko

Большое спасибо за отзыв) Рад что статья помогла!

Collapse
 
bazilsafronov profile image
Bazil Safronov

Я бы добавил ещё про dependences , что можно с флагом -D