ESLint и @typescript-eslint
Настройте ESLint с плагином @typescript-eslint, чтобы выявлять проблемы, связанные с типами, и поддерживать единообразный стиль.
«ESLint и @typescript-eslint» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.
Введение
Цель: использовать ESLint вместе с @typescript-eslint, чтобы находить ошибки и соблюдать единый стиль в проектах TypeScript.
Установка
Установите основной ESLint, а также @typescript-eslint/parser и @typescript-eslint/eslint-plugin.
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-pluginКонфигурация
Настройте ESLint на использование анализатора TS и рекомендуемых правил. При необходимости добавьте правила для конкретного проекта.
// .eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
rules: {
"@typescript-eslint/no-unused-vars": "warn"
}
};Пример проверки стиля
При использовании анализатора с поддержкой TS ESLint выделяет отсутствующие аргументы, неиспользуемые переменные и проблемы со стилем.
// demo.ts
function greet(name: string) {
console.log("Hello", name)
}
greet("Ada")
greet() // ESLint error: missing arg
Правила с учётом типов
Укажите tsconfig.json в parserOptions для правил, которым нужны сведения о типах, например для обнаружения необработанных обещаний.
// tsconfig.json must be linked for type-aware rules
{
"parserOptions": {
"project": "./tsconfig.json"
}
}
// Example: no-floating-promises
async function f() {
fetch("/api") // ESLint error: unhandled promise
}Запуск проверки стиля
Запустите ESLint для своей кодовой базы. Добавьте --fix, чтобы автоматически применить безопасные исправления.
npx eslint "src/**/*.{ts,tsx}" --fixВопрос
Быстрая проверка: зачем использовать @typescript-eslint в дополнение к основному ESLint?
Повторение
Повторение: установите ESLint и @typescript-eslint, настройте анализатор, подключите рекомендуемые правила и запускайте средство проверки с правилами, учитывающими типы, чтобы поддерживать чистоту кода.
Часто задаваемые вопросы
Урок «ESLint и @typescript-eslint» бесплатный?
Да — полный текст урока «ESLint и @typescript-eslint» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «ESLint и @typescript-eslint»?
Настройте ESLint с плагином @typescript-eslint, чтобы выявлять проблемы, связанные с типами, и поддерживать единообразный стиль. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «ESLint и @typescript-eslint»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- ESLint и @typescript-eslint
- Интеграция с Prettier и конфликты правил
- Распространённые наборы правил для реальных проектов