Линтинг и форматирование

Линтер находит потенциальные ошибки и нарушения стиля кода. Форматтер автоматически приводит код к единому стилю. Вместе они обеспечивают консистентность кода в команде без ручных ревью стиля.

ESLint — линтер JavaScript

Установка

npm install -D eslint @eslint/js
npx eslint --init  # Интерактивная настройка

Конфигурация (eslint.config.js)

Современный формат конфигурации (Flat Config, ESLint 9+):

// eslint.config.js
import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    rules: {
      // Запрет console.log в продакшн-коде
      'no-console': 'warn',
      // Требовать строгое равенство ===
      'eqeqeq': 'error',
      // Запрет объявленных, но неиспользуемых переменных
      'no-unused-vars': 'error',
      // Запрет var, только let/const
      'no-var': 'error',
      // Предпочитать const где возможно
      'prefer-const': 'warn'
    }
  }
];

Запуск ESLint

npx eslint src/          # Проверить папку
npx eslint src/ --fix    # Автоматически исправить что можно

Используйте --fix только для механических правок (пробелы, точки с запятой). Логические ошибки ESLint не исправляет.

Prettier — форматтер кода

Prettier форматирует код по единому стилю, убирая все споры о пробелах и переносах строк.

Установка

npm install -D prettier

Конфигурация (.prettierrc)

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

Запуск Prettier

npx prettier --write src/    # Форматировать все файлы
npx prettier --check src/    # Только проверить (в CI)

.editorconfig

.editorconfig настраивает базовые параметры редактора независимо от IDE:

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

VS Code поддерживает .editorconfig через расширение EditorConfig.EditorConfig. Добавьте его в рекомендуемые для команды (.vscode/extensions.json).

Husky — Git хуки

Husky позволяет запускать линтер и тесты автоматически перед каждым коммитом.

npm install -D husky lint-staged
npx husky init

pre-commit хук

# .husky/pre-commit
npx lint-staged

lint-staged конфигурация

// package.json
{
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,css}": [
      "prettier --write"
    ]
  }
}

Теперь при каждом git commit автоматически запускается форматирование и линтинг только изменённых файлов.

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

npm install -D eslint-config-prettier

// eslint.config.js
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  prettier,  // Должен быть последним — отключает конфликтующие правила
  {
    rules: {
      'no-unused-vars': 'error',
      // Форматирование здесь НЕ настраиваем — это работа Prettier
    }
  }
];