Как концептуально подружить ESLint и Prettier, чтобы они не конфликтовали?

Чтобы ESLint и Prettier не конфликтовали, нужно разделить ответственность: Prettier отвечает за форматирование кода, а ESLint — за качество и стиль кода, не связанный с форматированием.

Основные шаги:

1. Установить Prettier и ESLint.
2. Добавить плагин eslint-config-prettier, который отключает правила ESLint, конфликтующие с форматированием Prettier.
3. Настроить ESLint с расширением "prettier" в разделе extends:

{
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"]
}

4. Настроить Prettier отдельно (например, .prettierrc).

5. Запускать сначала ESLint для проверки качества, затем Prettier для форматирования, либо использовать интеграцию, которая запускает оба инструмента последовательно.

Такой подход позволяет избежать конфликтов и дублирования правил.