Eslint-plugin-vue: Providing rule options for Vue CLI's UI

[chrisvfritz]

Talking with @Akryum, we thought it would be nice for the UI to represent configuration options for each rule could be automatically generated. Experimenting this weekend, I couldn't find a way to automatically generate the correct UI with the current code, but I believe I found a potential way.

Currently, in the "Options" section of some rule docs, we keep each option in an h3, with the exact code wrapped with <code></code>, followed by a description of the option. Then below the h3, we have examples of correct and incorrect code. If we standardized this, I think it shouldn't be too hard to build a little utility that transforms this into an object usable by 3rd parties like Vue CLI.

@michalsnik @mysticatea What do you think? Could this be a good way to solve the problem?

[mysticatea]

Thank you for the issue.

Standardize document format is a good idea. It's useful for users.

For tools, maybe tools can use schema of each rule.

const { rules } = require("eslint-plugin-vue")

for (const [ruleId, rule] of Object.entries(rules)) {
    console.log(ruleId, rule.meta.schema)
}

It represents option's shapes as JSONSchema.

[michalsnik]

It seems doable. I'll try to setup vue-cli locally and see how much work would be required to accomplish it.

[Akryum]

Awesome! 😻