style: フォーマット

.eslintrc.js

@@ -9,20 +9,19 @@ module.exports = {
     requireConfigFile: false,
     project: 'tsconfig.json',
     sourceType: 'module',
-    extraFileExtensions: [
-      '.vue',
-    ],
+    extraFileExtensions: ['.vue'],
   },
-  "parser": "vue-eslint-parser",
+  parser: 'vue-eslint-parser',
   extends: [
     'plugin:vue/vue3-recommended',
     'prettier',
-    '@nuxt/eslint-config-typescript',
+    '@nuxtjs/eslint-config-typescript',
   ],
   plugins: ['vue', 'import'],
   // add your custom rules here
   rules: {
     // これがないと単一名称のコンポーネントを置けない
     'vue/multi-word-component-names': 'off',
   },
+  ignorePatterns: ['.eslintrc.js']
 }

components/AddTagDialog.vue

@@ -13,10 +13,17 @@
         </v-btn>
       </template>
       <v-card>
-        <v-btn class="ma-6" icon variant="plain" @click="tagDialog = !tagDialog">
+        <v-btn
+          class="ma-6"
+          icon
+          variant="plain"
+          @click="tagDialog = !tagDialog"
+        >
           <v-icon> mdi-window-close </v-icon>
         </v-btn>
-        <v-card-title class="justify-center"> タグを登録します </v-card-title>
+        <v-card-title class="justify-center">
+          タグを登録します
+        </v-card-title>
         <v-container>
           <v-row>
             <v-col>
@@ -27,8 +34,7 @@
                   variant="outlined"
                   required
                   density="compact"
-                >
-                </v-text-field>
+                />
                 <FormButton :disabled="!isSubmittable" :click="addTag">
                   保存する
                 </FormButton>
