ci : formatとlintのチェックを追加

.github/workflows/ci.yaml

@@ -0,0 +1,42 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  quality:
+    name: Code quality
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@8912a9102ac27614460f54aedde9e1e7f9aec20d # v6.0.5
+      - name: Setup Node.js
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: .node-version
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
+      - name: Restore quality caches
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            .eslintcache
+            .prettier-cache
+          key: quality-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml', 'package.json', 'eslint.config.js', '.prettierrc.json', '.prettierignore') }}-${{ github.sha }}
+          restore-keys: |
+            quality-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml', 'package.json', 'eslint.config.js', '.prettierrc.json', '.prettierignore') }}-
+      - name: Install dependencies
+        run: pnpm ci
+      - name: Run ESLint
+        run: pnpm lint:check
+      - name: Check Prettier formatting
+        run: pnpm format:check

.gitignore

@@ -30,6 +30,9 @@ coverage
 
 *.tsbuildinfo
 
+.eslintcache
+.prettier-cache
+
 .env.local
 .env.*.local
 

.prettierignore

@@ -0,0 +1,3 @@
+*.md
+pnpm-lock.yaml
+public/mockServiceWorker.js

package.json

@@ -15,7 +15,9 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
+    "lint:check": "eslint . --cache --cache-location .eslintcache --max-warnings=0",
     "format": "prettier --write src/",
+    "format:check": "prettier --cache --cache-location .prettier-cache --check .",
     "generate:api": "npx openapi-typescript https://raw.githubusercontent.com/traPtitech/rucQ/main/openapi.yaml -o src/api/schema.d.ts && pnpm format"
   },
   "packageManager": "pnpm@11.5.0",

src/components/information/QuestionGroupPanel.vue

