👕change settings & fix

traPtitech · Apr 4, 2022 · 4649925 · 4649925
1 parent 1527974
commit 4649925
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 41 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,20 +8,57 @@
     "parser": "@typescript-eslint/parser"
   },
   "extends": [
-    "plugin:vue/vue3-essential",
     "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint"
+    "./eslint-vue-ts-recommended.js",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "no-console": "warn",
     "no-debugger": "warn",
+    "no-empty": ["error", { "allowEmptyCatch": true }],
     "vue/attributes-order": [
       "warn",
       {
         "alphabetical": true
       }
-    ]
+    ],
+    "eqeqeq": "error",
+    "vue/eqeqeq": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        "name": "/@/lib/apis/generated",
+        "message": "Please use /@/lib/apis instead."
+      }
+    ],
+    "@typescript-eslint/member-delimiter-style": [
+      "error",
+      {
+        "multiline": {
+          "delimiter": "none"
+        },
+        "singleline": {
+          "delimiter": "semi"
+        }
+      }
+    ],
+    // "@typescript-eslint/consistent-type-imports": "error",
+    "vue/require-default-prop": "off",
+    "vue/block-lang": [
+      "error",
+      {
+        "script": { "lang": "ts" }
+      }
+    ],
+    "vue/component-api-style": ["error", ["script-setup"]],
+    "vue/component-name-in-template-casing": ["error", "kebab-case"],
+    "vue/custom-event-name-casing": ["error", "camelCase"],
+    "vue/v-on-event-hyphenation": ["error", "always", { "autofix": true }],
+    "vue/v-on-function-call": "error",
+    "vue/no-template-target-blank": "error",
+    "vue/prefer-true-attribute-shorthand": "error",
+    "vue/prefer-import-from-vue": "error"
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,6 @@ dist-ssr
 *.local
 debug.log
 
+.eslintcache
+
 src/lib/apis/generated
diff --git a/.prettierrc b/.prettierrc
@@ -8,7 +8,7 @@
   "jsxSingleQuote": false,
   "trailingComma": "none",
   "bracketSpacing": true,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "arrowParens": "avoid",
   "rangeStart": 0,
   "filepath": "none",

