eslint-plugin-vue — Official ESLint Plugin for Vue.js

Introduction

eslint-plugin-vue is the official ESLint plugin maintained by the Vue.js team. It parses Vue single-file components (.vue files) and applies linting rules to template expressions, script blocks, and custom blocks, catching errors and enforcing consistent code style across Vue projects.

What eslint-plugin-vue Does

• Lints Vue template syntax including directives, interpolations, and event bindings
• Validates script blocks using standard ESLint JavaScript and TypeScript rules
• Enforces Vue-specific best practices like prop type definitions and component naming conventions
• Provides auto-fixable rules for formatting issues in both templates and scripts
• Supports Vue 2 and Vue 3 with version-specific rule configurations

Architecture Overview

The plugin includes a custom parser (vue-eslint-parser) that produces an AST covering both the template and script sections of a .vue file. Template nodes are represented as a VElement tree, while script sections use the standard ESTree AST. ESLint rules from the plugin traverse this combined AST to check both template expressions and script logic in a single pass.

Self-Hosting & Configuration

• Install alongside ESLint: npm install -D eslint eslint-plugin-vue
• Use flat config (ESLint 9+): spread pluginVue.configs["flat/recommended"] into your config array
• For legacy config, extend plugin:vue/vue3-recommended in your .eslintrc extends array
• Override individual rules in the rules section to adjust strictness per project
• Pair with @vue/eslint-config-typescript for TypeScript Vue projects

Key Features

• Over 100 rules covering template syntax, reactivity patterns, and component structure
• Preset configurations: essential, strongly-recommended, and recommended for incremental adoption
• Auto-fix support for many formatting and style rules via eslint --fix
• Custom block support for linting <i18n>, <docs>, or other custom SFC blocks
• Seamless integration with Prettier through eslint-config-prettier

Comparison with Similar Tools

• Vetur / Volar — IDE extensions providing type checking and IntelliSense; eslint-plugin-vue focuses on linting rules and CI integration
• vue-tsc — TypeScript type checker for Vue; the ESLint plugin catches style and best-practice issues beyond types
• ESLint core — Handles JavaScript and TypeScript; the Vue plugin adds template and SFC-aware rules
• Biome — Fast linter with growing Vue support; eslint-plugin-vue has the most comprehensive Vue rule set
• Stylelint — CSS/SCSS linter; eslint-plugin-vue covers template and script sections, not style blocks

FAQ

Q: Does the plugin support Vue 2 and Vue 3? A: Yes. Use vue3-essential, vue3-recommended presets for Vue 3, and essential, recommended for Vue 2.

Q: Can I use it with TypeScript? A: Yes. Combine it with @vue/eslint-config-typescript and typescript-eslint for full TypeScript support in Vue components.

Q: How do I disable a rule for a specific template block? A: Use <!-- eslint-disable vue/rule-name --> comments in the template section, similar to JavaScript eslint-disable comments.

Q: Does it work with ESLint flat config? A: Yes. Version 9+ provides flat config presets via pluginVue.configs["flat/recommended"] and similar entries.

Sources

• https://github.com/vuejs/eslint-plugin-vue
• https://eslint.vuejs.org/