eslint-plugin-vue
Advanced tools
The eslint-plugin-vue npm package is a plugin for ESLint specifically designed for Vue.js applications. It provides linting rules that are tailored to the Vue.js framework, helping developers to write consistent and error-free code by following best practices and avoiding common mistakes.
Style Guide Enforcement
Enforces a style guide by limiting the number of attributes per line in Vue templates. This helps in maintaining readability and consistency in the codebase.
"vue/max-attributes-per-line": ["error", { "singleline": 3, "multiline": { "max": 1, "allowFirstLine": false } }]Component Naming
Ensures that component names in templates are written in a specific case, such as PascalCase, which is a common convention in Vue.js projects.
"vue/component-name-in-template-casing": ["error", "PascalCase"]Avoiding Deprecated Features
Prevents the use of deprecated features like the 'slot' attribute, encouraging developers to use the updated syntax and features of Vue.js.
"vue/no-deprecated-slot-attribute": "error"Prop Validation
Ensures that every prop has a default value, which can prevent bugs and make the components more predictable.
"vue/require-default-prop": "error"Script Indentation
Enforces consistent indentation in the script section of Vue single-file components, which improves code readability and maintainability.
"vue/script-indent": ["error", 2, { "baseIndent": 1, "switchCase": 1, "ignores": [] }]Similar to eslint-plugin-vue, eslint-plugin-react provides linting rules specific to React applications. It helps enforce best practices and conventions for React components, JSX syntax, and more.
This plugin is designed for Angular applications and offers linting rules that cater to the Angular framework's structure and coding styles, similar to how eslint-plugin-vue serves Vue.js developers.
For developers using Svelte, eslint-plugin-svelte3 provides linting rules tailored to the Svelte framework. It helps maintain code quality and consistency in a way that's analogous to eslint-plugin-vue's role for Vue.js.
Official ESLint plugin for Vue.js
Please refer to the official website.
This plugin follows Semantic Versioning. However, please note that we do not follow ESLint's Semantic Versioning Policy. In minor version releases, this plugin may change the sharable configs provided by the plugin or the default behavior of the plugin's rules in order to add features to the plugin. Because we want to add many features to the plugin soon, so that users can easily take advantage of new features in Vue and Nuxt.
According to our policy, any minor update may report more linting errors than the previous release. As such, we recommend using the tilde (~) in package.json to guarantee the results of your builds.
This project uses GitHub Releases.
Contributing is welcome! See the ESLint Vue Plugin Developer Guide.
Be sure to read the official ESLint guide before you start writing a new rule.
To see what an abstract syntax tree (AST) of your code looks like, you may use AST Explorer. After opening AST Explorer, select Vue as the syntax and vue-eslint-parser as the parser.
The default JavaScript parser must be replaced because Vue.js single file components are not plain JavaScript, but a custom file format. vue-eslint-parser is a replacement parser that generates an enhanced AST with nodes that represent specific parts of the template syntax, as well as the contents of the <script> tag.
To learn more about certain nodes in a produced AST, see the ESTree project page and the vue-eslint-parser AST documentation.
vue-eslint-parser provides a few useful parser services to help traverse the produced AST and access template tokens:
context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)context.parserServices.getTemplateBodyTokenStore()Check out an example rule to see usage of these services.
Be aware that depending on the code samples you write in tests, the RuleTester parser property must be set accordingly (this can be done on a test by test basis). See an example here.
If you're stuck, remember there are many rules available for reference. If you can't find the right solution, don't hesitate to reach out in issues – we're happy to help!
See the LICENSE file for license rights and limitations (MIT).
10.3.0
Added @typescript-eslint/parser as an optional peer dependency (#2775)
Add TypeScript IntelliSense support via eslint-typegen (#2770)
vue/no-deprecated-slot-attribute ignore option now supports regex patterns (#2773)
Fixed false negatives when using typescript-eslint v8 in vue/script-indent rule (#2775)
Update resources (#2752)
vue/no-restricted-html-elements now also checks SVG and MathML elements (#2755)
FAQs
Official ESLint plugin for Vue.js
The npm package eslint-plugin-vue receives a total of 3,760,720 weekly downloads. As such, eslint-plugin-vue popularity was classified as popular.
We found that eslint-plugin-vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.