Идеальный код: Полное руководство по настройке ESLint и Prettier в VS Code

В мире современной веб-разработки чистый, единообразный и безошибочный код — не роскошь, а необходимость. Настройка связки ESLint и Prettier в вашем редакторе превращает рутинную проверку кода в автоматизированный процесс, который работает на вас. Это не просто инструменты — это ваш персональный наставник по стилю и качеству, интегрированный прямо в рабочий процесс.

Зачем это нужно?

Представьте: вы пишете код, и редактор моментально подсвечивает потенциальные ошибки, предлагает исправления и автоматически форматирует код при сохранении. Это экономит часы на code review, предотвращает глупые баги и делает код команды единообразным, даже если над проектом работают десять разных разработчиков. ESLint отвечает за качество и поиск проблем, Prettier — за бескомпромиссное форматирование.

Пошаговая настройка

1. Установка расширений

Откройте панель расширений в VS Code (Ctrl+Shift+X) и установите:

• ESLint от Microsoft
• Prettier — Code formatter

2. Инициализация проекта

Откройте терминал в корне вашего проекта и выполните:

1. npm init -y (если package.json ещё нет)
2. npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
3. npx eslint --init — ответьте на вопросы мастера настройки

3. Конфигурационные файлы

Создайте в корне проекта три файла:

.eslintrc.json (пример для JavaScript/React):

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "warn",
    "react/prop-types": "off"
  }
}

.prettierrc:

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

.eslintignore и .prettierignore (можно один файл):

node_modules
build
dist
*.min.js

4. Настройка VS Code

Откройте настройки (Ctrl+,) и добавьте в settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

Продвинутые сценарии

Работа в команде

Установите Husky и lint-staged для автоматической проверки кода перед коммитом:

npm install --save-dev husky lint-staged

Добавьте в package.json:

"scripts": {
  "prepare": "husky install"
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
}

TypeScript поддержка

Установите дополнительные пакеты:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

И обновите .eslintrc.json, добавив TypeScript-конфигурацию.

Решение проблем

• Конфликты форматирования: Убедитесь, что eslint-config-prettier установлен и добавлен в extends последним.
• ESLint не работает: Перезагрузите VS Code (Ctrl+Shift+P → "Developer: Reload Window").
• Разные настройки в команде: Закоммитьте .eslintrc.json и .prettierrc в репозиторий.

FAQ

В чем разница между ESLint и Prettier?

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

Нужно ли настраивать оба инструмента?

Да, это лучшая практика. Они дополняют друг друга: ESLint следит за качеством, Prettier — за единообразием стиля.

Работает ли это с TypeScript?

Да, полностью. Нужно установить дополнительные пакеты @typescript-eslint и настроить парсер.

Как отключить автоформатирование для конкретного файла?

Добавьте комментарий в начало файла: /* eslint-disable */ или // prettier-ignore для следующей строки.

Можно ли использовать разные настройки для разных проектов?

Да, конфигурационные файлы (.eslintrc, .prettierrc) читаются из корня каждого проекта, поэтому настройки будут индивидуальными.