diff --git a/eslint-vue-ts-recommended.js b/eslint-vue-ts-recommended.js
@@ -0,0 +1,21 @@
+/**
+ * plugin:@typescript-eslint/eslint-recommended
+ *
+ * @typescript-eslint/eslint-recommendedはoverridesが['*.ts','*.tsx']になっている
+ * そのため、`.vue`内の`<script lang='ts'>`に適用されない
+ * 適用されるようにするためにoverridesに'*.vue'を追加する
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+const typescriptEslintEslintRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended')
+
+// eslint-disable-next-line no-undef
+module.exports = {
+  ...typescriptEslintEslintRecommended,
+  overrides: typescriptEslintEslintRecommended.overrides.map(override => {
+    if (override.files.includes('*.ts')) {
+      return { ...override, files: [...override.files, '*.vue'] }
+    }
+    return override
+  })
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.5.0",
     "prettier": "^2.6.2",

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -13,15 +13,15 @@ type User = {
 interface Props {
   me: User
 }
-const props = defineProps<Props>()
+defineProps<Props>()
 </script>
 
 <template>
-  <header class="flex shadow h-12 w-full items-center">
+  <header class="flex h-12 shadow w-full items-center">
     <router-link to="/">
       <Logo />
     </router-link>
-    <div class="flex flex-1 px-2 justify-between h-full">
+    <div class="flex h-full flex-1 px-2 justify-between">
       <div class="flex gap-2 items-center">
         <router-link to="/requests?pageIndex=1">
           <span>申請一覧</span>
@@ -32,7 +32,7 @@ const props = defineProps<Props>()
         <router-link to="/groups?pageIndex=1">
           <span>グループ一覧</span>
         </router-link>
-        <router-link to="/admins" v-if="me.admin">
+        <router-link v-if="me.admin" to="/admins">
           <span>管理ページ</span>
         </router-link>
       </div>

diff --git a/src/components/shared/Button.vue b/src/components/shared/Button.vue
@@ -20,12 +20,17 @@ const paddingClass = computed(() => {
       return 'p-4'
     case 'xl':
       return 'p-8'
+    default: {
+      const n: never = props.padding
+      throw new Error(`unexpected padding: ${n}`)
+    }
   }
 })
 </script>
 
 <template>
-  <button :class="`hover:bg-zinc-200 rounded-md border border-zinc-300 ${fontSizeClass} ${paddingClass}`">
+  <button
+    :class="`hover:bg-zinc-200 rounded-md border border-zinc-300 ${fontSizeClass} ${paddingClass}`">
     <slot></slot>
   </button>
 </template>
diff --git a/src/components/shared/Logo.vue → src/components/shared/JomonLogo.vue b/src/components/shared/Logo.vue → src/components/shared/JomonLogo.vue
diff --git a/src/components/shared/UserIcon.vue b/src/components/shared/UserIcon.vue
@@ -2,13 +2,12 @@
 interface Props {
   name: string
 }
-const props = defineProps<Props>()
+defineProps<Props>()
 </script>
 
 <template>
   <img
-    :src="'https://q.trap.jp/api/v3/public/icon/' + name"
     alt="icon"
     class="h-full rounded-1/2 p-1"
-  />
+    :src="'https://q.trap.jp/api/v3/public/icon/' + name" />
 </template>
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component

diff --git a/src/main.ts b/src/main.ts
@@ -1,7 +1,6 @@
+import { createPinia } from 'pinia'
 import 'virtual:windi-devtools'
 import 'virtual:windi.css'
-
-import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import App from './App.vue'

diff --git a/src/pages/Admin.vue b/src/pages/Admin.vue
@@ -37,7 +37,7 @@ const addAdmins = () => {
 </script>
 
 <template>
-  <div class="ml-4" v-if="me.admin">
+  <div v-if="me.admin" class="ml-4">
     <h1 class="my-4 text-center text-3xl">管理ページ</h1>
     <div>
       <ul class="flex gap-2">
@@ -51,26 +51,24 @@ const addAdmins = () => {
     <div class="mt-4">
       <VueSelect
         v-model="addList"
+        class="mb-2 w-1/2"
         label="name"
+        multiple
         :options="users"
         placeholder="追加する管理者を選択"
-        :reduce="(user:any) => user.name"
-        multiple
-        class="mb-2 w-1/2"
-      ></VueSelect>
-      <Button @click.stop="addAdmins" fontSize="lg" padding="sm">
+        :reduce="(user:any) => user.name"></VueSelect>
+      <Button font-size="lg" padding="sm" @click.stop="addAdmins">
         追加する管理者を選択</Button
       >
     </div>
     <div class="mt-4">
       <VueSelect
         v-model="deleteList"
-        :options="admins"
-        placeholder="削除する管理者を選択"
-        multiple
         class="mb-2 w-1/2"
-      ></VueSelect>
-      <Button @click.stop="deleteAdmins" fontSize="lg" padding="sm">
+        multiple
+        :options="admins"
+        placeholder="削除する管理者を選択"></VueSelect>
+      <Button font-size="lg" padding="sm" @click.stop="deleteAdmins">
         削除する管理者を選択</Button
       >
     </div>

diff --git a/src/router.ts b/src/router.ts
@@ -1,4 +1,5 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
   { path: '/', redirect: '/requests' },

diff --git a/src/stores/admin.ts b/src/stores/admin.ts
@@ -2,22 +2,23 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 // SwaggerでSchemaに書けば型名を指定できる
-import apis,{ InlineObject2, User } from '/@/lib/apis'
+import type { InlineObject2, User } from '/@/lib/apis'
+import apis from '/@/lib/apis'
 
 export const useAdminStore = defineStore('admin', () => {
   // admins: ['mehm8128', 'mehm81', 'mehm']
-  const admins = ref<User[]>([]);
+  const admins = ref<User[]>([])
   const isAdminFetched = ref(false)
 
   const fetchAdmins = async () => {
     admins.value = (await apis.adminsGet()).data // Swaggerをちゃんと書けば型付きで情報が取れる
   }
   const postAdmin = async (admin: InlineObject2) => {
-      await apis.adminsPost(admin)
-    }
+    await apis.adminsPost(admin)
+  }
   const deleteAdmin = async (admin: string) => {
-      await apis.adminsUserIDDelete(admin)
-    }
+    await apis.adminsUserIDDelete(admin)
+  }
   return {
     admins,
     isAdminFetched,

diff --git a/tsconfig.json b/tsconfig.json
@@ -9,6 +9,7 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
+    // "importsNotUsedAsValues": "error",
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "baseUrl": ".",