Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d64aa49

Browse files
michalsnikmysticatea
authored andcommitted
Docs: add "working-with-rules" section in README (#528)
1 parent 0bd4576 commit d64aa49

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

‎README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,30 @@ In order to add a new rule, you should:
294294

295295
We'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](https://github.com/vuejs/eslint-plugin-vue/issues), but first please make sure your question does not repeat previous ones.
296296

297+
### Working with rules
298+
299+
Before you start writing new rule, please read the [official ESLint guide](https://eslint.org/docs/developer-guide/working-with-rules).
300+
301+
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:
302+
- [astexplorer.net](http://astexplorer.net/) - best tool to inspect ASTs, but it doesn't support Vue templates yet
303+
- [ast.js.org](https://ast.js.org/) - not fully featured, but supports Vue templates syntax
304+
305+
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.
306+
307+
To know more about certain nodes in produced ASTs, go here:
308+
- [ESTree docs](https://github.com/estree/estree)
309+
- [vue-eslint-parser AST docs](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md)
310+
311+
The `vue-eslint-parser` provides few useful parser services, to help traverse the produced AST and access tokens of the template:
312+
- `context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)`
313+
- `context.parserServices.getTemplateBodyTokenStore()`
314+
315+
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.
316+
317+
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](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/attribute-hyphenation.js#L19)
318+
319+
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!
320+
297321
## :lock: License
298322

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

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /