script setup：template、script、styleの順序を統一 (#1100)

.eslintrc.js

@@ -42,6 +42,12 @@ module.exports = {
         ignoreRestSiblings: true,
       },
     ],
+    "vue/component-tags-order": [
+      "error",
+      {
+        order: ["template", "script", "style"],
+      },
+    ],
   },
   overrides: [
     {

docs/細かい設計方針.md

@@ -19,3 +19,8 @@ VOICEVOX は歴史的経緯により、 SpeakerId と StyleId が混同してい
 （エンジン API の SpeakerId 引数に StyleId を渡したりなど。）
 
 StyleId は現在整数値型になっていますが、将来的にはUuidにしたいと考えています。
+
+## シングルファイルコンポーネント（SFC、`.vue`ファイル）のtemplate、script、styleの順序
+
+`<template>`、`<script>`、`<style>`の順序で記述してください。
+

src/components/MenuItem.vue

@@ -60,14 +60,6 @@
   </q-item>
 </template>
 
-<style lang="scss" scoped>
-.engine-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 2px;
-}
-</style>
-
 <script lang="ts">
 import { defineComponent, ref, PropType, computed, watch } from "vue";
 import type { MenuItemData } from "@/components/MenuBar.vue";
@@ -152,3 +144,11 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.engine-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+}
+</style>