Rule proposition: order-in-components

As I mentioned in #10, I think that creating separate issue for each rule proposition has many benefits, so this is my first proposition:

Rule name: order-in-components Description: Keep order of properties in components according to https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#ordering

Gitlab’s style guide lists all properties, I would however consider grouping lifecycle hooks in order to make it simpler, like so:

• name
• props
• mixins
• data
• components
• computedProps
• methods
• lifecycle hooks

Introducing order rule we can make sure that every component is written in exactly the same way, which would make it more readable and consistent across codebase.

This rule should be configurable, so that anyone can amend proposed order in .eslintrc.

[yyx990803]

I personally prefer having all assets at top of the component (like dependencies), and then group all state-related options (props, data, computed), hence:

• name
• assets (mixins, components, directives, filters)
• props
• data
• computed
• methods
• lifecycle hooks
• render (if used)

[yyx990803]

Looks good - tweaked a bit more:

• Options / Misc (name, delimiters, functional, model)
• Options / Assets (components, directives, filters)
• Options / Composition (parent, mixins, extends, provide, inject)
• el / template
• props
• propsData
• data
• computed
• watch
• lifecycle hooks
• methods
• render
• renderError

The main thing is I moved template up alongside el, and moved methods to be after lifecycle hooks.

It’s interesting because putting render last is kind of a convention from React land, but I’m much more used to seeing templates earlier to get a visual understanding of a component.