ESLint: настройка для Vite-проектов

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

Базовая установка начинается с добавления самого ESLint и сопутствующих зависимостей:

npm install eslint -D

или при использовании pnpm:

pnpm add eslint -D

После установки выполняется инициализация конфигурации:

npx eslint --init

Современные версии ESLint предлагают выбор между классической конфигурацией и flat config. В экосистеме Vite предпочтение постепенно смещается к flat config из-за его предсказуемости и лучшей масштабируемости.

Flat Config как основной подход ESLint

Flat config устраняет сложную систему наследования .eslintrc и заменяет её единым JavaScript-конфигом.

Пример базовой конфигурации eslint.config.js:

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{js,ts}"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
    },
    rules: {
      "no-unused-vars": "warn",
      "no-console": "off"
    }
  }
];

Для TypeScript требуется подключение парсера и плагина:

npm install -D typescript-eslint

Расширенная конфигурация:

import js from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ["**/*.ts"],
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.json"
      }
    },
    rules: {
      "@typescript-eslint/no-unused-vars": "warn"
    }
  }
];

Интеграция ESLint в Vite dev server

Vite не выполняет ESLint проверку по умолчанию, так как его задача — быстрый бандлинг и HMR. Для интеграции используется плагин vite-plugin-eslint.

Установка:

npm install vite-plugin-eslint -D

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

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

export default defineConfig({
  plugins: [
    eslint({
      cache: false,
      include: ["src/**/*.js", "src/**/*.ts", "src/**/*.vue"]
    })
  ]
});

Этот плагин выполняет проверку кода во время разработки и выводит ошибки прямо в консоль Vite-сервера, а также в браузерный overlay.

Работа ESLint с TypeScript в Vite

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

  • TypeScript Compiler проверяет типы
  • ESLint проверяет стиль и логические ошибки

Конфигурация часто включает @typescript-eslint:

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Фрагмент настройки:

export default [
  {
    files: ["**/*.ts"],
    languageOptions: {
      parser: require("@typescript-eslint/parser"),
    },
    plugins: {
      "@typescript-eslint": require("@typescript-eslint/eslint-plugin"),
    },
    rules: {
      "@typescript-eslint/explicit-function-return-type": "warn",
      "@typescript-eslint/no-explicit-any": "error"
    }
  }
];

ESLint для React в Vite

При использовании Vite с React добавляется поддержка JSX и React Hooks правил:

npm install -D eslint-plugin-react eslint-plugin-react-hooks

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

export default [
  {
    files: ["**/*.jsx", "**/*.tsx"],
    plugins: {
      react: require("eslint-plugin-react"),
      "react-hooks": require("eslint-plugin-react-hooks")
    },
    rules: {
      "react/react-in-jsx-scope": "off",
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  }
];

Дополнительно часто подключается:

npm install -D eslint-plugin-react-refresh

для корректной работы Fast Refresh в Vite.

ESLint для Vue в Vite

Vite является основным инструментом для Vue 3, поэтому ESLint здесь особенно важен.

Установка:

npm install -D eslint-plugin-vue vue-eslint-parser

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

export default [
  {
    files: ["**/*.vue"],
    languageOptions: {
      parser: require("vue-eslint-parser")
    },
    rules: {
      "vue/multi-word-component-names": "off",
      "vue/no-unused-vars": "warn"
    }
  }
];

Игнорирование файлов и производительность

ESLint в Vite-проектах должен исключать тяжёлые директории:

node_modules
dist
.vite
coverage

Для flat config:

export default [
  {
    ignores: ["dist", "node_modules", "coverage"]
  }
];

Использование кеширования ускоряет повторные проверки:

eslint . --cache

Интеграция с package.json scripts

Типовой набор скриптов:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

В Vite-проектах это становится стандартным этапом перед сборкой или коммитом.

Pre-commit проверка через Husky и lint-staged

Для предотвращения попадания невалидного кода в репозиторий применяется связка Husky + lint-staged.

Установка:

npm install -D husky lint-staged

Инициализация Husky:

npx husky init

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

{
  "lint-staged": {
    "*.{js,ts,vue}": "eslint --fix"
  }
}

Hook .husky/pre-commit:

npx lint-staged

Совмещение ESLint и Prettier

В Vite-проектах часто возникает конфликт между форматированием ESLint и Prettier. Решение — разделение ответственности:

Установка:

npm install -D prettier eslint-config-prettier

Добавление в конфигурацию:

import prettier from "eslint-config-prettier";

export default [
  prettier
];

Prettier отключает конфликтующие правила ESLint, оставляя форматирование отдельному инструменту.

Проверка кода при сборке Vite

ESLint не блокирует сборку Vite по умолчанию. Для строгих проектов добавляется отдельный шаг:

eslint . && vite build

или через CI pipeline.

В более строгих конфигурациях ESLint интегрируется в pipeline GitHub Actions:

- name: Lint
  run: npm run lint

Типичные проблемы интеграции ESLint с Vite

Часто встречающиеся ошибки конфигурации:

Отсутствие поддержки ESM в конфиге Vite использует ES modules, поэтому ESLint config должен быть совместимым.

Проблемы с parserOptions.project TypeScript может требовать корректного пути к tsconfig.

Дублирование правил между плагинами Особенно в связке Vue + TypeScript + ESLint.

Замедление dev-сервера Решается отключением синхронного lint в плагинах и использованием кеша.

Строгая конфигурация ESLint для Vite-проектов

Типовой набор правил для production-уровня:

rules: {
  "no-unused-vars": "error",
  "no-console": "warn",
  "eqeqeq": "error",
  "curly": "error",
  "prefer-const": "error",
  "no-var": "error"
}

Такая конфигурация формирует единый стиль кода и снижает количество логических ошибок.

Архитектурная роль ESLint в Vite-экосистеме

ESLint в Vite-проектах выполняет роль не просто линтера, а элемента качества архитектуры:

  • фиксирует договорённости по стилю
  • предотвращает деградацию кодовой базы
  • стандартизирует работу команды
  • интегрируется в CI/CD пайплайны
  • обеспечивает предсказуемость поведения модулей

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

Оглавление