@@ -141,7 +141,7 @@ const allChecked = computed(() => {
   let result = true
   for (const question of props.questionGroup.questions) {
     const answer = answersMap[question.id]
-    if (!answer || answer.value === undefined || answer.value === null) {
+    if (answer?.value === undefined) {
       result = false // multiple の [], free_text の '' は falsy だが回答済みとみなす
       break
     }

src/components/layout/HeaderButton.vue

@@ -36,13 +36,7 @@ const campIconUrl = computed(() => {
 <template>
   <v-app-bar v-if="xs" elevation="2" color="white" density="comfortable" :class="$style.appBar">
     <template #prepend>
-      <img
-        :src="campIconUrl"
-        alt="rucQ Icon"
-        width="44"
-        height="44"
-        :class="$style.icon"
-      />
+      <img :src="campIconUrl" alt="rucQ Icon" width="44" height="44" :class="$style.icon" />
     </template>
     <v-app-bar-title :class="isArchived ? $style.archivedTitle : 'text-primary'">
       <span :class="$style.routeTitle">{{ route.name }} </span>

src/components/markdown/MarkdownPreview.vue

@@ -71,7 +71,7 @@ watch(
     headingElements.forEach((heading) => {
       const level = parseInt(heading.tagName.charAt(1))
       const id = `heading-${idCounter++}`
-      const text = heading.textContent ?? ''
+      const text = heading.textContent
 
       heading.setAttribute('id', id)
       headingInfos.push({ id, level, text })

src/components/rollcall/rollCallStream.ts

@@ -64,7 +64,7 @@ export function useRollCallStream(rollcall: Ref<RollCall | undefined>, userId: s
         const idx = reactions.value.findIndex((r) => r.userId === ev.userId)
         const entry = { id: ev.id, userId: ev.userId, content: ev.content }
         if (idx >= 0) reactions.value[idx] = entry
-        else reactions.value.push(entry as RollCallReaction)
+        else reactions.value.push(entry)
         break
       }
       case 'updated': {
@@ -74,7 +74,7 @@ export function useRollCallStream(rollcall: Ref<RollCall | undefined>, userId: s
             id: ev.id,
             userId: ev.userId,
             content: ev.content,
-          } as RollCallReaction
+          }
         break
       }
       case 'deleted': {
@@ -105,7 +105,7 @@ export function useRollCallStream(rollcall: Ref<RollCall | undefined>, userId: s
   const chooseOption = async (content: string) => {
     if (!rollcall.value) return
     if (!rollcall.value.subjects.includes(userId)) return
-    if (myReaction.value && myReaction.value.content === content) return
+    if (myReaction.value?.content === content) return
     if (inFlight.value) return // いずれかの操作中は他の操作を禁止
 
     try {

src/store.ts

@@ -161,7 +161,7 @@ export const useCampStore = defineStore('camp', () => {
 
   const isOperable = (camp: Camp) => {
     // 最新の合宿かつ登録済みで、かつ終了していない場合のみ操作可能
-    if (!latestCamp.value || latestCamp.value.id !== camp.id) return false
+    if (latestCamp.value?.id !== camp.id) return false
     return hasRegisteredLatest.value && !timeStore.isCampEnded(camp)
   }
 

src/views/ActivityView.vue

@@ -81,58 +81,58 @@ const dailyActivities = computed(() => {
     <!-- Content -->
     <div v-else class="pa-4" :class="$style.container">
       <template v-for="day in dailyActivities" :key="day.date.toISOString()">
-      <h3 class="mb-2 mt-4" :class="$style.dayHeader">
-        {{ getDayStringNoPad(day.date) }}
-      </h3>
-      <div class="d-flex flex-column ga-3">
-        <template v-for="activity in day.activities" :key="`${activity.id}-${activity.time}`">
-          <activity-layout
-            v-if="activity.type === 'room_created'"
-            :type="activity.type"
-            :date="new Date(activity.time)"
-          >
-            <template #default="{ color }">
-              <span :class="`text-${color}`"> 部屋情報が公開されました </span>
-            </template>
-          </activity-layout>
-          <activity-layout
-            v-if="activity.type === 'payment_created'"
-            :type="activity.type"
-            :date="new Date(activity.time)"
-          >
-            <template #default="{ color }">
-              <span :class="`text-${color}`">
-                {{ activity.amount.toLocaleString() }} 円の支払いが作成されました
-              </span>
-            </template>
-          </activity-layout>
-          <activity-layout
-            v-if="activity.type === 'payment_amount_changed'"
-            :type="activity.type"
-            :date="new Date(activity.time)"
-          >
-            <template #default="{ color }">
-              <span :class="`text-${color}`">
-                支払い金額が {{ activity.amount.toLocaleString() }} 円に変更されました
-              </span>
-            </template>
-          </activity-layout>
-          <activity-layout
-            v-if="activity.type === 'payment_paid_changed'"
-            :type="activity.type"
-            :date="new Date(activity.time)"
-          >
-            <template #default="{ color }">
-              <span :class="`text-${color}`">
-                合宿係が {{ activity.amount.toLocaleString() }} 円の振込を確認しました
-              </span>
-            </template>
-          </activity-layout>
-          <roll-call-activity v-if="activity.type === 'roll_call_created'" :activity="activity" />
-          <question-activity v-if="activity.type === 'question_created'" :activity="activity" />
-        </template>
-      </div>
-    </template>
+        <h3 class="mb-2 mt-4" :class="$style.dayHeader">
+          {{ getDayStringNoPad(day.date) }}
+        </h3>
+        <div class="d-flex flex-column ga-3">
+          <template v-for="activity in day.activities" :key="`${activity.id}-${activity.time}`">
+            <activity-layout
+              v-if="activity.type === 'room_created'"
+              :type="activity.type"
+              :date="new Date(activity.time)"
+            >
+              <template #default="{ color }">
+                <span :class="`text-${color}`"> 部屋情報が公開されました </span>
+              </template>
+            </activity-layout>
+            <activity-layout
+              v-if="activity.type === 'payment_created'"
+              :type="activity.type"
+              :date="new Date(activity.time)"
+            >
+              <template #default="{ color }">
+                <span :class="`text-${color}`">
+                  {{ activity.amount.toLocaleString() }} 円の支払いが作成されました
+                </span>
+              </template>
+            </activity-layout>
+            <activity-layout
+              v-if="activity.type === 'payment_amount_changed'"
+              :type="activity.type"
+              :date="new Date(activity.time)"
+            >
+              <template #default="{ color }">
+                <span :class="`text-${color}`">
+                  支払い金額が {{ activity.amount.toLocaleString() }} 円に変更されました
+                </span>
+              </template>
+            </activity-layout>
+            <activity-layout
+              v-if="activity.type === 'payment_paid_changed'"
+              :type="activity.type"
+              :date="new Date(activity.time)"
+            >
+              <template #default="{ color }">
+                <span :class="`text-${color}`">
+                  合宿係が {{ activity.amount.toLocaleString() }} 円の振込を確認しました
+                </span>
+              </template>
+            </activity-layout>
+            <roll-call-activity v-if="activity.type === 'roll_call_created'" :activity="activity" />
+            <question-activity v-if="activity.type === 'question_created'" :activity="activity" />
+          </template>
+        </div>
+      </template>
     </div>
   </div>
 </template>