Интеграция с Prettier и конфликты правил
Интегрируйте Prettier с ESLint, избегайте дублирующихся правил и разрешайте конфликты между правилами стиля и логики.
«Интеграция с Prettier и конфликты правил» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.
Введение
Цель: совместить Prettier (форматирование) и ESLint (логика и стиль), не создавая конфликтов.
Установка
Установите Prettier и плагины и конфигурации ESLint для их плавной интеграции.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettierКонфигурация Prettier
У Prettier есть собственный файл конфигурации. Используйте его только для параметров форматирования (кавычки, точки с запятой, длина строки).
// .prettierrc.json
{
"semi": false,
"singleQuote": true
}Интеграция конфигурации
Добавьте plugin:prettier/recommended в расширяемые конфигурации ESLint. Он включает eslint-config-prettier и eslint-plugin-prettier.
// .eslintrc.js
module.exports = {
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}Пример конфликта
Без конфигурации ESLint и Prettier могут расходиться во мнениях (например, насчёт точек с запятой). Конфигурация отключает конфликтующие правила ESLint.
// demo.ts
const msg = "hi"
console.log(msg)
// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettierЗапуск проверок
Запускайте ESLint для проверки логики и стиля, а Prettier — для форматирования. Оба инструмента также можно интегрировать в редактор.
npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"Вопрос
Быстрая проверка: что делает eslint-config-prettier?
Повторение
Повторение: установите Prettier и конфигурации, добавьте их в расширяемые конфигурации ESLint, отключите конфликтующие правила и запускайте оба инструмента для согласованной работы.
Часто задаваемые вопросы
Урок «Интеграция с Prettier и конфликты правил» бесплатный?
Да — полный текст урока «Интеграция с Prettier и конфликты правил» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Интеграция с Prettier и конфликты правил»?
Интегрируйте Prettier с ESLint, избегайте дублирующихся правил и разрешайте конфликты между правилами стиля и логики. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Интеграция с Prettier и конфликты правил»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- ESLint и @typescript-eslint
- Интеграция с Prettier и конфликты правил
- Распространённые наборы правил для реальных проектов