Open NiklasPor opened 2 years ago
Here is the order I use for Vue:
[
"^#",
"^:?is$",
"^v-for$",
"^v-(if|else-if|else)$",
"^v-show$",
"^v-cloak$",
"^v-pre$",
"^v-once$",
"^:?id$",
"^:?ref$",
"^:?key$",
"^v-model$",
"^v-model:",
"^:?class$",
"^:(?!data-)",
"$DEFAULT",
"^:?data-",
"^@",
"^v-html$",
"^v-text$",
"^v-bind$"
],
I'm using the following order to be on par with vue/attributes-order
's eslint-plugin-vue rule:
[
"^((v-bind)?:|v-)is$",
"^v-for$",
"^v-(if|else-if|else|show|cloak)$",
"^v-(once|pre|memo)$",
"^(v-bind)?:?id$",
"^(v-bind)?:?key$",
"^(v-bind)?:?ref$",
"^(v-)?slot$",
"^#",
"^v-model$",
"^v-(?!bind(:|$)|on(:|$)|html$|text$)",
"^class$",
"^(v-bind)?:class$",
"^((v-bind)?:)?(?!data-|v-|:|@|#)",
"$DEFAULT",
"^((v-bind)?:)?data-",
"^v-bind$",
"^v-on:",
"^@",
"^v-html$",
"^v-text$"
]
This order did work very well on a relatively big project (~200 components & views), but any improvements ideas are appreciated :)
The default vue attribute order should match up with the official recommendations by the vue team.
https://v3.vuejs.org/style-guide/#element-attribute-order-recommended