tag-attr-order `<script lang="ts" setup>` vs `<script setup lang="ts">`

[mesqueeb]

Please describe what the rule should do:

I would love some rule that either enforces:

• <script lang="ts" setup>
• OR
• <script setup lang="ts">

Same for:

• <style lang="sass" scoped>
• OR
• <style scoped lang="sass">

I don't mind which one should be the default, as long as we can enforce some kind of consistency.

I don't mind whatever the rule is called. I don't have a good idea of a good name myself XD
maybe something like tag-attr-order but it can be confused with other Vue attr stuff

What category should the rule belong to?

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

[FloEdelmann]

Thanks for the suggestion!

I think the rule name should be vue/block-attributes-order to be consistent with these rules:

• vue/attributes-order
• vue/padding-line-between-blocks
• vue/no-empty-component-block
• vue/block-tag-newline

Should the order be configurable per block or does it suffice to have one general order like in vue/attributes-order? I'm currently rather leaning to the latter.

[mesqueeb]

@FloEdelmann thanks for your comment!

I personally don't mind either way.

I think it might be OK to force either both scoped and setup as single attrs at the end, or force them at the beginning before lang.

I really don't mind any order really, as long as it's not different for every single vue file : P

[ota-meshi]

I think we should consider the order that new rule enforce by default.

I think blocks can generally have attributes like this:

<script lang="ts"></script>
<script setup></script>
<script src="./script.js"></script>

<template functional></template>
<template lang="pug"></template>
<template src="./template.html"></template>

<style scoped></style>
<style module></style>
<style lang="scss"></style>
<style src="./style.css"></style>

<i18n locale="en"></i18n>
<i18n global></i18n>
<i18n lang="yaml"></i18n>
<i18n src="./locales.json"></i18n>

The docs seem to prefer setup before lang. Other than that I don't know yet.
https://vuejs.org/guide/typescript/composition-api.html#typing-component-props

[ota-meshi]

Should the order be configurable per block or does it suffice to have one general order like in vue/attributes-order?

I like one general order 👍

[ota-meshi]

As far as I know, for officially supported attributes, I think it's easier to read if we just enforce the following order:

1. something
2. lang or src

I'm not sure what to do if you used custom blocks, but it's possible that they're alphabetical or have a preferred order per library.
For unknown (other than officially supported) attributes it may make sense to ignore them from the check.

[Kingwl]

This bothered me for a while. Happy to work on this!

[BenediktZoller]

I did recognize, that the Intellij Settings for Editor>Code Style>Vue Template as Actions on Save>Rearrange code does now reorder the tags attribute order alphabetically like this <script lang="ts" setup>, even though there is no specific IDE setting I can find.

Would be nice to be supported by eslint as well.