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

【问题标题】：How to enforce script, template and style tags order in vue with linter如何使用 linter 在 vue 中强制执行脚本、模板和样式标签的顺序
【发布时间】：2021-08-22 00:03:04
【问题描述】：

我想添加一个 linter 规则来检查标签是否按以下顺序排列：<script>、<template> 和 <style>。 Vue 的默认值首先是 <template>，但我想要 <script>，因为我认为它更重要。

如果可以自动修复，那就太棒了。

我找不到 eslint 的这条规则，如果没有，我可以考虑创建它。

【问题讨论】：

标签： vue.js eslint lint

【解决方案1】：

eslint-plugin-vue 为此支持component-tags-order rule。它已经包含在 "plugin:vue/vue3-recommended" 和 "plugin:vue/recommended" 规则集中（如果使用 Vue CLI 脚手架项目）。

强制执行<script>、<template> 和<style> 的配置：

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

请注意，该规则不实现自动修复，因此您只会收到 linter 错误。

但是，您可以运行一个命令行实用程序 (v-change-tags-order) 来重新排列标签：

npx v-change-tags-order

【讨论】：

@MauriciAbad Evan 你刚刚tweeted 介绍了一个重新排列标签顺序的新实用程序。查看更新的答案。