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

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>

[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.

[michalsnik]

Unfortunately it’s not possible to implement at this moment @mario-d-s The vue-eslint-parser returns an original AST with an extra templateBody property that contain AST describing Vue template. But we don’t know anything about style tag.

Could we perhaps get the following AST @mysticatea?

{
  type: 'Program'
  body: [
    {
      type: 'VElement',
      name: 'template',
      children: [
        {
          type: 'VText",
          ...
        }
      ]
    },
    {
      type: 'VElement',
      name: 'script',
      children: [
        {
          type: 'VariableDeclaration',
          declaration: { ... }
        },
        {
          type: 'ExportDefaultDeclaration',
          declaration: { ... }
        }
      ]
    },
    {
      type: 'VElement',
      name: 'style',
      children: null
    }
  ]
}

It would make things easier, and maybe we wouldn’t even need an extra template body visitor (though it’s just my lucky guess).

edit: Now that I think about it I can imagine other plugins and rules might’ve already use selector that this kind of AST might break (e.g. Program > ExportDefaultDeclaration), so we probably can’t change it with 100% certainty.

Alternatively we might add an extra field next to templateBody with informations about top-level tags - it would most likely be backwards compatible change. We already have access to the root AST from HTML Parser so it should be pretty straightforward to implement in vue-eslint-parser.

Looking once again at templateBody got me thinking 🤔Do you remember @mysticatea what was the reason behind assigning result.ast.templateBody = templateBody instead of straight result.ast.templateRoot = rootAST? Looks like it might just be the solution - it would also allow us to report too many lines between tags and warn about using not scoped styles later on.

I’m happy to help and hear your thoughts @mysticatea