ESLint и Vite через vite-plugin-eslint

Роль ESLint в современном Vite-проекте

ESLint выполняет функцию статического анализатора JavaScript и TypeScript-кода, выявляя ошибки, потенциально опасные конструкции и несоответствия стилевым правилам до выполнения приложения. В экосистеме Vite он используется не как отдельный этап сборки, а как часть процесса разработки, интегрированная в dev-сервер.

Vite ориентирован на быстрый цикл разработки с мгновенными обновлениями модулей через ESM и HMR. В этом контексте ESLint работает параллельно, не вмешиваясь в бандлинг, а анализируя исходный код при изменениях файлов.

vite-plugin-eslint: интеграционный слой

Плагин vite-plugin-eslint обеспечивает подключение ESLint к pipeline Vite. Он запускает проверку файлов при их изменении и передаёт результаты в систему логирования Vite или в overlay браузера.

Ключевая задача плагина:

  • выполнение lint-проверки в dev-режиме
  • отображение ошибок прямо в браузере
  • синхронизация с системой HMR
  • ограничение анализа только изменённых файлов

Установка и базовая интеграция

Основные зависимости:

npm install eslint vite-plugin-eslint --save-dev

или

yarn add eslint vite-plugin-eslint -D

Подключение в vite.config.js

import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    eslint({
      include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.vue'],
      exclude: ['node_modules']
    })
  ]
});

Поведение в режиме разработки

При активном dev-сервере Vite плагин перехватывает события изменения файлов и запускает ESLint только для затронутого модуля.

Основные особенности поведения:

  • анализ выполняется асинхронно
  • ошибки не блокируют сборку (по умолчанию)
  • сообщения выводятся в консоль Vite
  • при критических ошибках возможен overlay в браузере

Конфигурация ESLint в контексте Vite

Классический .eslintrc

{
  "env": {
    "browser": true,
    "es2022": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

Flat Config (ESLint 9+)

Современный формат конфигурации ESLint использует JavaScript-модульную структуру:

import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    files: ['**/*.{js,ts}'],
    rules: {
      'no-unused-vars': 'warn',
      'no-undef': 'error'
    }
  }
];

Vite-плагин корректно работает с flat config, поскольку использует стандартный ESLint API без привязки к устаревшему формату конфигурации.

Работа с TypeScript

При использовании TypeScript добавляется парсер и плагин:

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

Конфигурация:

export default [
  {
    files: ['**/*.ts'],
    languageOptions: {
      parser: '@typescript-eslint/parser'
    },
    plugins: {
      '@typescript-eslint': require('@typescript-eslint/eslint-plugin')
    },
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn'
    }
  }
];

Производительность в связке Vite + ESLint

Vite-плагин оптимизирует выполнение ESLint за счёт нескольких механизмов:

  • инкрементальный анализ — проверяются только изменённые файлы
  • кэширование результатов — повторные проверки ускоряются
  • деферред-выполнение — lint не блокирует HMR
  • фильтрация путей — исключение node_modules и сборочных артефактов

В больших проектах ключевое значение имеет ограничение области анализа через include.

Интеграция с Vue, React и другими фреймворками

Vue

eslint({
  include: ['src/**/*.{js,ts,vue}']
});

Для .vue файлов часто используется:

  • eslint-plugin-vue
  • vue-eslint-parser

React

npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev
rules: {
  'react/react-in-jsx-scope': 'off',
  'react-hooks/rules-of-hooks': 'error'
}

Обработка ошибок и overlay

При наличии ошибок ESLint Vite может отображать их в браузере через overlay-слой.

Типичный сценарий:

  • изменение файла
  • запуск ESLint
  • обнаружение ошибки
  • передача результата в dev overlay
  • блокировка отображения текущего модуля до исправления (опционально)

Overlay управляется настройками плагина и Vite:

eslint({
  emitWarning: true,
  emitError: true
});

Частые конфигурационные ошибки

Конфликт версий ESLint

Несовместимость ESLint 8 и 9 может приводить к:

  • ошибкам парсинга конфигурации
  • отсутствию поддержки flat config в старых плагинах

Дублирование проверки

Одновременное использование:

  • vite-plugin-eslint
  • eslint-loader (устаревший)
  • CI lint-скриптов в watch-режиме

приводит к избыточной нагрузке.

Игнорирование файлов

Неправильная настройка exclude вызывает анализ:

  • сборочных директорий (dist)
  • зависимостей (node_modules)
  • временных файлов

что резко снижает производительность.

Использование в CI/CD

Несмотря на интеграцию в Vite, основной контроль качества кода часто выполняется в CI:

eslint "src/**/*.{js,ts}"

В таком режиме vite-plugin-eslint отключается, поскольку dev-ориентированная логика не требуется.

Сравнение подходов интеграции ESLint в Vite

Подход Особенности
vite-plugin-eslint Интерактивная проверка в dev-сервере
CLI ESLint Полный анализ проекта, CI
pre-commit hooks Проверка перед коммитом

Комбинация этих уровней формирует многоступенчатую систему контроля качества.

Архитектурные особенности взаимодействия

Vite использует модульный pipeline, где плагины подключаются через единый интерфейс Rollup-подобной системы. vite-plugin-eslint внедряется в этап трансформации файлов, не вмешиваясь в финальную сборку.

Схема взаимодействия:

  • файловое событие Vite
  • триггер плагина ESLint
  • запуск ESLint API
  • возврат результатов
  • интеграция в лог Vite и HMR слой

Оптимальные практики конфигурации

  • ограничение include до исходного кода
  • отключение тяжёлых правил в dev-режиме
  • разделение конфигурации lint для dev и CI
  • использование flat config при ESLint 9+
  • исключение дублирующих инструментов анализа

Взаимодействие с HMR и модульной системой Vite

Hot Module Replacement в Vite работает независимо от ESLint, однако плагин влияет на UX процесса разработки:

  • ошибки ESLint не перезапускают HMR
  • обновления модулей происходят параллельно lint-проверке
  • состояние ошибок синхронизируется с overlay

Это обеспечивает разделение ответственности между сборщиком и анализатором кода.

Оглавление