Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
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
5.x
:exclamation:This branch contains eslint-plugin-vue@next
which is a pre-released 5.0
, but it's not the default version that you get with npm install eslint-plugin-vue
. In order to install this you need to specify either "eslint-plugin-vue": "next"
in package.json
or do npm install eslint-plugin-vue@next
.
Please try it and report any issues that you might have encountered.
If you want to check previous releases go here.
You can try this plugin on the Web.
^5.0.0
.>=6.5.0
npm install --save-dev eslint eslint-plugin-vue@next
Create .eslintrc.*
file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.
Example .eslintrc.js:
module.exports = {
extends: [
// add more generic rulesets here, such as:
// 'eslint:recommended',
'plugin:vue/essential'
],
rules: {
// override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error'
}
}
ESLint only targets .js
files by default. You must include the .vue
extension using the --ext
option or a glob pattern.
Examples:
eslint --ext .js,.vue src
eslint src/**/*.{js,vue}
All component-related rules are being applied to code that passes any of the following checks:
Vue.component()
expressionVue.extend()
expressionVue.mixin()
expressionexport default {}
in .vue
or .jsx
fileIf you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment // @vue/component
that marks object in the next line as a Vue component in any file, e.g.:
// @vue/component
const CustomComponent = {
name: 'custom-component',
template: '<div></div>'
}
Vue.component('AsyncComponent', (resolve, reject) => {
setTimeout(() => {
// @vue/component
resolve({
name: 'async-component',
template: '<div></div>'
})
}, 500)
})
eslint-disable
functionality in <template>
You can use <!-- eslint-disable -->
-like HTML comments in <template>
of .vue
files. For example:
<template>
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<div a="1" b="2" c="3" d="4">
</div>
</template>
If you want to disallow eslint-disable
functionality, please disable vue/comment-directive rule.
This plugin provides four predefined configs:
plugin:vue/base
- Settings and rules to enable correct ESLint parsingplugin:vue/essential
- Above, plus rules to prevent errors or unintended behaviorplugin:vue/strongly-recommended
- Above, plus rules to considerably improve code readability and/or dev experienceplugin:vue/recommended
- Above, plus rules to enforce subjective community defaults to ensure consistencyRules are grouped by priority to help you understand their purpose. The --fix
option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
Enforce all the rules in this category, as well as all higher priority rules, with:
{
"extends": "plugin:vue/base"
}
Rule ID | Description | |
---|---|---|
vue/comment-directive | support comment-directives in <template> | |
vue/jsx-uses-vars | prevent variables used in JSX to be marked as unused |
Enforce all the rules in this category, as well as all higher priority rules, with:
{
"extends": "plugin:vue/essential"
}
Rule ID | Description | |
---|---|---|
vue/no-async-in-computed-properties | disallow asynchronous actions in computed properties | |
vue/no-dupe-keys | disallow duplication of field names | |
vue/no-duplicate-attributes | disallow duplication of attributes | |
vue/no-parsing-error | disallow parsing errors in <template> | |
vue/no-reserved-keys | disallow overwriting reserved keys | |
:wrench: | vue/no-shared-component-data | enforce component's data property to be a function |
vue/no-side-effects-in-computed-properties | disallow side effects in computed properties | |
vue/no-template-key | disallow key attribute on <template> | |
vue/no-textarea-mustache | disallow mustaches in <textarea> | |
vue/no-unused-components | disallow registering components that are not used inside templates | |
vue/no-unused-vars | disallow unused variable definitions of v-for directives or scope attributes | |
vue/no-use-v-if-with-v-for | disallow use v-if on the same element as v-for | |
vue/require-component-is | require v-bind:is of <component> elements | |
:wrench: | vue/require-prop-type-constructor | require prop type to be a constructor |
vue/require-render-return | enforce render function to always return value | |
vue/require-v-for-key | require v-bind:key with v-for directives | |
vue/require-valid-default-prop | enforce props default values to be valid | |
vue/return-in-computed-property | enforce that a return statement is present in computed property | |
vue/valid-template-root | enforce valid template root | |
vue/valid-v-bind | enforce valid v-bind directives | |
vue/valid-v-cloak | enforce valid v-cloak directives | |
vue/valid-v-else-if | enforce valid v-else-if directives | |
vue/valid-v-else | enforce valid v-else directives | |
vue/valid-v-for | enforce valid v-for directives | |
vue/valid-v-html | enforce valid v-html directives | |
vue/valid-v-if | enforce valid v-if directives | |
vue/valid-v-model | enforce valid v-model directives | |
vue/valid-v-on | enforce valid v-on directives | |
vue/valid-v-once | enforce valid v-once directives | |
vue/valid-v-pre | enforce valid v-pre directives | |
vue/valid-v-show | enforce valid v-show directives | |
vue/valid-v-text | enforce valid v-text directives |
Enforce all the rules in this category, as well as all higher priority rules, with:
{
"extends": "plugin:vue/strongly-recommended"
}
Rule ID | Description | |
---|---|---|
:wrench: | vue/attribute-hyphenation | enforce attribute naming style on custom components in template |
:wrench: | vue/html-closing-bracket-newline | require or disallow a line break before tag's closing brackets |
:wrench: | vue/html-closing-bracket-spacing | require or disallow a space before tag's closing brackets |
:wrench: | vue/html-end-tags | enforce end tag style |
:wrench: | vue/html-indent | enforce consistent indentation in <template> |
:wrench: | vue/html-self-closing | enforce self-closing style |
:wrench: | vue/max-attributes-per-line | enforce the maximum number of attributes per line |
:wrench: | vue/mustache-interpolation-spacing | enforce unified spacing in mustache interpolations |
:wrench: | vue/name-property-casing | enforce specific casing for the name property in Vue components |
:wrench: | vue/no-multi-spaces | disallow multiple spaces |
vue/no-template-shadow | disallow variable declarations from shadowing variables declared in the outer scope | |
:wrench: | vue/prop-name-casing | enforce specific casing for the Prop name in Vue components |
vue/require-default-prop | require default value for props | |
vue/require-prop-types | require type definitions in props | |
:wrench: | vue/v-bind-style | enforce v-bind directive style |
:wrench: | vue/v-on-style | enforce v-on directive style |
Enforce all the rules in this category, as well as all higher priority rules, with:
{
"extends": "plugin:vue/recommended"
}
Rule ID | Description | |
---|---|---|
:wrench: | vue/attributes-order | enforce order of attributes |
:wrench: | vue/html-quotes | enforce quotes style of HTML attributes |
vue/no-v-html | disallow use of v-html to prevent XSS attack | |
:wrench: | vue/order-in-components | enforce order of properties in components |
vue/this-in-template | enforce usage of this in template |
Rule ID | Description | |
---|---|---|
:wrench: | vue/component-name-in-template-casing | enforce specific casing for the component naming style in template |
:wrench: | vue/multiline-html-element-content-newline | require a line break before and after the contents of a multiline element |
:wrench: | vue/no-spaces-around-equal-signs-in-attribute | disallow spaces around equal signs in attribute |
:wrench: | vue/script-indent | enforce consistent indentation in <script> |
:wrench: | vue/singleline-html-element-content-newline | require a line break before and after the contents of a singleline element |
vue/use-v-on-exact | enforce usage of exact modifier on v-on |
- :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
- :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
Rule ID | Replaced by |
---|---|
vue/no-confusing-v-for-v-if | vue/no-use-v-if-with-v-for |
The most rules of eslint-plugin-vue
require vue-eslint-parser
to check <template>
ASTs.
Make sure you have one of the following settings in your .eslintrc:
"extends": ["plugin:vue/recommended"]
"extends": ["plugin:vue/base"]
If you already use other parser (e.g. "parser": "babel-eslint"
), please move it into parserOptions
, so it doesn't collide with the vue-eslint-parser
used by this plugin's configuration:
- "parser": "babel-eslint",
"parserOptions": {
+ "parser": "babel-eslint",
"ecmaVersion": 2017,
"sourceType": "module"
}
The vue-eslint-parser
uses the parser which is set by parserOptions.parser
to parse scripts.
eslint-plugin-html
in your config. The eslint-plugin-html
extracts the content from <script>
tags, but eslint-plugin-vue
requires <script>
tags and <template>
tags in order to distinguish template and script in single file components. "plugins": [
"vue",
- "html"
]
.vue
files..js
files by default. You have to specify additional extensions by --ext
option or glob patterns. E.g. eslint "src/**/*.{js,vue}"
or eslint src --ext .vue
. If you use @vue/cli-plugin-eslint
and the vue-cli-service lint
command - you don't have to worry about it."vue"
to the "eslint.validate"
array in vscode settings. e.g. "eslint.validate": [ "javascript", "javascriptreact", "vue" ]
Vetur
plugin in VSCode - set "vetur.validation.template": false
to avoid default Vetur template validation. Check out vetur documentation for more info.text.html.vue
.{
"linters": {
"eslint": {
"selector": "source.js, text.html.vue"
}
}
}
This plugin follows semantic versioning and ESLint's Semantic Versioning Policy.
We're using GitHub Releases.
In order to add a new rule, you should:
npm start
docs
filenpm run update
in order to update readme and recommended configurationWe're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.
Before you start writing new rule, please read the official ESLint guide.
Next in order to get an idea how does the AST of the code that you want to check looks like, you can use one of the following applications:
Since single file components in Vue are not plain JavaScript, we can't use the default parser, and we had to introduce additional one: vue-eslint-parser
, that generates enhanced AST with nodes that represent specific parts of the template syntax, as well as what's inside the <script>
tag.
To know more about certain nodes in produced ASTs, go here:
The vue-eslint-parser
provides few useful parser services, to help traverse the produced AST and access tokens of the template:
context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)
context.parserServices.getTemplateBodyTokenStore()
Check out an example rule to get a better understanding of how these work.
Please be aware that regarding what kind of code examples you'll write in tests, you'll have to accordingly setup the parser in RuleTester
(you can do it on per test case basis though). See an example here
If you'll stuck, remember there are plenty of rules you can learn from already, and 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).
FAQs
Official ESLint plugin for Vue.js
The npm package eslint-plugin-vue receives a total of 2,882,266 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.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.