diff --git a/.eslintrc.js b/.eslintrc.js
index b3f6f5a712..c21c94b88d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -42,6 +42,12 @@ module.exports = {
         ignoreRestSiblings: true,
       },
     ],
+    "vue/component-tags-order": [
+      "error",
+      {
+        order: ["template", "script", "style"],
+      },
+    ],
   },
   overrides: [
     {
diff --git "a/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md" "b/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md"
index ac10b3c382..0e8d453615 100644
--- "a/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md"
+++ "b/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md"
@@ -19,3 +19,8 @@ VOICEVOX は歴史的経緯により、 SpeakerId と StyleId が混同してい
 （エンジン API の SpeakerId 引数に StyleId を渡したりなど。）
 
 StyleId は現在整数値型になっていますが、将来的にはUuidにしたいと考えています。
+
+## シングルファイルコンポーネント（SFC、`.vue`ファイル）のtemplate、script、styleの順序
+
+`<template>`、`<script>`、`<style>`の順序で記述してください。
+
diff --git a/src/components/MenuItem.vue b/src/components/MenuItem.vue
index eac85626e2..0e2c2abeca 100644
--- a/src/components/MenuItem.vue
+++ b/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>