PropsでcamelCaseを使い，省略記法を強制するように変更 (#2070)

* vue/attribute-hyphenation: never * fmt on vue/attribute-hyphenation: never * introduce propert-shorthand rule * fmt on @voicevox/propert-shorthand * 最新版のeslint * checkout main * Refactor: Update component prop names to adhere to Vue.js style guide --------- Co-authored-by: Hiroshiba <[email protected]>
VOICEVOX · Jun 3, 2024 · b0c800e · b0c800e
1 parent 95af27e
commit b0c800e
Show file tree

Hide file tree

Showing 51 changed files with 593 additions and 634 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -51,6 +51,9 @@ module.exports = {
         ignoreRestSiblings: true,
       },
     ],
+    "vue/attribute-hyphenation": ["error", "never"],
+    "vue/v-on-event-hyphenation": ["error", "never", { autofix: true }],
+    "vue/v-bind-style": ["error", "shorthand", { sameNameShorthand: "always" }],
     "vue/component-name-in-template-casing": [
       "error",
       "PascalCase",

diff --git a/eslint-plugin/create-rule.js b/eslint-plugin/create-rule.js
@@ -2,5 +2,5 @@ const { ESLintUtils } = require("@typescript-eslint/utils");
 
 exports.createRule = ESLintUtils.RuleCreator(
   (name) =>
-    `https://github.com/VOICEVOX/voicevox/blob/main/eslint-plugin/${name}.md`
+    `https://github.com/VOICEVOX/voicevox/blob/main/eslint-plugin/${name}.md`,
 );
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,10 +80,10 @@
     "@types/unzipper": "0.10.5",
     "@types/wicg-file-system-access": "2020.9.6",
     "@types/yargs": "17.0.32",
-    "@typescript-eslint/eslint-plugin": "7.6.0",
-    "@typescript-eslint/parser": "7.6.0",
-    "@typescript-eslint/types": "7.6.0",
-    "@typescript-eslint/utils": "7.6.0",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
+    "@typescript-eslint/types": "7.11.0",
+    "@typescript-eslint/utils": "7.11.0",
     "@vitejs/plugin-vue": "5.0.4",
     "@voicevox/eslint-plugin": "file:./eslint-plugin",
     "@vue/eslint-config-prettier": "9.0.0",
@@ -96,9 +96,9 @@
     "electron-devtools-installer": "3.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-vue": "9.5.1",
+    "eslint-plugin-vue": "9.26.0",
     "happy-dom": "8.4.2",
     "license-checker-rseidelsohn": "4.3.0",
     "markdownlint": "0.31.1",

diff --git a/src/components/App.vue b/src/components/App.vue
@@ -2,20 +2,20 @@
   <ErrorBoundary>
     <MenuBar
       v-if="openedEditor != undefined"
-      :file-sub-menu-data="subMenuData.fileSubMenuData.value"
-      :edit-sub-menu-data="subMenuData.editSubMenuData.value"
+      :fileSubMenuData="subMenuData.fileSubMenuData.value"
+      :editSubMenuData="subMenuData.editSubMenuData.value"
       :editor="openedEditor"
     />
     <KeepAlive>
       <Component
         :is="openedEditor == 'talk' ? TalkEditor : SingEditor"
         v-if="openedEditor != undefined"
         :key="openedEditor"
-        :is-engines-ready="isEnginesReady"
-        :is-project-file-loaded="isProjectFileLoaded"
+        :isEnginesReady
+        :isProjectFileLoaded
       />
     </KeepAlive>
-    <AllDialog :is-engines-ready="isEnginesReady" />
+    <AllDialog :isEnginesReady />
   </ErrorBoundary>
 </template>
 

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
@@ -24,10 +24,10 @@
     </div>
     <QMenu
       class="character-menu"
-      transition-show="none"
-      transition-hide="none"
+      transitionShow="none"
+      transitionHide="none"
       :max-height="maxMenuHeight"
-      @before-show="updateMenuHeight"
+      @beforeShow="updateMenuHeight"
     >
       <QList style="min-width: max-content" class="character-item-container">
         <QItem
@@ -50,7 +50,7 @@
           <QBtn
             v-close-popup
             flat
-            no-caps
+            noCaps
             class="full-width"
             :class="selectedCharacter == undefined && 'selected-background'"
             @click="$emit('update:selectedVoice', undefined)"
@@ -68,7 +68,7 @@
             <QBtn
               v-close-popup
               flat
-              no-caps
+              noCaps
               class="col-grow"
               @click="onSelectSpeaker(characterInfo.metas.speakerUuid)"
               @mouseover="reassignSubMenuOpen(-1)"
@@ -77,8 +77,8 @@
               <QAvatar rounded size="2rem" class="q-mr-md">
                 <QImg
                   v-if="characterInfo"
-                  no-spinner
-                  no-transition
+                  noSpinner
+                  noTransition
                   :ratio="1"
                   :src="
                     getDefaultStyleWrapper(characterInfo.metas.speakerUuid)
@@ -121,11 +121,11 @@
                 <QIcon name="keyboard_arrow_right" color="grey-6" size="sm" />
                 <QMenu
                   v-model="subMenuOpenFlags[characterIndex]"
-                  no-parent-event
+                  noParentEvent
                   anchor="top end"
                   self="top start"
-                  transition-show="none"
-                  transition-hide="none"
+                  transitionShow="none"
+                  transitionHide="none"
                   class="character-menu"
                 >
                   <QList style="min-width: max-content">
@@ -134,7 +134,7 @@
                       :key="styleIndex"
                       v-close-popup
                       clickable
-                      active-class="selected-style-item"
+                      activeClass="selected-style-item"
                       :active="
                         selectedVoice != undefined &&
                         style.styleId === selectedVoice.styleId
@@ -154,8 +154,8 @@
                     >
                       <QAvatar rounded size="2rem" class="q-mr-md">
                         <QImg
-                          no-spinner
-                          no-transition
+                          noSpinner
+                          noTransition
                           :ratio="1"
                           :src="characterInfo.metas.styles[styleIndex].iconPath"
                         />

diff --git a/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue b/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
@@ -2,8 +2,8 @@
   <QDialog
     v-model="modelValueComputed"
     maximized
-    transition-show="jump-up"
-    transition-hide="jump-down"
+    transitionShow="jump-up"
+    transitionHide="jump-down"
     class="accept-retrieve-telemetry-dialog transparent-backdrop"
   >
     <QLayout container view="hHh Lpr lff" class="bg-background">
@@ -22,7 +22,7 @@
               unelevated
               label="拒否"
               color="toolbar-button"
-              text-color="toolbar-button-display"
+              textColor="toolbar-button-display"
               class="text-no-wrap q-mr-md text-bold"
               @click="handler(false)"
             />
@@ -31,7 +31,7 @@
               unelevated
               label="許可"
               color="toolbar-button"
-              text-color="toolbar-button-display"
+              textColor="toolbar-button-display"
               class="text-no-wrap text-bold"
               @click="handler(true)"
             />

diff --git a/src/components/Dialog/AcceptTermsDialog.vue b/src/components/Dialog/AcceptTermsDialog.vue
@@ -2,8 +2,8 @@
   <QDialog
     v-model="modelValueComputed"
     maximized
-    transition-show="jump-up"
-    transition-hide="jump-down"
+    transitionShow="jump-up"
+    transitionHide="jump-down"
     class="accept-terms-dialog transparent-backdrop"
   >
     <QLayout container view="hHh Lpr lff" class="bg-background">
@@ -22,7 +22,7 @@
               unelevated
               label="同意せずに終了"
               color="toolbar-button"
-              text-color="toolbar-button-display"
+              textColor="toolbar-button-display"
               class="text-no-wrap q-mr-md text-bold"
               @click="handler(false)"
             />
@@ -31,7 +31,7 @@
               unelevated
               label="同意して使用開始"
               color="toolbar-button"
-              text-color="toolbar-button-display"
+              textColor="toolbar-button-display"
               class="text-no-wrap text-bold"
               @click="handler(true)"
             />

diff --git a/src/components/Dialog/AllDialog.vue b/src/components/Dialog/AllDialog.vue
@@ -10,17 +10,17 @@
   <CharacterOrderDialog
     v-if="orderedAllCharacterInfos.length > 0"
     v-model="isCharacterOrderDialogOpenComputed"
-    :character-infos="orderedAllCharacterInfos"
+    :characterInfos="orderedAllCharacterInfos"
   />
   <DefaultStyleListDialog
     v-if="orderedTalkCharacterInfos.length > 0"
     v-model="isDefaultStyleSelectDialogOpenComputed"
-    :character-infos="orderedTalkCharacterInfos"
+    :characterInfos="orderedTalkCharacterInfos"
   />
   <DictionaryManageDialog v-model="isDictionaryManageDialogOpenComputed" />
   <EngineManageDialog v-model="isEngineManageDialogOpenComputed" />
   <UpdateNotificationDialogContainer
-    :can-open-dialog="canOpenNotificationDialog"
+    :canOpenDialog="canOpenNotificationDialog"
   />
   <ImportMidiDialog v-model="isImportMidiDialogOpenComputed" />
 </template>

diff --git a/src/components/Dialog/CharacterOrderDialog.vue b/src/components/Dialog/CharacterOrderDialog.vue
@@ -2,8 +2,8 @@
   <QDialog
     v-model="modelValueComputed"
     maximized
-    transition-show="jump-up"
-    transition-hide="jump-down"
+    transitionShow="jump-up"
+    transitionHide="jump-down"
     class="transparent-backdrop"
   >
     <QLayout container view="hHh Lpr lff" class="bg-background">
@@ -24,7 +24,7 @@
               unelevated
               label="完了"
               color="toolbar-button"
-              text-color="toolbar-button-display"
+              textColor="toolbar-button-display"
               class="text-no-wrap"
               @click="closeDialog"
             />
@@ -34,8 +34,8 @@
 
       <QDrawer
         bordered
-        show-if-above
-        :model-value="true"
+        showIfAbove
+        :modelValue="true"
         :width="$q.screen.width / 3 > 300 ? 300 : $q.screen.width / 3"
         :breakpoint="0"
       >
@@ -52,17 +52,17 @@
               <CharacterTryListenCard
                 v-for="characterInfo of characterInfos"
                 :key="characterInfo.metas.speakerUuid"
-                :character-info="characterInfo"
-                :is-selected="
+                :characterInfo
+                :isSelected="
                   selectedCharacter === characterInfo.metas.speakerUuid
                 "
-                :is-new-character="
+                :isNewCharacter="
                   newCharacters.includes(characterInfo.metas.speakerUuid)
                 "
-                :playing="playing"
-                :toggle-play-or-stop="togglePlayOrStop"
+                :playing
+                :togglePlayOrStop
                 @update:portrait="updatePortrait"
-                @update:select-character="selectCharacter"
+                @update:selectCharacter="selectCharacter"
               />
             </div>
           </div>
@@ -74,7 +74,7 @@
             <Draggable
               v-model="characterOrder"
               class="character-order q-px-sm"
-              :item-key="keyOfCharacterOrderItem"
+              :itemKey="keyOfCharacterOrderItem"
               @start="characterOrderDragging = true"
               @end="characterOrderDragging = false"
             >

diff --git a/src/components/Dialog/CharacterTryListenCard.vue b/src/components/Dialog/CharacterTryListenCard.vue
@@ -29,7 +29,7 @@
           flat
           dense
           icon="chevron_left"
-          text-color="display"
+          textColor="display"
           class="style-select-button"
           aria-label="前のスタイル"
           @mouseenter="isHoverableItem = false"
@@ -46,7 +46,7 @@
           flat
           dense
           icon="chevron_right"
-          text-color="display"
+          textColor="display"
           class="style-select-button"
           aria-label="次のスタイル"
           @mouseenter="isHoverableItem = false"

diff --git a/src/components/Dialog/DefaultStyleListDialog.vue b/src/components/Dialog/DefaultStyleListDialog.vue
@@ -9,13 +9,13 @@
     v-model:selectedStyleIndex="
       selectedStyleIndexes[selectedCharacterInfo.metas.speakerUuid]
     "
-    :character-info="selectedCharacterInfo"
+    :characterInfo="selectedCharacterInfo"
   />
   <QDialog
     v-model="modelValueComputed"
     maximized
-    transition-show="jump-up"
-    transition-hide="jump-down"
+    transitionShow="jump-up"
+    transitionHide="jump-down"
     class="transparent-backdrop"
   >
     <QLayout container view="hHh Lpr lff" class="bg-background">
@@ -34,7 +34,7 @@
               unelevated
               label="完了"
               color="toolbar-button"
-              text-color="toolbar-button-display"
+              textColor="toolbar-button-display"
               class="text-no-wrap"
               @click="closeDialog"
             />

diff --git a/src/components/Dialog/DefaultStyleSelectDialog.vue b/src/components/Dialog/DefaultStyleSelectDialog.vue
@@ -2,9 +2,9 @@
   <QDialog
     v-model="isOpenComputed"
     maximized
-    transition-show="none"
-    transition-hide="none"
-    transition-duration="100"
+    transitionShow="none"
+    transitionHide="none"
+    transitionDuration="100"
     class="default-style-select-dialog transparent-backdrop"
   >
     <QLayout container view="hHh Lpr lff" class="bg-background">
@@ -24,7 +24,7 @@
               unelevated
               :label="isModified ? '保存' : '戻る'"
               color="toolbar-button"
-              text-color="toolbar-button-display"
+              textColor="toolbar-button-display"
               class="text-no-wrap"
               @click="closeDialog"
             />
@@ -34,8 +34,8 @@
 
       <QDrawer
         bordered
-        show-if-above
-        :model-value="true"
+        showIfAbove
+        :modelValue="true"
         :width="$q.screen.width / 3"
         :breakpoint="0"
       >
@@ -101,9 +101,9 @@
                     />
                     <QRadio
                       class="absolute-top-right no-pointer-events text-primary"
-                      :model-value="selectedStyleIndexComputed"
+                      :modelValue="selectedStyleIndexComputed"
                       :val="styleIndex"
-                      @update:model-value="selectStyleIndex(styleIndex)"
+                      @update:modelValue="selectStyleIndex(styleIndex)"
                     />
                   </div>
                 </div>