Documentation for creating custom rules

[erindepew]

Thanks for all your work on this!
I would like to write a custom rule just for our use, but can't seem to find any documentation on how to do so. If it already exists can someone point me in the right direction, otherwise I'd be happy to help create some docs!

[mysticatea]

Thank you for this issue!

Sure, it will be great if some docs exist.

The way to make custom rules is the same as core essentially, but it has additional AST types. The spec of the AST types is here: https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md

There are some parserServices to traverse the additional AST and to access the tokens of template.

• context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)
• context.parserServices.getTemplateBodyTokenStore()

Please see https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/mustache-interpolation-spacing.js as an example.

[danielbastos11]

ESLint also has a extremely useful page on the subject: https://eslint.org/docs/developer-guide/working-with-rules

[michalsnik]

I guess the most valuable thing would be to mention how to easily inspect this custom AST @mysticatea. For regular JavaScript there is an excellent http://astexplorer.net but it's not that obvious how to inspect AST generated by vue-eslint-parser. The rest is well described in eslint documentation.

[mysticatea]

I hope that we can add vue-eslint-parser to http://astexplorer.net after fkling/astexplorer#285.

[michalsnik]

That would be cool! 💪

[kindy]

@mysticatea
I think we don't need to wait that PR (that I created for a long time)
but just add vue-eslint-parser in astexplorer now.
you can start the work based on my fork, and send PR latter.

[kindy]

Hi guys, I just add 'vue-eslint-parser' to my own ast playground, maybe you want to have a look:

https://ast.js.org

then click button "+vue/vue-eslint-parser".

P.S. this tool is at very early stage, feedbacks are welcome.

[michalsnik]

This is really cool @kindy we might even put it in our documentation. It's really helpful 💪