Руководство Eslint + Prettier

Руководство для настройки автоматического форматирования кода и проверки синтаксиса языка JavaScript. Рассказываем про утилиты Eslint и Prettier.

• Введение
  • Какие проблемы решает eslint?
  • Для чего тогда нам нужен Prettier?
  • Перейдем к настройке
  • Для автоматического форматирования нам нужно
• Заключение

Введение

В этой статье мы рассмотрим основные правила линтера и способы его настройки под проект.

Какой цели я хочу достигнуть в результате?

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

Какие проблемы решает eslint?

Линтер — это статический анализатор для языка программирования. Он сообщает о потенциально опасных выражениях в коде, которые могут привести к аварийному завершению программы. Также линтер может сообщить об устаревших участках кода, синтаксических ошибках и неиспользованных переменных. Всего существует около 300 правил, которые можно включить/выключить по желанию.

Для чего тогда нам нужен Prettier?

На большом проекте, как правило, работает несколько программистов. У каждого из них может быть свое мнение относительно качества кода и размера отступов в строке. Eslint может форматировать текст, но требует дополнительной кропотливой настройки. Облегчить задачу призвана утилита Prettier. У нее открытый исходный код и имеется хорошая поддержка сообщества. Большая часть правил оформления уже задана по умолчанию, но у пакета есть гибкая система настройки и удобный API, позволяющий описывать свои правила в конфигурационном файле формата .json/.yml. Это значит, что мы можем написать файл с едиными настройками для всей команды.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

Узнать больше

Перейдем к настройке

Начну с того, что здесь описана настройка линтера на примере VScode. Для других IDE будет разница только в поиске нужных расширений. Итак:

1. Откройте Vscode и найдите в левой боковой панели пункт Extensions (ctrl/cmd+shift+X)
2. В строке поиска введите ESLint и установите пакет от Dirk Baeumer.
3. Проделайте аналогичную операцию для Prettier — Code formatter. (может потребоваться перезагрузка редактора после установки).
4. Дальше нам нужно установить сам линтер с помощью команды npm install eslint --save-dev
5. После установки линтера мы можем воспользоваться стандартным скриптом для базовой настройки конфигурационного файла. Для этого пишем в консоли следующую команду: eslint --init
6. Скрипт попросит ответить нас на вопросы о текущем проекте и выставит соответствующие правила:

Можете поэкспериментировать с настройками, чтобы понять, какой пункт меню за что отвечает. Итогом настройки будет являться сформированный файл .eslintrc.json. Вы можете создать файл с настройками самостоятельно и поместить его на один уровень с package.json.

Для того, чтобы наша проверка работала, нам нужно установить необходимые пакеты:

npm install --save-dev eslint eslint-plugin-prettier eslint-config-prettier babel-eslint

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

Если вы создали файл конфигурации с помощью eslint --init, скрипт предложит вам автоматически установить пакет для работы с React. Если вы хотите сделать это самостоятельно — пропишите:

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

Пример настройки файлов для работы ESLint:

[0]=off // выключает правило

[1]=warn // выводит предупреждение в консоль

[2]=error // выводит error и останавливает исполнение программы

.eslintrc.json

{
    "env": { // где будет исполняться наш код
        "browser": true,
        "es2021": true 
    },
    /* Пресет с настройками. prettier должен быть последним. 
    Он удаляет некоторые правила eslint из-за которых могут возникать конфликты. */
    "extends": [ 
        "eslint:recommended",
        "plugin:react/recommended",
        "prettier"
    ],
    "parser": "babel-eslint", // Парсер для обработки jsx кода
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11, // версия стандарта JavaScript. Последний 12 (2021).
        "sourceType": "module" // Позволяет использовать import/export
    },
    // Здесь мы подключаем используемые плагины.
    "plugins": [
        "react", 
        "prettier"
    ],
    /* Правила для отслеживания линтером. Если пресеты покрывают не все ситуации, 
    вы можете прописать нужные правила вручную. */)
    "rules": {
        "prettier/prettier": "error", . // Обязательно!! Подсвечивает ошибки из Prettier.
        "react/prop-types": 0 // Отключаем правило проверки передаваемых типов.
    }
}

.prettierrc.json

*Правила оформления кода. Полный список настроек вы можете найти здесь.

{
    "singleQuote": true,
    "jsxSingleQuote": true,
    "arrowParens": "always",
    "max-len": ["error", 140, 2],
    "tabWidth": 2,
    "useTabs": false
}

.eslintignore

Чтобы исключить из проверки директории/файлы указываем их в виде списка

test/fixtures
**/app/public
node_modules
/* название файла */

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

Для автоматического форматирования нам нужно

• Зайти в настройки — Ctrl/Cmd +Shift + P
• В строку поиска вписать — settings
• Выбрать пункт — Preferences: Open Settings (JSON) В файле settings.json добавляем:

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode" // Prettier, как форматтер по умолчанию
    "editor.codeActionsOnSave": {
        "source.fixAll": true // работает аналогично eslint --fix
        },
    },
    "editor.formatOnSave": true
}

Tip. Если у вас возникли проблемы во время работы с ESLint, перейдите во вкладку Output и посмотрите вывод об ошибках.

TROUBLESHOOTING

1. Q: Что делать, если при работе на Windows возникает следующая ошибка? [eslint] Delete 'cr' [prettier/prettier]. A: Чтобы её решить, нужно немного поменять настройки в файле .eslintrc.json "prettier/prettier": ["error", { "endOfLine":"auto" }],
2. Q: Не работают правила линтера или форматирование отличается от ожидаемого. A: Возможно, это следствие наличия в проекте других конфигурационных файлов. Они имеют разный приоритет исполнения. Например, файл .editorconfig имеет высший приоритет, чем .eslintrc., поэтому линтер будет выставлять настройки с его помощью.
3. Q: Выставляются двойные скобки, вместо одинарных. A: Чаще всего это происходит из-за конфликта настроек линтера и prettier. Некоторые пресеты (extends в файле .eslintrc.json) содержат в себе правила настройки форматирования скобок. Последний указанный пресет переписывает правила предыдущих. Убедитесь в том, что "prettier" находится последним в списке extends.

Заключение

Часто в проектах могут использовать популярный конфиг от Airbnb. Он содержит больше правил и может вас запутать, поэтому рекомендую к нему обращаться после того, как усвоите базовые принципы работы линтера. Спасибо, что дочитали до конца. Работать с кодом теперь будет более приятно и гораздо быстрее.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Узнать больше