fix: ESLint と Prettier の競合を解消した (Prettier に寄せた)

.prettierrc

@@ -17,5 +17,6 @@
   "proseWrap": "preserve",
   "htmlWhitespaceSensitivity": "css",
   "vueIndentScriptAndStyle": false,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "singleAttributePerLine": true
 }

eslint.config.js

@@ -15,7 +15,7 @@ const vueLint = {
   files: ['*.vue', '**/*.vue'],
   languageOptions: {
     parserOptions: {
-      parser: "@typescript-eslint/parser"
+      parser: '@typescript-eslint/parser'
     }
   },
   rules: {
@@ -30,7 +30,23 @@ const vueLint = {
       }
     ],
 
-    'vue/custom-event-name-casing': ['error', 'camelCase']
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always'
+        },
+        svg: 'always',
+        math: 'always'
+      }
+    ],
+
+    'vue/singleline-html-element-content-newline': ['off'],
+    'vue/html-indent': ['off']
   }
 }
 

src/App.vue

@@ -6,7 +6,10 @@ import PageFooter from '/@/components/Layout/PageFooter.vue'
 
 <template>
   <page-header />
-  <router-view v-slot="{ Component }" :class="$style.main">
+  <router-view
+    v-slot="{ Component }"
+    :class="$style.main"
+  >
     <template v-if="Component">
       <suspense>
         <template #default>

src/components/Contest/ContestTeamListItem.vue

@@ -18,7 +18,10 @@ defineProps<{
       }"
     >
       <span :class="$style.name">{{ contestTeam.name }}</span>
-      <span v-if="contestTeam.result" :class="$style.result">
+      <span
+        v-if="contestTeam.result"
+        :class="$style.result"
+      >
         ({{ contestTeam.result }})
       </span>
     </router-link>

src/components/ContestTeam/MemberListItem.vue

