Need help with eslint-plugin-vue?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vuejs
3.4K Stars 508 Forks MIT License 735 Commits 100 Opened issues

Description

Official ESLint plugin for Vue.js

Services available

!
?

Need anything else?

Contributors list

eslint-plugin-vue

NPM version NPM downloads CircleCI License

Official ESLint plugin for Vue.js

:book: Documentation

See the official website.

:anchor: Versioning Policy

This plugin is following Semantic Versioning and ESLint's Semantic Versioning Policy.

:newspaper: Changelog

This project uses GitHub Releases.

:beers: Contribution Guide

Contribution is welcome!

See The ESLint Vue Plugin Developer Guide.

Working with Rules

Before you start writing a 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, use the astexplorer.net. The astexplorer.net is a great tool to inspect ASTs, also Vue templates are supported.

After opening astexplorer.net, select

Vue
as the syntax and
vue-eslint-parser
as the parser.

Since single file components in Vue are not plain JavaScript, the default parser couldn't be used, so a new one was introduced.

vue-eslint-parser
generates enhanced AST with nodes that represent specific parts of the template syntax, as well as what's inside the
 tag.

To know more about certain nodes in produced ASTs, go here: - ESTree docs - vue-eslint-parser AST docs

The

vue-eslint-parser
provides a few useful parser services that 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 set up the parser in

RuleTester
(you can do it on a per test case basis). See an example here.

If you'll stuck, remember there are plenty of rules you can learn from already. If you can't find the right solution, don't hesitate to reach out in issues – we're happy to help!

:lock: License

See the LICENSE file for license rights and limitations (MIT).

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.