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

В этом случае конфиг будет выглядеть так:

Добавили "plugin:react/jsx-runtime" в конфиг .eslintrc.json


Установим правила для поддержки хуков 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:

добавили "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:

добавили "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:

добавили "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" в конец массива:

добавляем "prettier" в конфиг .eslintrc.json

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' не будет:

добавили правило "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] в .eslintrc.json

Установка и настройка ESLint и Prettier закончена!


Что мы сделали:

  • разобрались с тем, что такое линтер
  • установили и настроили ESLint в Create React App проект
  • установили ESLint в VS Code
  • узнали, что такое Prettier
  • установили и настроили Prettier в нашем проекте
  • установили расширение Prettier в VS Code и настроили форматирование кода при сохранении файла
  • установили в линтер популярные правила написания JavaScript кода от Airbnb

Увидимся в новых постах!

Discussion (0)