ESLint + Prettier конфиг

Минимальная связка ESLint (линтер) и Prettier (форматтер) для JavaScript/TypeScript-проекта — единый стиль кода без споров.

Задача

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

Решение

Установка:

npm install -D eslint prettier \
  eslint-config-prettier \
  @eslint/js \
  typescript-eslint

eslint.config.js (flat config, ESLint 9+):

import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettierConfig from 'eslint-config-prettier';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  prettierConfig, // отключает правила ESLint, конфликтующие с Prettier
  {
    rules: {
      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    },
  }
);

.prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always"
}

.prettierignore:

dist/
build/
node_modules/
*.min.js

package.json скрипты:

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

VS Code — .vscode/settings.json:

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

Ключевые моменты

  • eslint-config-prettier — обязателен, иначе ESLint и Prettier конфликтуют по правилам форматирования.
  • Prettier форматирует «как», ESLint проверяет «что» — не пытайся форматировать через ESLint.
  • Flat config (eslint.config.js) — стандарт с ESLint 9; старый .eslintrc объявлен устаревшим.
  • formatOnSave в VS Code снимает необходимость помнить про запуск форматтера.

Варианты

  • Biome — объединяет линтер и форматтер в одном инструменте, очень быстрый, альтернатива всей связке.
  • eslint-plugin-react + eslint-plugin-react-hooks — добавь для React-проектов.
  • Stylelint — аналог ESLint для CSS/SCSS.

Связанные рецепты / темы