@@ -13,7 +13,11 @@ defineProps<{
       :class="$style.link"
       :to="{ name: 'User', params: { userId: member.name } }"
     >
-      <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
+      <user-icon
+        :class="$style.icon"
+        :user-name="member.name"
+        :size="32"
+      />
       <p :class="$style.name">
         {{ member.name }}
       </p>

src/components/Event/HostnameListItem.vue

@@ -13,7 +13,11 @@ defineProps<{
       :class="$style.link"
       :to="{ name: 'User', params: { userId: hostname.name } }"
     >
-      <user-icon :class="$style.icon" :user-name="hostname.name" :size="128" />
+      <user-icon
+        :class="$style.icon"
+        :user-name="hostname.name"
+        :size="128"
+      />
       <div :class="$style.desc">
         <div :class="$style.name">
           {{ hostname.name }}

src/components/Events/EventList.vue

@@ -11,7 +11,11 @@ defineProps<Props>()
 
 <template>
   <section :class="$style.container">
-    <event-list-item v-for="event in events" :key="event.id" :event="event" />
+    <event-list-item
+      v-for="event in events"
+      :key="event.id"
+      :event="event"
+    />
   </section>
 </template>
 

src/components/Group/AdminList.vue

@@ -14,7 +14,11 @@ defineProps<Props>()
   <section :class="$style.section">
     <section-title>リーダー</section-title>
     <ul :class="$style.container">
-      <admin-list-item v-for="admin in admins" :key="admin.id" :admin="admin" />
+      <admin-list-item
+        v-for="admin in admins"
+        :key="admin.id"
+        :admin="admin"
+      />
     </ul>
   </section>
 </template>

src/components/Group/AdminListItem.vue

@@ -13,7 +13,11 @@ defineProps<{
       :class="$style.link"
       :to="{ name: 'User', params: { userId: admin.name } }"
     >
-      <user-icon :class="$style.icon" :user-name="admin.name" :size="32" />
+      <user-icon
+        :class="$style.icon"
+        :user-name="admin.name"
+        :size="32"
+      />
       <span :class="$style.name">{{ admin.name }}</span>
     </router-link>
   </li>

src/components/Group/MemberListItem.vue

@@ -14,7 +14,11 @@ defineProps<{
       :class="$style.link"
       :to="{ name: 'User', params: { userId: member.name } }"
     >
-      <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
+      <user-icon
+        :class="$style.icon"
+        :user-name="member.name"
+        :size="32"
+      />
       <p :class="$style.name">
         {{ member.name }}
       </p>

src/components/Groups/GroupList.vue

@@ -11,7 +11,11 @@ defineProps<Props>()
 
 <template>
   <ul :class="$style.container">
-    <group-list-item v-for="group in groups" :key="group.id" :group="group" />
+    <group-list-item
+      v-for="group in groups"
+      :key="group.id"
+      :group="group"
+    />
   </ul>
 </template>
 

src/components/Index/TopSection.vue

@@ -18,8 +18,14 @@ defineProps<{
     </div>
     <div :class="$style.contentContainer">
       <slot />
-      <div v-if="moreLink !== undefined" :class="$style.moreLinkContainer">
-        <router-link :to="moreLink" :class="$style.moreLink">
+      <div
+        v-if="moreLink !== undefined"
+        :class="$style.moreLinkContainer"
+      >
+        <router-link
+          :to="moreLink"
+          :class="$style.moreLink"
+        >
           もっと見る
         </router-link>
       </div>

src/components/Layout/BreadCrumbTrail.vue

@@ -14,7 +14,10 @@ defineProps<{
 
 <template>
   <nav :class="$style.container">
-    <template v-for="(path, index) in paths" :key="path">
+    <template
+      v-for="(path, index) in paths"
+      :key="path"
+    >
       <a-icon
         v-if="index !== 0"
         :class="$style.icon"
@@ -27,7 +30,11 @@ defineProps<{
       >
         {{ path.name }}
       </router-link>
-      <span v-else :class="$style.currentPath">{{ path.name }}</span>
+      <span
+        v-else
+        :class="$style.currentPath"
+        >{{ path.name }}
+      </span>
     </template>
   </nav>
 </template>

src/components/Layout/PageContainer.vue

@@ -9,7 +9,10 @@ defineProps<{
 
 <template>
   <main :class="$style.container">
-    <bread-crumb-trail v-if="paths !== undefined" :paths="paths" />
+    <bread-crumb-trail
+      v-if="paths !== undefined"
+      :paths="paths"
+    />
     <slot />
   </main>
 </template>

src/components/Layout/PageFooter.vue

@@ -1,7 +1,10 @@
 <template>
   <footer :class="$style.container">
     <div :class="$style.copy">
-      <img src="/@/assets/traP_logo_full_white.svg" :class="$style.logo" />
+      <img
+        src="/@/assets/traP_logo_full_white.svg"
+        :class="$style.logo"
+      />
       <div :class="$style.copyright">© 2015- traP</div>
     </div>
   </footer>

src/components/Project/MemberListItem.vue

@@ -14,7 +14,11 @@ defineProps<{
       :class="$style.link"
       :to="{ name: 'User', params: { userId: member.name } }"
     >
-      <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
+      <user-icon
+        :class="$style.icon"
+        :user-name="member.name"
+        :size="32"
+      />
       <span :class="$style.name">{{ member.name }}</span>
       <span :class="$style.duration">
         {{ getGroupOrProjectDuration(member.duration) }}

src/components/Search/UserListItem.vue

@@ -13,7 +13,11 @@ defineProps<{
       :class="$style.link"
       :to="{ name: 'User', params: { userId: member.name } }"
     >
-      <user-icon :class="$style.icon" :user-name="member.name" :size="32" />
+      <user-icon
+        :class="$style.icon"
+        :user-name="member.name"
+        :size="32"
+      />
       <p :class="$style.name">
         {{ member.name }}
       </p>

src/components/UI/AIcon.vue

@@ -12,7 +12,12 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <Icon :icon="name" :class="$style.icon" :width="size" :height="size" />
+  <Icon
+    :icon="name"
+    :class="$style.icon"
+    :width="size"
+    :height="size"
+  />
 </template>
 
 <style lang="scss" module>

src/components/UI/ExternalLink.vue

@@ -3,8 +3,15 @@ import AIcon from './AIcon.vue'
 </script>
 
 <template>
-  <a :class="$style.container" target="_blank" rel="noreferrer noopener">
-    <a-icon name="mdi:open-in-new" :class="$style.icon" />
+  <a
+    :class="$style.container"
+    target="_blank"
+    rel="noreferrer noopener"
+  >
+    <a-icon
+      name="mdi:open-in-new"
+      :class="$style.icon"
+    />
     <slot />
   </a>
 </template>

src/components/UI/SearchInput.vue

@@ -34,7 +34,11 @@ const iconSize = computed(() => {
 
 <template>
   <div :class="[$style.inputWrapper, size === 'large' ? $style.large : '']">
-    <a-icon name="mdi:magnify" :size="iconSize" :class="$style.icon" />
+    <a-icon
+      name="mdi:magnify"
+      :size="iconSize"
+      :class="$style.icon"
+    />
     <input
       v-model="input"
       type="search"

src/components/User/AccountList.vue

@@ -16,7 +16,11 @@ const props = defineProps<{
         target="_blank"
         rel="noreferrer noopener"
       >
-        <img src="/@/assets/traP_logo_icon.svg" width="24" height="24" />
+        <img
+          src="/@/assets/traP_logo_icon.svg"
+          width="24"
+          height="24"
+        />
       </a>
     </li>
     <account-list-item

src/components/User/AccountListItem.vue

@@ -30,7 +30,11 @@ const service = computed<Service | undefined>(() =>
         width="24"
         height="24"
       />
-      <a-icon v-else :name="service.icon ?? ''" :size="24" />
+      <a-icon
+        v-else
+        :name="service.icon ?? ''"
+        :size="24"
+      />
     </a>
   </li>
 </template>

src/components/User/ContestsContainer.vue

@@ -11,8 +11,15 @@ defineProps<Props>()
 <template>
   <section :class="$style.section">
     <h2 :class="$style.title">実績</h2>
-    <ul v-if="contests.length > 0" :class="$style.contests">
-      <li v-for="contest in contests" :key="contest.id" :class="$style.contest">
+    <ul
+      v-if="contests.length > 0"
+      :class="$style.contests"
+    >
+      <li
+        v-for="contest in contests"
+        :key="contest.id"
+        :class="$style.contest"
+      >
         <router-link
           :to="{ name: 'Contest', params: { contestId: contest.id } }"
           :class="$style.link"

src/components/User/EventsContainer.vue

@@ -11,7 +11,10 @@ defineProps<Props>()
 <template>
   <div>
     <div :class="$style.title">イベント一覧</div>
-    <p v-for="event in events" :key="event.id">
+    <p
+      v-for="event in events"
+      :key="event.id"
+    >
       {{ event.name }}
     </p>
   </div>

src/components/User/ProjectsContainer.vue

@@ -12,7 +12,10 @@ defineProps<Props>()
 <template>
   <section :class="$style.section">
     <h2 :class="$style.title">参加プロジェクト</h2>
-    <project-list v-if="projects.length > 0" :projects="projects" />
+    <project-list
+      v-if="projects.length > 0"
+      :projects="projects"
+    />
     <p v-else>これまでに参加したプロジェクトはありません</p>
   </section>
 </template>

src/components/User/UserDetailContainer.vue

@@ -10,7 +10,11 @@ defineProps<{
 
 <template>
   <div :class="$style.container">
-    <user-icon :class="$style.icon" :user-name="userDetail.name" :size="64" />
+    <user-icon
+      :class="$style.icon"
+      :user-name="userDetail.name"
+      :size="64"
+    />
     <div :class="$style.rightContainer">
       <div :class="$style.nameContainer">
         <div :class="$style.name">

src/pages/GroupPage.vue

@@ -29,7 +29,10 @@ onMounted(() => {
     <div :class="$style.container">
       <div :class="$style.titleContainer">
         <page-title>{{ groupDetail.name }}</page-title>
-        <external-link :href="groupDetail.link" :class="$style.link">
+        <external-link
+          :href="groupDetail.link"
+          :class="$style.link"
+        >
           紹介ページ
         </external-link>
       </div>