Как настроить ESLint и Prettier в VS Code и Create React App и подключить Airbnb стайлгайд
Tags: eslint, prettier, vscode, createreactapp
Published: 2021-09-27 11:08:09

## Настраиваем автоматическое форматирование кода и проверку на ошибки при помощи Prettier и ESLint согласно стайлгайду Airbnb.

---

Во время работы над последним проектом я опробовал в деле два прекрасных иструмента, ESLint и Prettier. Захотелось написать о том, что это такое, чем полезен линтер и prettier, как их настроить, и как использовать. 

---

* [**Что такое Lint?**](#что-такое-lint)
   * [ESLint в Create React App и расширение для VS Code](#eslint-в-create-react-app)
   * [Настройка ESLint](#настройка-eslint)
   * [Установка и подключение дополнительных плагинов ESLint](#дополнительные-плагины-eslint)
      * [**eslint-plugin-react**](#eslint-plugin-react)
      * [**eslint-plugin-react-hooks**](#eslint-plugin-react-hooks)
      * [**eslint-plugin-jsx-a11y**](#eslint-plugin-jsx-a11y)
      * [**eslint-plugin-import**](#eslint-plugin-import)

* [**Prettier**](#prettier)
   * [Установка Prettier в проект](#установка-prettier)
   * [Отключаем конфликтующие с Prettier правила ESLint](#отключаем-конфликтующие-правила-eslint)
   * [Интеграция Prettier в VS Code](#интеграция-prettier-vscode)
   * [.prettierrc.json и .prettierignore](#prettierrc-prettierignore)

* [**Установка правил Airbnb для ESLint**](#установка-airbnb)

---

## Что такое Lint? <a name="что-такое-lint"></a>

Lint, или линтер - это инструмент для поиска ошибок в коде. Пример работы линтера в проекте Create React App, ниже:

![линтер нашел ошибки в коде](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj6rmlw1xf1lsvepfih2.png)

Клавиатура моего ноутбука иногда срабатывает неправильно, и делает двойное нажатие клавиши, вместо однократного. В 8 и в 25 строке опечатка, вместо logo - **logoo** а вместо App - **Appp**
Линтер нашел эти ошибки и сообщил о них в терминал. Прекрасно! 

Теперь можно их исправить, и все заработает как надо:

![ошибки исправлены](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlsh0xoyam9tjaly9t24.png)

---

## ESLint в Create React App и расширение для VS Code <a name="eslint-в-create-react-app"></a>

В Create React App линтер уже установлен, он называется [ESLint](https://eslint.org/). Именно его сообщения об ошибках мы видим в терминале. 

Существует так же [ESLint расширение](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) для VS Code:

![ESLint расширение для VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8smne7tgrw4g69kw83p.png)

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

![Сообщения об ошибках в коде, которые можно посмотреть прямо в VS Code, а не в терминале, при помощи плагина ESLint для VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0joz542nln9mszwq98g.png)

---

## Настройка ESLint <a name="настройка-eslint"></a>

У ESLint есть конфиг, в котором находятся правила, согласно которым он выполняет проверку кода. Как я говорил ранее, ESLint уже встроен в Create React App, и использует конфиг который называется [**eslint-config-react-app**](https://github.com/facebook/create-react-app/tree/v4.0.3/packages/eslint-config-react-app)

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

![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aki3gffzmooiaf01dq2b.png)

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

```console
$ npx eslint --init
```

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

![мастер настройки ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvs4z3qateny232lrqp4.gif)

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

![файл .eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ame48tsp2yddcrst75hp.png)

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

---

## Установка и подключение дополнительных плагинов ESLint <a name="дополнительные-плагины-eslint"></a>

установим [**правила ESLint для React**](https://github.com/yannickcr/eslint-plugin-react): <a name="eslint-plugin-react"></a>

```console
$ 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*

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

![Добавили "plugin:react/jsx-runtime" в конфиг .eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vd75epl70mpmgi2kfn5q.png)

---

Установим правила для поддержки хуков React, [**eslint-plugin-react-hooks**](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks): <a name="eslint-plugin-react-hooks"></a>

```console
$ npm install eslint-plugin-react-hooks --save-dev
```

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

![добавили "plugin:react-hooks/recommended" в .eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plo7x44zpbx2z0kv9sgq.png)

---

Установим правила доступности для людей с ограниченными возможностями [**eslint-plugin-jsx-a11y**](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) <a name="eslint-plugin-jsx-a11y"></a>

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

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

![добавили "plugin:jsx-a11y/recommended" в .eslintrc.json:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2xfd7ltea50wlenxeqd.png)

---

установим правила, которые будут отвечать за синтаксис импортов и экспортов [**eslint-plugin-import**](https://github.com/import-js/eslint-plugin-import) <a name="eslint-plugin-import"></a>

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

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

![добавили "plugin:import/recommended" в .eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdvfh6vhp57f1e8v075i.png)

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

---

## Prettier <a name="prettier"></a>

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

[Prettier](https://prettier.io/) - это инструмент для автоматического форматирования кода.

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

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

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

![Prettier форматирует код](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewmgijy8frr129gk1ddi.gif)

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

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

---

## Установка Prettier в проект <a name="установка-prettier"></a>

Установка хорошо описана в [официальной документации](https://prettier.io/docs/en/install.html), пройдем ее вместе, по шагам.

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

```console
$ npm install --save-dev --save-exact prettier
```
Создаем пустой конфигурационный файл, .prettierrc.json в корне проекта:

```console
$ echo {}> .prettierrc.json
```

![.prettierrc.json конфиг](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h3znm3bwlpklix2mk3j.png)

### Отключаем конфликтующие правила ESLint <a name="отключаем-конфликтующие-правила-eslint"></a>

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

ставим:

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

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

![добавляем "prettier" в конфиг .eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9847lj6i48839m8w2ox.png)

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

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

---

## Интеграция Prettier в VS Code <a name="интеграция-prettier-vscode"></a>

Установим [расширение Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) для VS Code:

![Расширение Prettier для VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/829s15ql7pn9li2e6i07.png)

После того как мы установили расширение Prettier в VS Code, можно сделать так, чтобы Prettier автоматически форматировал наш код, когда мы сохраняем файл. Для этого нужно добавить два значения в JSON конфиг VS Code, (файл settings.json). 

Чтобы открыть settings.json нужно, находясь в VS Code, нажать <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>, ввести в поиск "settings" и выбрать пункт Open Settings (JSON). Откроется файл settings.json. 

![редактируем конфиг settings.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhrbouy1bxy4nh13e95l.gif)

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

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

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

---

## .prettierrc.json и .prettierignore <a name="prettierrc-prettierignore"></a>

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

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

.prettierrc.json - это [файл конфигурации Prettier](https://prettier.io/docs/en/configuration.html).

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

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

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

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

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

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

---

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

![файл .prettierrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n78gfp89eb84io8bi5e5.png)

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

---

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yovw53jcs3jx0ru04bx.gif)

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

---

### .prettierignore 

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

![файл .prettierignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uffohlwh3ji7l54dsg8c.png)

---

## Установка правил Airbnb для ESLint <a name="установка-airbnb"></a>

Теперь, когда мы настроили ESLint и Prettier в нашем проекте, давайте установим популярный конфиг [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb), который настроен с учетом [стайлгайда по JavaScript от Airbnb](https://airbnb.io/javascript/react/)

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

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

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

![финальный вариант конфига .esnlintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqouy681nt7sn1hm5gcd.png)

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

```code
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
``` 
в .eslintrc.json, тогда ошибки *JSX not allowed in files with extension '.js'* не будет:

![добавили правило "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] в .eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pypss46npdep358ssoqw.png)

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

---

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

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

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