Настройка ESLint и Prettier в веб-приложении на Next.js и TypeScript

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

В данной статье мы рассмотрим пошаговую настройку ESLint и Prettier на примере нашего веб-приложения, построенного на Next.js и TypeScript.

Введение

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

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

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

В таблице приведены версии технологий, используемых в нашем проекте:

Установка библиотек:

Для начала установим основные библиотеки:

npm install --save-dev eslint prettier  eslint-config-airbnb-typescript

Для корректной интеграции ESLint и Prettier в Next.js необходимо установить пакеты, обеспечивающие их совместимость оптимальную работу:

• eslint-config-prettier — отключает правила ESLint, конфликтующие с форматированием Prettier.

• eslint-plugin-prettier — запускает Prettier внутри ESLint и выводит ошибки форматирования.

• eslint-config-next — официальная конфигурация ESLint для Next.js с учётом особенностей фреймворка (маршрутизация, серверные компоненты, оптимизации).

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

Для эффективной обработки импортов установим следующие плагины:

eslint-import-resolver-typescript — резолвер, который позволяет ESLint использовать настройки TypeScript для правильного разрешения путей импорта. Это особенно важно при работе с алиасами путей и сложными конфигурациями модулей, характерными для TypeScript-проектов.

eslint-plugin-unused-imports — плагин для обнаружения неиспользуемых импортов в коде.

npm install eslint-import-resolver-typescript  eslint-plugin-unused-imports

Конфигурация ESLint:

Для конфигурации ESLint нам необходимо создать файл .eslintrc.json в корне проекта.

В начале указываем какие предопределенные наборы правил будут использоваться для линтинга. В нашем проекте объединены правила next/core-web-vitals и airbnb-typescript, что позволяет совместить специфические правила производительности и оптимизации для Next.js со строгими стандартами кода Airbnb.

Важно! : prettier должен быть последним, чтобы не возникало конфликтов правил.

{   ...   "extends": [     "next/core-web-vitals",     "airbnb-typescript",     "prettier"   ],   ...  }

Стандартный парсер ESLint не поддерживает TypeScript, поэтому для анализа кода TypeScript необходимо использовать специальный парсер @typescript-eslint/parser. Чтобы обеспечить корректную работу парсера с TypeScript, указываем путь к файлу tsconfig.json в параметре project — это позволяет ESLint использовать информацию о типах из конфигурации TypeScript. Также в настройки парсера добавляем поддержку JSX, ES-модулей и последней версии ECMAScript. А чтобы добавить специфичные для TypeScript правила анализа кода  прописываем в plugins @typescript-eslint.

