Frontend Academy · Урок

Настройка Prettier и ESLint

«Настройка Prettier и ESLint» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем автоматизировать стиль кода?

Ручные споры о форматировании кода отнимают время команды. Prettier автоматически форматирует код в едином стиле. ESLint обнаруживает ошибки и требует соблюдения лучших практик. Вместе они устраняют целые категории замечаний при проверке кода.

Установка Prettier

Установите Prettier как зависимость для разработки, создайте файл config и добавьте скрипт форматирования в package.json. Prettier работает без config — настройки по умолчанию разумны, но их можно изменить.

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Интеграция Prettier с VSCode

Установите расширение Prettier - Code Formatter. Затем выберите его форматтером по умолчанию и включите formatOnSave в настройках. Теперь Prettier будет запускаться при каждом сохранении файла.

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Установка ESLint

Установите ESLint и инициализируйте его с помощью npm init @eslint/config. Этот мастер поможет выбрать окружение (браузер или Node), систему модулей и поддержку TypeScript. Он создаст файл eslint.config.js.

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

Пример конфигурации ESLint

Простая плоская конфигурация ESLint для браузерного проекта на JavaScript. Правила могут иметь значения 'error', 'warn' или 'off'. Расширяйте общие конфигурации, например рекомендуемую @eslint/js, чтобы создать надёжную основу.

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

ESLint для TypeScript

В проектах TypeScript добавьте typescript-eslint, чтобы обнаруживать специфичные для TypeScript проблемы: небезопасное использование any, отсутствие типов возвращаемых значений и неправильное использование Promises.

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Совместное использование Prettier и ESLint

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

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

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore и .prettierignore

Укажите инструментам, какие файлы нужно пропускать. Файл .eslintignore использует синтаксис gitignore. Обычно в него включают node_modules, dist и сгенерированные файлы.

# .eslintignore
node_modules
dist
.next
coverage

Скрипты npm для проверки кода

Добавьте в package.json скрипты для проверки и форматирования, чтобы CI и участники команды могли запускать их единообразно.

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

lint-staged и husky для хуков перед фиксацией

Используйте husky + lint-staged, чтобы автоматически проверять и форматировать только подготовленные файлы перед каждой фиксацией в git. Это не позволяет неотформатированному или сломанному коду попасть в репозиторий.

npm install --save-dev husky lint-staged
npx husky init

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

EditorConfig для базового единообразия

Файл .editorconfig обеспечивает базовые настройки редактора (стиль отступов, окончания строк) во всех редакторах и IDE независимо от подключённых плагинов. Добавьте его вместе с Prettier.

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Быстрая проверка

Зачем добавлять eslint-config-prettier в конфигурацию ESLint, если проект также использует Prettier?

Итоги: Prettier и ESLint

Prettier автоматически форматирует код при сохранении через расширение VSCode. ESLint обнаруживает ошибки и нарушения стиля. Используйте eslint-config-prettier, чтобы избежать конфликтов. Добавьте lint-staged + husky для проверки перед фиксацией. Единообразные инструменты устраняют споры о форматировании и обнаруживают ошибки до выпуска кода.

Часто задаваемые вопросы

Урок «Настройка Prettier и ESLint» бесплатный?

Да — полный текст урока «Настройка Prettier и ESLint» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка Prettier и ESLint»?

Добавляйте Prettier для автоматического форматирования и ESLint для выявления ошибок, настраивайте оба инструмента и интегрируйте их в рабочий процесс форматирования при сохранении. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Настройка Prettier и ESLint»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Chrome DevTools: Elements, Console, Network
VSCode: расширения, Emmet и сочетания клавиш
Настройка Prettier и ESLint
Совместимость браузеров и caniuse.com

← Назад к Frontend Academy