@@ -55,29 +61,29 @@ const userStore = useUserStore()
 export default {
   components: {
     FormButton,
-    Snackbar,
+    Snackbar
   },
-  data() {
+  data () {
     return {
       tagDialog: false,
       newTag: '',
       snackbar: false,
       snackbarText: '',
       rules: {
-        tag: [(val) => (val || '').length > 0 || 'タグを入力してください。'],
-      },
+        tag: [val => (val || '').length > 0 || 'タグを入力してください。']
+      }
     }
   },
   computed: {
-    tags() {
+    tags () {
       return tagStore.findAll
     },
-    isSubmittable() {
+    isSubmittable () {
       return this.newTag || this.newTag !== ''
-    },
+    }
   },
   methods: {
-    async addTag() {
+    async addTag () {
       if (this.tags.includes(this.newTag)) {
         this.snackbar = true
         this.snackbarText = `タグ ${this.newTag} はすでに登録されています`
@@ -88,16 +94,16 @@ export default {
         userId: userStore.getCurrent.id,
         name: this.newTag,
         createdAt: now,
-        updatedAt: now,
+        updatedAt: now
       })
       this.newTag = ''
       this.tagDialog = false
       this.snackbar = true
       this.snackbarText = `タグ ${this.newTag} を追加しました`
     },
-    close() {
+    close () {
       this.snackbar = false
-    },
-  },
+    }
+  }
 }
 </script>

components/AppHeader.vue

@@ -3,16 +3,13 @@
     <v-app-bar-title> Cords </v-app-bar-title>
     <v-container v-if="isAuthenticated" class="justify-right">
       <v-row>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-menu offset-y>
           <template #activator="{ props }">
-            <v-btn
-              text
-              color="primary"
-              class="text-button"
-              v-bind="props"
-            >
-              <v-icon class="mr-1"> mdi-account-outline </v-icon> {{ name }}
+            <v-btn text color="primary" class="text-button" v-bind="props">
+              <v-icon class="mr-1">
+                mdi-account-outline
+              </v-icon> {{ name }}
             </v-btn>
           </template>
           <v-list>
@@ -32,7 +29,7 @@
 </template>
 
 <script>
-import { getAuth, signOut } from "firebase/auth";
+import { getAuth, signOut } from 'firebase/auth'
 import { defineComponent } from 'vue'
 import { useUserStore } from '@/store/user.store'
 import ButtonLink from '@/components/atoms/BunttonLink'
@@ -41,24 +38,24 @@ import Snackbar from '@/components/atoms/Snackbar'
 export default defineComponent({
   components: {
     ButtonLink,
-    Snackbar,
+    Snackbar
   },
-  data() {
+  data () {
     return {
       snackbar: false,
-      snackbarText: '',
+      snackbarText: ''
     }
   },
   computed: {
-    isAuthenticated() {
+    isAuthenticated () {
       return useUserStore().isAuthenticated
     },
-    name() {
+    name () {
       return useUserStore().getCurrent.name
-    },
+    }
   },
   methods: {
-    signout() {
+    signout () {
       const { $fire } = useNuxtApp()
       const { reset } = useUserStore()
       const { push } = useRouter()
@@ -74,10 +71,10 @@ export default defineComponent({
           this.snackbar = true
         })
     },
-    close() {
+    close () {
       this.snackbar = false
-    },
-  },
+    }
+  }
 })
 </script>
 

components/CardList.vue

@@ -1,11 +1,15 @@
 <script lang="ts" setup>
+import { useDisplay } from 'vuetify'
 import Snackbar from '@/components/atoms/Snackbar.vue'
 import { useUserStore } from '@/store/user.store'
 import { Note, useNoteStore } from '@/store/note.store'
 import { useTagStore } from '@/store/tag.store'
-import { useDisplay } from 'vuetify'
 
-const { fetchAll: fetchAllNotes, findAll: findAllNotes, delete: remove } = useNoteStore()
+const {
+  fetchAll: fetchAllNotes,
+  findAll: findAllNotes,
+  delete: remove
+} = useNoteStore()
 const tagStore = useTagStore()
 const { getCurrent } = useUserStore()
 const router = useRouter()
@@ -15,8 +19,8 @@ const currentId = getCurrent.id
 let listNotes: Note[] = await fetchAllNotes(currentId)
 await tagStore.fetchAll(currentId)
 
-let snackbar = ref(false)
-let snackbarText = ref('')
+const snackbar = ref(false)
+const snackbarText = ref('')
 
 const notes = computed({
   get: () => findAllNotes,
@@ -45,7 +49,7 @@ const listHeight = computed(() => {
 
 const deleteNote = async (id: string): Promise<void> => {
   await remove(id)
-  notes.value = listNotes.filter((note) => note.id !== id)
+  notes.value = listNotes.filter(note => note.id !== id)
   snackbar.value = true
   snackbarText.value = 'カードを削除しました'
   // 削除時に削除するカード上にいたらリダイレクトする
@@ -62,8 +66,8 @@ const findByTags = (event: string[]): void => {
   if (filteringTags.size === 0) {
     notes.value = findAllNotes
   } else {
-    const filteredNotes = findAllNotes.filter(
-      (note) => filteringTags.has(note.tag)
+    const filteredNotes = findAllNotes.filter(note =>
+      filteringTags.has(note.tag)
     )
     notes.value = filteredNotes
   }
@@ -89,8 +93,7 @@ const close = () => {
       class="mt-2 mb-2"
       label="フィルタ"
       @change="findByTags"
-    >
-    </v-select>
+    />
     <v-list dense :height="listHeight" class="grey lighten-5 force-size">
       <v-list-item v-for="note in listNotes" :key="note.id">
         <div>

components/CreateCardForm.vue

@@ -3,15 +3,27 @@
     <v-container fluid>
       <v-row no-gutters>
         <v-col>
-          <v-text-field v-model="title" label="要約" solo variant="outlined" density="compact"> </v-text-field>
+          <v-text-field
+            v-model="title"
+            label="要約"
+            solo
+            variant="outlined"
+            density="compact"
+          />
         </v-col>
       </v-row>
       <v-row no-gutters>
         <AddTagDialog class="ma-1" />
         <DeleteTagDialog :tags="tags" class="ma-1" />
         <v-col>
-          <v-select v-model="tag" :items="tags" label="タグ" solo variant="outlined" density="compact">
-          </v-select>
+          <v-select
+            v-model="tag"
+            :items="tags"
+            label="タグ"
+            solo
+            variant="outlined"
+            density="compact"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -24,7 +36,9 @@
       </v-col>
     </v-row>
     <v-row>
-      <FormButton :click="addNote"> 保存する </FormButton>
+      <FormButton :click="addNote">
+        保存する
+      </FormButton>
     </v-row>
     <Snackbar :open="snackbar" :close="close">
       {{ snackbarText }}
@@ -33,10 +47,10 @@
 </template>
 
 <script>
+import { useDisplay } from 'vuetify'
 import FormButton from '@/components/atoms/FormButton'
 import Snackbar from '@/components/atoms/Snackbar'
 import RichEditor from '@/components/atoms/editors/RichEditor'
-import { useDisplay } from 'vuetify'
 import { useTagStore } from '@/store/tag.store'
 import { useNoteStore } from '@/store/note.store'
 const tagStore = useTagStore()
@@ -46,22 +60,22 @@ export default {
   components: {
     FormButton,
     Snackbar,
-    RichEditor,
+    RichEditor
   },
-  data() {
+  data () {
     return {
       snackbar: false,
       snackbarText: '',
       title: '',
       body: '',
-      tag: '',
+      tag: ''
     }
   },
   computed: {
-    tags() {
-      return tagStore.findAll.map((t) => t.name)
+    tags () {
+      return tagStore.findAll.map(t => t.name)
     },
-    initialBody() {
+    initialBody () {
       const { name } = useDisplay()
       switch (name.value) {
         case 'sm':
@@ -79,13 +93,13 @@ export default {
           // 7行
           return '<p></p><p></p><p></p><p></p><p></p><p></p><p></p>'
       }
-    },
+    }
   },
-  created() {
+  created () {
     this.body = this.initialBody
   },
   methods: {
-    addNote() {
+    addNote () {
       const titleOrUntitled = this.title ? this.title : '無題'
 
       const now = new Date()
@@ -94,17 +108,17 @@ export default {
         tag: this.tag,
         body: this.body,
         createdAt: now,
-        updatedAt: now,
+        updatedAt: now
       })
       this.snackbar = true
       this.snackbarText = `カード ${titleOrUntitled} を保存しました`
       this.title = ''
       this.tag = ''
       this.body = ''
     },
-    close() {
+    close () {
       this.snackbar = false
-    },
-  },
+    }
+  }
 }
 </script>