Как настроить линтер и форматтер так, чтобы они не конфликтовали друг с другом при работе с одним и тем же файлом (например, TypeScript)?

Проблема конфликта линтера и форматтера

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

Решение: отключение пересекающихся правил

Основной подход — использовать пакет eslint-config-prettier. Он отключает все правила ESLint, которые могут конфликтовать с Prettier. Установка:

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

Затем в файле конфигурации ESLint (например, .eslintrc.json) добавьте prettier в конец массива extends:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

Это гарантирует, что правила форматирования Prettier будут иметь приоритет.

Альтернативный подход: интеграция через плагин

Можно использовать eslint-plugin-prettier, который запускает Prettier как правило ESLint. Тогда все ошибки форматирования будут отображаться как ошибки ESLint. Установка:

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

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

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Однако этот подход может замедлить работу, так как Prettier запускается для каждого файла.

Практическая настройка для TypeScript

Для TypeScript проекта рекомендуется следующая конфигурация:

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "rules": {
    // Дополнительные правила TypeScript
  }
}

Файл .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

Также можно добавить скрипты в package.json для последовательного запуска:

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

Вывод: Использование eslint-config-prettier — самый простой и эффективный способ избежать конфликтов. Он отключает лишние правила, оставляя ESLint только для логических проверок, а Prettier — для форматирования. Это ускоряет разработку и поддерживает чистоту кода.