| 1 | # eslint-plugin-vue
|
| 2 |
|
| 3 | [](https://npmjs.org/package/eslint-plugin-vue)
|
| 4 | [](https://npmjs.org/package/eslint-plugin-vue)
|
| 5 | [](https://circleci.com/gh/vuejs/eslint-plugin-vue)
|
| 6 | [](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE.md)
|
| 7 |
|
| 8 | > Official ESLint plugin for Vue.js
|
| 9 |
|
| 10 | ## :book: Documentation
|
| 11 |
|
| 12 | See [the official website](https://eslint.vuejs.org).
|
| 13 |
|
| 14 | > :exclamation: Attention - this is documentation for version `7.x` :exclamation:
|
| 15 | >
|
| 16 | > This branch contains `eslint-plugin-vue@next` which is a pre-released `7.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`.
|
| 17 | >
|
| 18 | > Please try it and report any issues that you might have encountered.
|
| 19 | >
|
| 20 | > If you want to check previous releases [go here](https://github.com/vuejs/eslint-plugin-vue/releases).
|
| 21 |
|
| 22 | ## :anchor: Versioning Policy
|
| 23 |
|
| 24 | This plugin is following [Semantic Versioning](https://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
|
| 25 |
|
| 26 | ## :newspaper: Changelog
|
| 27 |
|
| 28 | This project uses [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).
|
| 29 |
|
| 30 | ## :beers: Contribution Guide
|
| 31 |
|
| 32 | Contribution is welcome!
|
| 33 |
|
| 34 | See [The ESLint Vue Plugin Developer Guide](https://eslint.vuejs.org/developer-guide/).
|
| 35 |
|
| 36 | ### Working with Rules
|
| 37 |
|
| 38 | Before you start writing a new rule, please read [the official ESLint guide](https://eslint.org/docs/developer-guide/working-with-rules).
|
| 39 |
|
| 40 | Next, in order to get an idea how does the AST of the code that you want to check looks like, use one of the following applications:
|
| 41 | - [astexplorer.net](https://astexplorer.net/) - the best tool to inspect ASTs, but it doesn't support Vue template yet
|
| 42 | - [ast.js.org](https://ast.js.org/) - not fully featured, but supports Vue template syntax
|
| 43 |
|
| 44 | 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 `<script>` tag.
|
| 45 |
|
| 46 | To know more about certain nodes in produced ASTs, go here:
|
| 47 | - [ESTree docs](https://github.com/estree/estree)
|
| 48 | - [vue-eslint-parser AST docs](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md)
|
| 49 |
|
| 50 | The `vue-eslint-parser` provides a few useful parser services that help traverse the produced AST and access tokens of the template:
|
| 51 | - `context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)`
|
| 52 | - `context.parserServices.getTemplateBodyTokenStore()`
|
| 53 |
|
| 54 | Check out [an example rule](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/mustache-interpolation-spacing.js) to get a better understanding of how these work.
|
| 55 |
|
| 56 | 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](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/attribute-hyphenation.js#L19).
|
| 57 |
|
| 58 | 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](https://github.com/vuejs/eslint-plugin-vue/issues) – we're happy to help!
|
| 59 |
|
| 60 | ## :lock: License
|
| 61 |
|
| 62 | See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
|