如何使用 linter 在 vue 中强制执行脚本、模板和样式标签的顺序

Question

I want to add a linter rule that checks that the tags are in this order: <script> , <template> and <style> . Vue's default is <template> first, but I want the <script> because I consider it more important.

It'd be awesome that this could be auto-fixed.

I couldn't find this rule for eslint, and if there isn't any I may consider creating it.

Answer 1

eslint-plugin-vue supports the component-tags-order rule for this. It's already included in "plugin:vue/vue3-recommended" and "plugin:vue/recommended" rule sets (if using a Vue CLI scaffolded project).

The config to enforce <script> , <template> , and then <style> :

// .eslintrc.js
module.exports = {
  rules: {
    'vue/component-tags-order': ['error', {
      order: [ 'script', 'template', 'style' ]
    }],
  }
}

Note the rule does not implement auto-fixing, so you'll only get linter errors.

However, there's a command-line utility ( v-change-tags-order ) that you could run to rearrange the tags:

npx v-change-tags-order