wip: eslint install

azuki774 · Sep 9, 2024 · 87e0282 · 87e0282
1 parent 00e4656
commit 87e0282
Show file tree

Hide file tree

Showing 14 changed files with 2,486 additions and 488 deletions.
diff --git a/components/History.vue b/components/History.vue
@@ -1,44 +1,41 @@
 <script setup lang="ts">
-import type { Record } from "@/interfaces";
-const config = useRuntimeConfig(); // nuxt.config.ts に書いてあるコンフィグを読み出す
+import type { Record } from '@/interfaces'
+const config = useRuntimeConfig() // nuxt.config.ts に書いてあるコンフィグを読み出す
 const recordList = ref<Record[]>()
 const asyncData = await useFetch(
-  "/api/history",
+  '/api/history',
   {
     key: `/api/history`,
-  }
-);
-
+  },
+)
 
-const data = asyncData.data.value as Record[];
+const data = asyncData.data.value as Record[]
 
 // fetchデータを整形
 if (data != undefined) { // 取得済の場合のみ
-  for (let d of data) {
-    d.datetime = d.datetime.slice(0, 19); // 2023-09-23T00:00:00+09:00 -> 2023-09-23T00:00:00
+  for (const d of data) {
+    d.datetime = d.datetime.slice(0, 19) // 2023-09-23T00:00:00+09:00 -> 2023-09-23T00:00:00
   }
 }
 
-
 recordList.value = data
 
 async function showDeleteDialog(id: number): Promise<void> {
-  const userResponse: boolean = confirm("このデータを削除しますか");
+  const userResponse: boolean = confirm('このデータを削除しますか')
   if (userResponse == true) {
-    console.log('delete: id=' + id);
+    console.log('delete: id=' + id)
     const asyncDataBtn = await useAsyncData(
       `record`,
       (): Promise<any> => {
-        const param = { 'id': id };
-        const paramStr = "?id=" + param['id'];
-        const localurl = "/api/deleteRecord" + paramStr
-        const response = $fetch(localurl);
-        return response;
-      }
-    );
+        const param = { id: id }
+        const paramStr = '?id=' + param['id']
+        const localurl = '/api/deleteRecord' + paramStr
+        const response = $fetch(localurl)
+        return response
+      },
+    )
     location.reload()
   }
-
 };
 
 </script>

diff --git a/components/PostRecord.vue b/components/PostRecord.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import type { Category } from "@/interfaces";
-const config = useRuntimeConfig(); // nuxt.config.ts に書いてあるコンフィグを読み出す
+import type { Category } from '@/interfaces'
+const config = useRuntimeConfig() // nuxt.config.ts に書いてあるコンフィグを読み出す
 const selector = ref<any>()
 const categoryList = ref<Category[]>()
 const asyncData = await useFetch(
-  "/api/getCategories",
+  '/api/getCategories',
   {
     key: `/api/getCategories`,
-  }
-);
+  },
+)
 
-const data = asyncData.data.value as Category[];
+const data = asyncData.data.value as Category[]
 
 // category 加工
 if (data != undefined) { // 取得済の場合のみ
-  for (let d of data) {
+  for (const d of data) {
     // 100, category_name -> 100:category_name という表示に
     // ただし加工済の場合は skip
-    if (d.category_name[3] != ":") {
-      d.category_name = d.category_id + ":" + d.category_name
+    if (d.category_name[3] != ':') {
+      d.category_name = d.category_id + ':' + d.category_name
     }
   }
 }
@@ -33,15 +33,15 @@ const postButton = async (): Promise<void> => {
     `record`,
     (): Promise<any> => {
       const send_category_id = selector.value.slice(0, 3) // 210-食費→210
-      const param = { 'price': priceBox.value, 'category_id': send_category_id }
-      const paramStr = "?price=" + param['price'] + "&category_id=" + param['category_id']
-      const localurl = "/api/postRecord" + paramStr
-      const response = $fetch(localurl);
-      return response;
-    }
-  );
+      const param = { price: priceBox.value, category_id: send_category_id }
+      const paramStr = '?price=' + param['price'] + '&category_id=' + param['category_id']
+      const localurl = '/api/postRecord' + paramStr
+      const response = $fetch(localurl)
+      return response
+    },
+  )
   location.reload()
-};
+}
 
 </script>
 
@@ -57,12 +57,12 @@ const postButton = async (): Promise<void> => {
       </div>
 
       <div class="col-2 mb-3">
-        <input v-model="priceBox" type="number" placeholder="Value" />
+        <input v-model="priceBox" type="number" placeholder="Value" >
       </div>
     </div>
 
     <div class="d-grid col-2 mx-auto">
-      <button class="btn btn-primary" @click="postButton" name="postButton" type="submit">Post</button>
+      <button class="btn btn-primary" name="postButton" type="submit" @click="postButton">Post</button>
     </div>
 
   </div>

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,26 @@
+import withNuxt from './.nuxt/eslint.config.mjs'
+import stylistic from '@stylistic/eslint-plugin'
+
+export default withNuxt(
+  {
+    files: ['**/*.vue', '**/*.ts'],
+    rules: {
+      'no-console': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'vue/no-multiple-template-root': 'error',
+      'vue/multi-word-component-names': 'error',
+      'vue/require-v-for-key': 'error',
+      'vue/no-use-v-if-with-v-for': 'error',
+    },
+  },
+  stylistic.configs.customize({
+    indent: 2, // インデントはスペース2
+    quotes: 'single', // クオートはシングル
+    semi: false, // セミコロンは不要
+  }),
+)
diff --git a/interfaces.ts b/interfaces.ts
@@ -1,22 +1,22 @@
 export interface Record {
-    id: number;
-    category_id: number;
-    category_name: string;
-    datetime: string;
-    from: string;
-    type: string;
-    price: number;
-    memo: string;
+  id: number
+  category_id: number
+  category_name: string
+  datetime: string
+  from: string
+  type: string
+  price: number
+  memo: string
 }
 
 export interface Category {
-    category_id: number;
-    category_name: string;
+  category_id: number
+  category_name: string
 }
 
 export interface SummaryOne {
-    category_id: number;
-    category_name: string;
-    price: number[]; // 4,5,6,7,8,9,10,11,12,1,2,3月の額
-    total: number;
+  category_id: number
+  category_name: string
+  price: number[] // 4,5,6,7,8,9,10,11,12,1,2,3月の額
+  total: number
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,14 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
-  css: ["bootstrap/dist/css/bootstrap.min.css"],
+  css: ['bootstrap/dist/css/bootstrap.min.css'],
   devtools: { enabled: true },
+  modules: [
+    '@nuxt/eslint',
+  ],
   routeRules: {
-    "/": { ssr: true },
+    '/': { ssr: true },
   },
   runtimeConfig: {
     public: { // 外部から取得するにはpublic が必要
-      mawinterApi: "http://mawinter-api", // .env の NUXT_PUBLIC_API_BASE_ENDPOINT から取得
-    }
-  }
+      mawinterApi: 'http://mawinter-api', // .env の NUXT_PUBLIC_API_BASE_ENDPOINT から取得
+    },
+  },
 })