ESLint в проектах на Vue

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

Vue-приложения строятся вокруг компонентов, содержащих шаблон, скрипт и стили. ESLint в таком контексте выполняет несколько уровней анализа:

• проверка JavaScript/TypeScript логики внутри компонентов
• анализ шаблонов Vue (template AST)
• контроль правил именования и структуры компонентов
• предотвращение анти-паттернов реактивности
• унификация стиля кода в больших командах

Классический линтер для JavaScript недостаточен, поэтому используется расширение через плагины, главным из которых является eslint-plugin-vue, обеспечивающий поддержку .vue файлов.

Базовая интеграция ESLint в Vue-проект

Типовой Vue-проект инициализируется через Vite или Vue CLI, где ESLint подключается либо автоматически, либо вручную.

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

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

Для TypeScript дополнительно:

• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin

Конфигурация может быть представлена в формате .eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended"
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2022,
    sourceType: "module"
  },
  rules: {
    "vue/multi-word-component-names": "off"
  }
};

Ключевой момент — использование vue-eslint-parser, который позволяет корректно разбирать .vue файлы, включая <template> и <script> блоки.

Разбор Vue SFC и работа парсера

Single File Components (SFC) требуют многоуровневого анализа:

• верхний уровень разбора выполняет vue-eslint-parser
• внутри <script> применяется JS/TS парсер
• внутри <template> используется отдельная логика анализа Vue AST

Это позволяет ESLint:

• находить ошибки в директивах (v-if, v-for)
• проверять корректность props
• контролировать использование emit-событий
• анализировать доступ к реактивным данным

eslint-plugin-vue и уровни строгости

eslint-plugin-vue предоставляет набор пресетов:

• vue3-essential — минимальный набор критических правил
• vue3-strongly-recommended — расширенные правила качества
• vue3-recommended — полный набор рекомендаций

Пример расширенной конфигурации:

extends: [
  "eslint:recommended",
  "plugin:vue/vue3-recommended"
]

Правила охватывают:

• корректность использования v-bind и v-model
• обязательность ключей в списках
• запрет конфликтующих директив
• контроль структуры компонентов

Работа с Composition API

Composition API изменяет структуру логики компонентов, что влияет на правила линтинга.

Типичные проверки:

• корректное использование ref и reactive
• запрет неиспользуемых реактивных переменных
• контроль побочных эффектов в watch
• проверка зависимостей computed

Пример правила:

"vue/no-ref-as-operand": "error"

При работе с script setup анализ становится более статическим, так как отсутствует классическая структура export default.

TypeScript и строгая типизация

В Vue 3 TypeScript используется широко, что требует интеграции:

parser: "vue-eslint-parser",
parserOptions: {
  parser: "@typescript-eslint/parser"
}

Ключевые правила:

• запрет any
• контроль типов props
• проверка emits
• анализ return типов в composables

ESLint в связке с TypeScript позволяет выявлять ошибки, которые не обнаруживаются во время выполнения.

Структурные правила компонентов

Vue-проекты часто требуют единообразия архитектуры компонентов.

ESLint может контролировать:

• порядок секций (template, script, style)
• обязательность имен компонентов
• ограничения на вложенность компонентов
• запрет логики в template

Пример правил:

"vue/component-definition-name-casing": ["error", "PascalCase"],
"vue/order-in-components": "error"

Работа с шаблонами (template linting)

Template-часть Vue требует отдельного набора правил:

• корректность директив
• запрет сложных выражений в шаблоне
• контроль key в v-for
• предотвращение утечек состояния

Пример:

"vue/no-unused-vars": "error",
"vue/require-v-for-key": "error"

Сложные выражения в шаблоне ограничиваются для повышения читаемости:

<!-- нежелательно -->
<div>{{ items.filter(i => i.active).map(i => i.name) }}</div>

Интеграция с Vite

В современных проектах ESLint подключается через Vite-плагин:

• vite-plugin-eslint
• локальный CLI запуск

Пример:

import eslint from "vite-plugin-eslint";

export default {
  plugins: [eslint()]
};

ESLint выполняется при dev-сборке и может блокировать некорректный код до рендера приложения.

Vue CLI и встроенный ESLint

Vue CLI предоставляет встроенную поддержку ESLint:

• автоматическая установка при создании проекта
• интерактивный выбор правил
• интеграция с webpack-dev-server

В режиме разработки ошибки отображаются прямо в браузере через overlay.

Prettier и конфликт форматирования

В Vue-проектах часто используется связка ESLint + Prettier.

Основная проблема — пересечение правил форматирования:

• ESLint контролирует семантику
• Prettier отвечает за стиль

Решение:

extends: [
  "plugin:vue/vue3-recommended",
  "prettier"
]

И использование:

• eslint-config-prettier
• eslint-plugin-prettier (реже)

Это отключает конфликтующие правила форматирования.

Кастомные правила для Vue-архитектуры

В крупных проектах вводятся дополнительные ограничения:

• запрет импортов между слоями (UI → domain → infra)
• контроль использования composables
• ограничение прямого доступа к store

Пример:

"no-restricted-imports": [
  "error",
  {
    paths: [
      {
        name: "@/store",
        message: "Use composables instead"
      }
    ]
  }
]

Monorepo и масштабирование ESLint

В монорепозиториях Vue-приложений ESLint применяется на нескольких уровнях:

• root конфигурация
• package-level overrides
• shared config пакеты

Пример структуры:

/packages
  /app-vue
  /ui-kit
  /shared
.eslintrc.js

Важно:

• избегать дублирования правил
• централизовать plugin-конфигурации
• синхронизировать версии ESLint

Overrides для .vue и .ts

ESLint позволяет задавать разные правила:

overrides: [
  {
    files: ["*.vue"],
    rules: {
      "vue/multi-word-component-names": "off"
    }
  },
  {
    files: ["*.ts"],
    rules: {
      "@typescript-eslint/no-explicit-any": "error"
    }
  }
]

Это критично для Vue-проектов, где шаблоны и логика имеют разные требования.

Проверка реактивности и типичные ошибки

ESLint выявляет частые проблемы Vue-разработки:

• потеря реактивности через деструктуризацию
• неправильное использование ref.value
• мутирование props
• использование неинициализированных реактивных переменных

Пример анти-паттерна:

const { count } = reactive(state);
count++;

Такой код ломает реактивную связь, и линтер может предупреждать об этом через специфические правила.

CI/CD интеграция

ESLint в Vue-проектах часто включается в pipeline:

• запуск eslint .
• блокировка merge при ошибках
• генерация отчетов

Пример команды:

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

В CI используется:

• GitHub Actions
• GitLab CI
• Jenkins

Производительность линтинга

При больших Vue-проектах важны оптимизации:

• кеширование ESLint (--cache)
• исключение node_modules
• ограничение scope файлов
• параллельный запуск

Пример:

eslint . --cache --max-warnings=0

Эволюция правил в Vue 3

С переходом на Vue 3 изменились ключевые правила:

• отказ от filters
• усиление роли Composition API
• поддержка script setup
• более строгий контроль emits

ESLint-конфигурации адаптировались через новые пресеты vue3-*, отражающие современную архитектуру фреймворка.