{   ...   "parser": "@typescript-eslint/parser",   "parserOptions": {     "project": "./tsconfig.json",     "ecmaFeatures": { "jsx": true }, // Поддержка JSX     "ecmaVersion": "latest", // Поддержка ES2022+     "sourceType": "module" // Поддержка ES-модули   },   "plugins": ["@typescript-eslint"]   ... }

Правила которые мы определили в своей конфигурации:

В конфигурации ESLint мы применили несколько ключевых правил для повышения качества и производительности кода:

Правило «react/no-unstable-nested-components": "warn« предотвращает создание нестабильных вложенных компонентов. Это помогает избегать создания нестабильных вложенных компонентов, предотвращая потенциальные проблемы с производительностью. 

Для строгой организации файловой структуры настроено правило «react/jsx-filename-extensio«, которое разрешает использование JSX-синтаксиса исключительно в файлах с расширением .tsx, обеспечивая единообразие в проекте.

Активированное правило «@typescript-eslint/no-unused-vars« эффективно выявляет неиспользуемые переменные, при этом игнорируя параметры, начинающиеся с символа подчеркивания (_). Такой подход особенно полезен при деструктуризации, когда требуется пропустить определенные параметры.

Правило «@typescript-eslint/consistent-type-imports«: «error« требует явного использования import type для импортов типов. Это решение не только повышает читаемость кода, но и помогает сборщику более эффективно применять tree-shaking.

Важно!: все правила прописываются в разделе rules.

"rules": {   ...   // Помогает избегать создания нестабильных вложенных компонентов   "react/no-unstable-nested-components": "warn"    // Разрешает JSX только в .tsx файлах   "react/jsx-filename-extension": [     2,     {       "extensions": [".tsx"]     }   ],    // Помогает находить неиспользуемые переменные    "@typescript-eslint/no-unused-vars": [     "error",     // Игнорирует параметры, начинающиеся с _     {       "destructuredArrayIgnorePattern": "^_",       "argsIgnorePattern": "^_"     }   ],    // Требует использование import type для импортов типов   "@typescript-eslint/consistent-type-imports": "error"   ... }

Конфигурация Prettier:

Для конфигурации Prettier нам необходимо создать файл .prettierrc.json в корне проекта. 

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

Рассмотрим пример такой конфигурации:

{     // Устанавливает ширину отступа в 4 пробела     "tabWidth": 4,     // Добавляет точки с запятой в конце выражений     "semi": true,     // Использует одинарные кавычки вместо двойных для строк     "singleQuote": true,     // Добавляет запятую после последнего элемента в объектах           "trailingComma": "all",     // Добавляет пробелы внутри фигурных скобок объектов     "bracketSpacing": true,     // Переносит закрывающую скобку на новую строку     "bracketSameLine": false,     // Добавляет круглые скобки вокруг параметров стрелочных функций     "arrowParens": "always",     // Ограничивает длину строки до 100 символов     "printWidth": 100,     // Устанавливает формат окончания строк     "endOfLine": "crlf" }

Игнорирование кода:

Чтобы исключить определённые файлы и директории из проверки, в корне проекта создайте файлы игнорирования: 

.prettierignore — определяет файлы и папки, которые должны быть исключены из автоматического форматирования Prettier.

.eslintignore — указывает файлы и директории, которые не должны анализироваться ESLint.

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

# Ignore artifacts: build *.html *.css

Запуск ESLint и Prettier:

Чтобы упростить работу с ESLint и Prettier, можно добавить скрипты в файл package.json. Это позволит запускать линтинг и форматирование одной командой.

"scripts": {   // Запускает линтер Next.js для проверки правил ESLint   "lint": "next lint",   // Автоматически форматирует все файлы с помощью Prettier   "prettier": "npx prettier --write **/*.{ts,tsx,json,scss}",   // Проверяет TypeScript-файлы на соответствие правилам ESLint   "lint:ts": "eslint \"./src/**/*.{ts,tsx}\"",   // Исправляет автоматически исправляемые ошибки с помощью ESLint.   "lint:ts:fix": "eslint \"./src/**/*.{ts,tsx}\" --fix" }

Теперь в терминале можно прописать npm run lint для проверки кода в проекте.

Настройка автоматического форматирования в VS Code:

Для работы с ESLint и Prettier потребуется установить расширения ESLint и Prettier — Code Formatter. Откройте вкладку Extensions (Ctrl+Shift+X или Cmd+Shift+X) и введите название расширения.

Чтобы настроить поведение VS Code, откройте командную панель (Ctrl+Shift+P или Cmd+Shift+P). Выберите Preferences: Open User Settings (JSON).

Откроется файл setting.json в нем дополните следующие настройки:

{   "editor.defaultFormatter": "esbenp.prettier-vscode",   "editor.codeActionsOnSave": {     "source.fixAll.eslint": "always"   },   "eslint.validate": [     "javascript",     "javascriptreact",     "typescript",     "typescriptreact"   ],   "editor.formatOnSave": true }

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

VS Code автоматически использует конфигурационные файлы проекта (.prettierrc.json, .eslintrc.json). Если эти файлы присутствуют в корневой директории проекта, редактор будет применять их настройки без какой-либо дополнительной конфигурации.

Пример работы:

Пример кода с подсвеченными ошибками, выявленными ESLint.

После сохранения файла система автоматически запустила процесс оптимизации кода: Prettier выполнил форматирование, а ESLint исправил все ошибки, поддающиеся автоматическому устранению. Выявленные замечания, требующие ручного вмешательства, были устранены нами дополнительно.

Заключение

Качество кода — это основа успешного проекта, а ESLint и Prettier являются незаменимыми помощниками в его поддержании. Настройка этих инструментов позволяет стандартизировать процесс разработки, избежать ошибок и обеспечить единообразие кода в команде. Теперь каждый участник проекта может быть уверен, что его код соответствует принятым стандартам, а проверка линтером станет частью ежедневной практики.