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

> eslint-plugin-vue is the official ESLint plugin that provides linting rules for Vue.js single-file components, enforcing best practices and catching errors in template, script, and style blocks.

## Install

Save in your project root:

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

## Quick Use
```bash
npm install --save-dev eslint eslint-plugin-vue
```
```js
// eslint.config.js
import pluginVue from "eslint-plugin-vue";
export default [...pluginVue.configs["flat/recommended"]];
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-9678d9ff
Author: AI Open Source