Настройка ESLint и Prettier для чистого JavaScript кода

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

К счастью, существуют инструменты, которые позволяют автоматизировать эту рутину и сосредоточиться на решении реальных бизнес-задач. Два таких инструмента — ESLint и Prettier — стали де-факто стандартом в индустрии. Их грамотная настройка не только избавляет команду от бесконечных code review правок по стилю, но и помогает выявлять скрытые баги на ранних этапах.

ESLint — это линтер, статический анализатор кода. Его основная задача — находить проблемные паттерны или код, не соответствующий определенным правилам. Он может обнаруживать ошибки вроде использования необъявленных переменных, устаревших конструкций или потенциально опасных операций. Prettier же выступает в роли «бескомпромиссного» форматтера кода. Он берет ваш исходный текст и переписывает его в соответствии с единым стилем: поправляет отступы, переносы строк, расставляет кавычки и запятые.

Главное преимущество их совместного использования — разделение ответственности. Prettier заботится о том, как код выглядит (стиль), а ESLint — о том, что он делает (качество). Это позволяет избежать конфликтов правил и создать идеально отлаженный пайплайн.

Давайте перейдем к практической части и настроим эти инструменты в новом или существующем проекте Node.js.

Первым шагом является инициализация проекта, если вы этого еще не сделали. Откройте терминал в корневой директории вашего проекта и убедитесь, что там есть файл package.json.

Теперь установим необходимые пакеты как devDependencies. Мы будем использовать современный подход с плагином eslint-config-prettier, который отключает правила форматирования в ESLint в пользу Prettier.

Выполните следующую команду в терминале: npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

• eslint: основной пакет линтера.
• prettier: основной пакет форматтера.
• eslint-config-prettier: конфигурация для ESLint, которая отключает все правила, связанные со стилем кода и форматированием, чтобы они не конфликтовали с Prettier.
• eslint-plugin-prettier: плагин для ESLint, который запускает Prettier как правило линтинга. Это позволяет видеть ошибки форматирования прямо в процессе линтинга.

После успешной установки приступим к настройке ESLint. Самый простой способ начать — использовать встроенный конфигуратор. Запустите команду: npx eslint --init

Эта команда запустит интерактивный процесс настройки. Вам будет предложено ответить на несколько вопросов. На вопрос "How would you like to use ESLint?" выберите вариант "To check syntax and find problems". Далее выберите "CommonJS" или "ES modules" в зависимости от типа модулей вашего проекта. На вопрос о фреймворке укажите "None of these", если вы не используете React/Vue/Angular. Если ваш проект использует TypeScript, ответьте утвердительно на соответствующий вопрос. Выберите среду выполнения кода: "Node" для бэкенда или "Browser" для фронтенда. На вопрос о формате конфигурационного файла рекомендуется выбрать "JSON". И наконец согласитесь на установку дополнительных зависимостей.

После завершения процесса у вас появится файл.eslintrc.json.

Теперь нам нужно интегрировать Prettier в эту конфигурацию ESLint. Откройте файл.eslintrc.json. Вам нужно добавить плагин prettier и расширить его конфигурацию. Ваш файл может выглядеть примерно так:

{ "env": { "browser": true, "es2021": true }, "extends": ["eslint:recommended", "plugin:prettier/recommended"], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "rules": {} }

Обратите внимание на массив extends. Добавление строки plugin:prettier/recommended делает сразу три вещи: включает сам плагин prettier, добавляет правило prettier/prettier (которое отмечает проблемы форматирования как ошибки ESLint) и расширяет конфигурацию eslint-config-prettier для отключения конфликтующих правил.

Следующий шаг — создание отдельного конфигурационного файла для Prettier. Хотя можно задавать опции через ESLint, лучше держать их отдельно для большей гибкости. Создайте файл.prettierrc в корне проекта.

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

{ "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 100, "tabWidth": 2, "useTabs": false }

• semi: true - требует точку с запятой в конце выражений.
• trailingComma: es5 - добавляет висячие запятые там, где это допустимо по спецификации ES5 (в объектах и массивах).
• singleQuote: true - использует одинарные кавычки вместо двойных.
• printWidth: 100 - максимальная длина строки перед переносом.
• tabWidth: 2 - ширина одного отступа (соответствует двум пробелам).
• useTabs: false - использовать пробелы вместо табуляции.

Вы можете настроить эти параметры под нужды своей команды.

Чтобы процесс был максимально удобным, добавим скрипты в package.json. Откройте этот файл и найдите раздел scripts. Добавьте следующие строчки:

"scripts": { "lint": "eslint.", "lint:fix": "eslint. --fix", "format": "prettier --write.", "format:check": "prettier --check." }

Теперь вы можете запускать линтинг командой npm run lint, а автоматическое исправление всех проблем (которые могут быть исправлены автоматически) командой npm run lint:fix. Команда npm run format отформатирует все файлы проекта согласно правилам Prettier, а npm run format:check проверит соответствие без внесения изменений.

Для полной автоматизации рекомендуется настроить интеграцию этих инструментов в вашу среду разработки (IDE). Практически все популярные редакторы (VS Code, WebStorm) имеют плагины для ESLint и Prettier.

Для VS Code установите расширения ESLint от Microsoft и Prettier от Prettier.io. Затем добавьте следующие настройки в settings.json вашего редактора или рабочей области:

{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: true } }

Эти настройки делают магию: editor.formatOnSave включает форматирование при сохранении файла. editor.defaultFormatter устанавливает Prettier как форматтер по умолчанию. editor.codeActionsOnSave со свойством source.fixAll.eslint указывает редактору автоматически применять исправления ESLint при сохранении.

Таким образом, когда вы сохраняете файл (.js или.jsx), происходит следующее: 1) Запускается правило prettier/prettier через плагин внутри ESLint. 2) Все проблемы с качеством кода (отловленные правилами ESLint), которые можно исправить автоматически — исправляются. 3) Затем запускается сам Prettier как форматтер по умолчанию и доводит стиль до идеала согласно вашему.prettirerc. В результате вы получаете чистый код каждый раз при нажатии Ctrl+S.

Не забудьте добавить папку node_modules и возможно некоторые другие системные файлы (.gitignore) в исключения линтера/форматтера при необходимости через файлы.eslintignore и.prettieirgnore соответственно.

Инвестиция времени в первоначальную настройку связки ESLint + Prettер окупается многократно уже после первого месяца работы над проектом всей командой Вы устраняете почву для споров о стиле код становится более читаемым а потенциальные ошибки обнаруживаются до коммита Это прямой путь к повышению скорости разработки снижению количества багов связанных с человеческим фактором созданию профессиональной среды где каждый участник сосредоточен на логике а не синтаксисе

Внедрение этих инструментов превращает субъективные вопросы стиля кода в объективные автоматизированные правила Потратив несколько часов сегодня вы экономите десятки часов завтра делая свой код чище а процесс разработки предсказуемым