Official ESLint plugin for Vue.js
See https://vuejs.github.io/eslint-plugin-vue/
This plugin is following Semantic Versioning and ESLint's Semantic Versioning Policy.
We're using GitHub Releases.
Contributing is welcome!
See https://vuejs.github.io/eslint-plugin-vue/developer-guide/
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:
- astexplorer.net - best tool to inspect ASTs, but it doesn't support Vue templates yet
- ast.js.org - not fully featured, but supports Vue templates syntax
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).