Eslint-plugin-vue: Add rules and documentation

[filipalacerda]

Hi! 😊

We've been using Vue for a while and we have the need of an extended version of this plugin. Basically we need something like https://github.com/yannickcr/eslint-plugin-react for Vue 👍

We have a couple of rules that I think other people could benefit from them - they are based on eslint-plugin-react:

• Naming: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#naming
• Alignment: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#alignment
• Quotes: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#quotes
• Props: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#props
• Data: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#data
• Directives: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#directives
• Closing tags: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#closing-tags
• Ordering: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#ordering

Maybe we are missing some stuff that could help us! Suggestions are welcome 😊

I am more than happy to put together a PR with these rules, but I wanted to check first what you think or if anyone else feels the need for them :)

What do you think @yyx990803 @chrisvfritz ? (Not sure If I am mentioning everyone I should)

[simplesmiler]

Relevant: https://github.com/mysticatea/eslint-plugin-vue-trial

[chrisvfritz]

I quite like these (both yours @Lacerda and those by @mysticatea in eslint-plugin-vue-trial) and am very open to incorporating some of these rules into the official plugin. Personally though, I would prefer to only include rules that either:

1. Catch errors, or
2. Establish a standard to prevent arbitrary variation

So for example, where Vue goes out of its way to support multiple styles/strategies (e.g. naming, props, data), I think those stylistic decisions are possibly best left to userland. I think this is also true in cases where a style only works in string templates, as opposed to in-DOM templates (e.g. self-closing tags for arbitrary elements), since Vue is used in a wide variety of contexts.

Where maintaining perfect consistency could be useful even in the docs and official example projects, I'm on board. From your list, that might include quotes, ordering, and alignment. In the first two cases, I have personal preferences, but I don't _really_ care what style is used on a project, as long as everyone sticks to one. In the case of alignment, I admit this is a bit more subjective, but I get a bit irrationally annoyed whenever I see anything other than the style you suggest in your guide. 😄 It looks a little strange to some, initially, but mirrors the style generally preferred for readable JS objects.

Before making a decision though, I'd like to get the thoughts of @yyx990803 and some other members of the core team, just as a sanity check.

[filipalacerda]

Thank you for your answer! 😊

I'll stand by and wait for the team decision 💪

I'm more than glad to help!

[defcc]

Maybe there could be an official recommended coding guide, with style and best practice included :)

[filipalacerda]

We at GitLab followed the main ones from https://github.com/yannickcr/eslint-plugin-react :)

[yyx990803]

I like the idea in general - and as @chrisvfritz pointed out, there are some rules that provide practical value and some rules that are more or less subjective (e.g. naming and alignment). But I think it's good to have a sane default for consistency.

Regardless, I'd be happy to take a PR that implements these rules - we can then make final adjustments to the defaults and options before we publish it.

[michalsnik]

Hey, this is a great idea @Lacerda 👍

I do however recommend creating separate issues for each rule proposition. This way we can have a proper brainstorm per rule that will be easy to follow. Besides that putting everything on one man's shoulders is usually not a good idea, and making it easy for anyone to start working on proposed rule would certainly have a good impact on this plugin's future. What do you think about this guys?

In order to make it more clear for everyone I also recommend to add following labels:

• new rule proposition
• in consideration
• accepted proposition
• work in progress

And if anyone is willing to start working on a given rule you can add work in progress label so that no one will start working on the same thing. That should speed things up a little bit.

I'd be happy to help with some of the rules, as I already maintain eslint-plugin-ember and I have some practical expertise in this field :)

[chrisvfritz]

This sounds great to me!

[michalsnik]

Because of the fact that @chrisvfritz is now working on an official style guide for vue I think we can close this issue and keep in sync there instead -> #77 . I've seen you already proposed something there @filipalacerda :) If you'll have more ideas feel free create separate issue per each and link them in #77 in order to decide if it's a good thing to add in the style guide too.

[filipalacerda]

Thanks @michalsnik I was going to do the same!