ESLint и Prettier

Когда проект растёт, важно, чтобы код был не только рабочим, но и чистым, однородным, удобным для команды или себя спустя полгода. Две мощные вещи помогают: ESLint и Prettier. Сейчас расскажу, в чём разница, зачем оба, и как настроить.

Разница между ESLint и Prettier

• Prettier - это форматтер. Он автоматически форматирует код (отступы, кавычки, переносы строк) так, чтобы он выглядел ровно одинаково у всех. betterstack.com+1
• ESLint - это линтер/анализатор качества кода. Он проверяет, нет ли ошибок, плохих практик, неиспользуемых переменных, нарушений стандартов. Форматирование - лишь часть, но не основная его задача. betterstack.com
• Как говорится:

“Linters have two categories of rules: formatting rules … Prettier alleviates the need for this whole category … code-quality rules: e.g. no-unused-vars … Prettier does nothing to help with those kinds of rules.” prettier.io

Почему они работают вместе

• Prettier делает форматирование обязательным, единообразным — избавляет от споров “какой стиль?”, “два пробела или таб?”, “кавычки одинарные или двойные?”.
• ESLint ловит реальные проблемы и нарушенные стандарты, формирует правила команды.
• Если пытаться делать всё только ESLint’ом (и проверка форматирования + качество) → часто возникают конфликты и дополнительная настройка. Лучший путь: Prettier за формат, ESLint за качество. Stack Overflow

Как настроить (основной вариант)

1. Установи пакеты:

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

1. Настрой .prettierrc (например):

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

1. Настрой .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"  // включает eslint-plugin-prettier + eslint-config-prettier
  ],
  rules: {
    "no-unused-vars": "warn",
    // другие правила качества
  }
};

1. Добавь скрипты в package.json, например:

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write ."
}

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

Возможные “подводные” моменты

• Если ESLint и Prettier “соревнуются” - форматирование вызывает ошибки в ESLint, и наоборот. Поэтому расширение eslint-config-prettier (или ‘plugin:prettier/recommended’) отключает конфликтующие правила форматирования в ESLint. Stack Overflow+1
• Не превращай это в “гоночку” по настройке - важнее, чтобы команда или ты самому чувствовал: код читаем и стандартизирован.

Итог

Попробуй такой “тандем”: Prettier = стиль + форматирование, ESLint = качество + правило + поддержка темпа команды. Это не просто модный “сетап”, а реальный шаг к более аккуратному базису фронтенда особенно если ты ведёшь свои проекты и потом будешь возвращаться к коду.