Rule Proposal: `vue/component-tags-order`

[julientechdev]

Please describe what the rule should do:

This rule warns about the order of the script, template & style tags.

What category of rule is this? (place an "X" next to just one item)

[x] Enforces code style
[ ] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

vue/component-tags-order: ["warning", order: [ "script", "template", "style" ] ];

<template></template>
<script></script>
<style></style>

However, the following should be considered fine:

<script></script>
<template></template>
<style></style>

[mysticatea]

Thank you for this proposal!

Sounds good to me.
Additionally, we should consider about custom blocks.

[chrisvfritz]

We'll have to discuss the best default for this. I think template, script, style is the most common, because it's what we usually demonstrate in the docs currently, but I've been somewhat recently convinced that script, template, style makes more sense, because:

• The script is probably the least likely tag to be missing
• The script defines the interface for the component, which is probably the most referred-to information
• You don't have to jump over the script when adding new classes to the template and style

I'll ping some other contributors for their thoughts here.

[Akryum]

@chrisvfritz This make sense.

[julientechdev]

@chrisvfritz We switched to script, template, style a while back at my company for the reasons you mentionned

[posva]

In my experience template is the least likely tag to be missing, then script, then style
If I don't need a template tag it's because I'm writing a more advanced component that doesn't have style and prefer to write a js or jsx file

I've written components with no script, only HTML but I've never written components with no template and a style

[pi0]

Some small thoughts on this enforcement. While consistency is a really good thing, there are some conditions that not one rule suits for every use case and component.

template > style > script

Consider when a component has a LOT of styles. Every time we need to check the relation between VM and template we need to either fold style tag or scroll a LOT to the end of the file to see the js part.

template > script > style

The same as previous, when there are LOTS of js logic. Adding any simple style needs LOTS of scrolling between template and style parts.

Personally, I use a rule of the thumb that count/estimate lines of the code for each section in component and put the longest part to the end so the code is more READABLE. Suggestion for this rule proposal:

• Enforcing template to be the first tag if exists
• Counting Lines of other tags (Including custom tags) and making a threshold for lines diff (Like 100 lines) and making soft warns recommending to reorder from less to more for more readability.

[julientechdev]

@pi0 This is considerably more complicated, and does not respond to the initial demand. Why not, but I think it should be added later as an option for this rule.

[mario-d-s]

I would like to have a rule like this. Is there anything I can do to help this to completion?