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

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

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

Введение

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

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

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

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

Технология	Версия
Next.js	14.0.4
TypeScript	4.9.5
Prettier	3.0.3
ESLint	8.57.1
eslint-config-airbnb-typescript	18.0.0

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

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

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 являются незаменимыми помощниками в его поддержании. Настройка этих инструментов позволяет стандартизировать процесс разработки, избежать ошибок и обеспечить единообразие кода в команде. Теперь каждый участник проекта может быть уверен, что его код соответствует принятым стандартам, а проверка линтером станет частью ежедневной практики.