ESLint rules 改善

.eslintrc.cjs

@@ -1,11 +1,18 @@
 module.exports = {
-  extends: ['plugin:vue/vue3-recommended', 'plugin:vuejs-accessibility/recommended'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:vuejs-accessibility/recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+  ],
   plugins: ['vuejs-accessibility', '@typescript-eslint'],
   root: true,
   env: { node: true, es6: true },
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@typescript-eslint/parser',
+    project: ['./tsconfig.json'],
+    extraFileExtensions: ['.vue'],
   },
   rules: {
     quotes: ['error', 'single', { avoidEscape: true }],
@@ -35,5 +42,20 @@ module.exports = {
     ],
     'vue/multiline-html-element-content-newline': 'off',
     'vue/singleline-html-element-content-newline': 'off',
+    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+    // v6 更新時に無効化
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-redundant-type-constituents': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-enum-comparison': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/require-await': 'off',
   },
 }

app/atoms/user.ts

@@ -1,6 +1,6 @@
 import { FormUser, User } from '~/types/app'
 
-type State = {
+interface State {
   user: FormUser
 }
 

app/components/DragDropArea.vue

@@ -4,9 +4,7 @@ interface DragDropAreaProps {
   fileAccept: string
 }
 
-interface DragDropAreaEmit {
-  (e: 'check-files', value: File[]): void
-}
+type DragDropAreaEmit = (e: 'check-files', value: File[]) => void
 
 const props = defineProps<DragDropAreaProps>()
 const isDragEnter = ref(false)

app/components/PopupArea.vue

@@ -14,9 +14,7 @@ const props = defineProps({
   },
 })
 
-interface PopupAreaEmit {
-  (e: 'sign-out'): void
-}
+type PopupAreaEmit = (e: 'sign-out') => void
 const emit = defineEmits<PopupAreaEmit>()
 </script>
 

app/components/TopPageSection.vue

@@ -12,10 +12,10 @@ import SpBg from '@/assets/top/sp/wave.svg'
 import TwitterButton from '~/components/social/TwitterButton.vue'
 
 type Device = 'pc' | 'md' | 'sp'
-type ImageList = {
-  wave: typeof PcBg | typeof MdBg | typeof SpBg
-  block: typeof PcBlock | typeof MdBlock | typeof SpBlock
-  title: typeof PcTitle | typeof MdTitle | typeof SpTitle
+interface ImageList {
+  wave: typeof PcBg
+  block: typeof PcBlock
+  title: typeof PcTitle
 }
 
 const device = ref<Device>('pc')

app/components/footer/PrivacyPolicyAndCoc.vue

@@ -2,9 +2,7 @@
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import TextButton from '~/components/button/TextButton.vue'
 
-interface PrivacyPolicyAndCocEmit {
-  (e: 'on-click'): void
-}
+type PrivacyPolicyAndCocEmit = (e: 'on-click') => void
 const emit = defineEmits<PrivacyPolicyAndCocEmit>()
 
 const { locale } = useLocaleCurrent()

app/components/forms/InputField.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { InputHTMLAttributes } from 'vue'
 
+/* eslint-disable-next-line vue/prop-name-casing */
 type _InputFieldProps = Omit<InputHTMLAttributes, 'onInput' | 'onBlur'>
+/* eslint-disable-next-line @typescript-eslint/consistent-type-definitions */
 interface InputFieldProps extends /* @vue-ignore */ _InputFieldProps {
   titleLabel: string
   error: string

app/components/forms/SubmitButton.vue

@@ -2,16 +2,16 @@
 import { ButtonHTMLAttributes } from 'vue'
 import RoundButton from '~/components/button/RoundButton.vue'
 
+/* eslint-disable-next-line vue/prop-name-casing */
 type _SubmitButtonProps = Omit<ButtonHTMLAttributes, 'disabled' | 'onClick'>
+/* eslint-disable-next-line @typescript-eslint/consistent-type-definitions */
 interface SubmitButtonProps extends /* @vue-ignore */ _SubmitButtonProps {
   /**
    * Booleanish ではなく boolean として型定義をしなおす
    */
   disabled?: boolean
 }
-interface SubmitButtonEmit {
-  (e: 'on-click'): void
-}
+type SubmitButtonEmit = (e: 'on-click') => void
 const props = defineProps<SubmitButtonProps>()
 const { disabled = false } = toRefs(props)
 const emit = defineEmits<SubmitButtonEmit>()

app/components/forms/TextareaField.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { TextareaHTMLAttributes } from 'vue'
 
+/* eslint-disable-next-line vue/prop-name-casing */
 type _TextareaFieldProps = Omit<TextareaHTMLAttributes, 'onInput' | 'onBlur'>
+/* eslint-disable-next-line @typescript-eslint/consistent-type-definitions */
 interface TextareaFieldProps extends /* @vue-ignore */ _TextareaFieldProps {
   titleLabel: string
   error: string

app/components/locale/LangItem.vue

@@ -13,9 +13,7 @@ const props = defineProps({
   },
 })
 
-interface LangItemEmit {
-  (e: 'on-click'): void
-}
+type LangItemEmit = (e: 'on-click') => void
 
 const emit = defineEmits<LangItemEmit>()
 

app/components/namecard/IntegrationCard.vue

@@ -6,9 +6,7 @@ import RoundButton from '~/components/button/RoundButton.vue'
 import useAuth from '~/composables/useAuth'
 import { ticketUrl } from '~/utils/constants'
 
-interface IntegrationCardEmit {
-  (e: 'on-close'): void
-}
+type IntegrationCardEmit = (e: 'on-close') => void
 const emit = defineEmits<IntegrationCardEmit>()
 
 const { signIn } = useAuth()

app/components/timetable/TimetableBodyRowMobile.vue

@@ -8,7 +8,7 @@ import YouTubeSvg from '~/assets/logo/youtube_logo.svg'
 
 const { locale } = useLocaleCurrent()
 
-type Props = {
+interface Props {
   track?: string
   sponsorSession?: string
   isTranslation?: boolean

app/composables/useAuth.ts

@@ -27,7 +27,7 @@ const dummyUser: FormUser = {
   receipt_id: 'dummydummy',
 }
 
-let signedUser = reactive<FormUser>({ ...initialUser })
+const signedUser = reactive<FormUser>({ ...initialUser })
 
 const useAuth = () => {
   // for dev
@@ -96,8 +96,8 @@ const useAuth = () => {
         ? 'https://vuefes.jp/2023'
         : 'https://localhost:3000'
       : isProd
-      ? 'https://vuefes.jp/2023/register'
-      : 'http://localhost:3000/register'
+        ? 'https://vuefes.jp/2023/register'
+        : 'http://localhost:3000/register'
     const { error } = await supabase.auth.signInWithOAuth({
       provider,
       options: {

app/composables/usePassMarketUpload.ts

@@ -9,7 +9,7 @@ export function usePassMarketUpload() {
 
   async function fetchMembers(file: File): Promise<ListMember[]> {
     const workbook = XLSX.read(await file.arrayBuffer())
-    const sheet = workbook.Sheets['Sheet1']
+    const sheet = workbook.Sheets.Sheet1
     const rows: ListRow[] = XLSX.utils.sheet_to_json(sheet)
 
     return rows

app/composables/useSponsor.ts

@@ -1,17 +1,17 @@
 import { OptionCategory, SponsorCategory } from '~/types/app'
 
 export function useSponsor() {
-  const isPlatinum = (categories: Array<SponsorCategory | OptionCategory>) =>
+  const isPlatinum = (categories: (SponsorCategory | OptionCategory)[]) =>
     categories.some((category) => category === 'platinum')
-  const isBronze = (categories: Array<SponsorCategory | OptionCategory>) =>
+  const isBronze = (categories: (SponsorCategory | OptionCategory)[]) =>
     categories.some((category) => category === 'bronze')
 
-  const isMoreSilver = (categories: Array<SponsorCategory | OptionCategory>) =>
+  const isMoreSilver = (categories: (SponsorCategory | OptionCategory)[]) =>
     categories.some(
       (category) => category === 'platinum' || category === 'gold' || category === 'silver',
     )
 
-  const isOptions = (categories: Array<SponsorCategory | OptionCategory>) =>
+  const isOptions = (categories: (SponsorCategory | OptionCategory)[]) =>
     categories.every(
       (category) =>
         category !== 'platinum' &&

app/pages/sessions/[id].vue

@@ -26,7 +26,7 @@
 const speakerId = route.params.id as string
 const speakerData: Speaker = speakers.find((s: Speaker) => {
   return s.id === speakerId
-}) as Speaker
+})!
 
 if (!speakerData.id) {
   // https://nuxt.com/docs/getting-started/error-handling#showerror
@@ -39,7 +39,7 @@
 
 useHead({
   titleTemplate: (titleChunk) => `${speakerData.profile.name} | ${conferenceTitle}`,
   meta: [
     ...generalOg({
       title: `${speakerData.profile.name} | ${conferenceTitle}`,
       description: `${speakerData.profile.name} のスピーカー情報を掲載しています。`,

app/types/app.ts

@@ -71,7 +71,7 @@ export interface User {
  */
 
 // addition.csv data
-export type AdditionItem = {
+export interface AdditionItem {
   receiptId: string
   applyTime: string
   role: Role
@@ -86,7 +86,7 @@ export type AdditionItem = {
 }
 
 // list.xls colums
-export type ListRow = {
+export interface ListRow {
   __EMPTY: string // "チケットID"
   __EMPTY_1: string // "参加者名"
   __EMPTY_10: string // "受付状況"
@@ -103,7 +103,7 @@ export type ListRow = {
 }
 
 // list.xls data
-export type ListMember = {
+export interface ListMember {
   ticketId: string
   ticketName: string
   userName: string
@@ -115,14 +115,14 @@ export type ListMember = {
  * speaker
  */
 
-export type Speaker = {
+export interface Speaker {
   id: string
   type: 'evan' | 'foreign' | 'domestic'
   session: Session
   profile: SpeakerProfile
 }
 
-export type Session = {
+export interface Session {
   title: string
   titleKey?: string
   type: 'main' | 'lt'
@@ -131,7 +131,7 @@ export type Session = {
   archives?: Archive
 }
 
-export type SpeakerProfile = {
+export interface SpeakerProfile {
   id?: string // SponsorSpeaker に限って id を必須とする
   image: string
   title: string
@@ -165,16 +165,16 @@ export type OptionCategory =
   | 'handson'
   | 'media'
 
-export type Sponsor = {
+export interface Sponsor {
   id: string
   name: string
   nameKey: string
   image: string
-  categories: Array<SponsorCategory | OptionCategory>
+  categories: (SponsorCategory | OptionCategory)[]
   url: string
 }
 
-export type SponsorSpeaker = {
+export interface SponsorSpeaker {
   id: string
   type: 'evan' | 'foreign' | 'domestic'
   session: Session
@@ -185,20 +185,20 @@ export type SponsorSpeaker = {
 /**
  * team
  */
-export type Team = {
+export interface Team {
   image: string
   name: string
   snsLink: string
 }
 
-export type Volunteer = {
+export interface Volunteer {
   name: string
 }
 
 /**
  * store
  */
-export type StoreMenu = {
+export interface StoreMenu {
   imgSrc: string
   nameKey: string
   price: string
@@ -210,7 +210,7 @@ export type StoreMenu = {
 /**
  * paneler
  */
-export type Paneler = {
+export interface Paneler {
   image: string
   name: string
   snsLink: string

app/types/i18n.ts

@@ -3,5 +3,7 @@ import all from '~/assets/locale/all'
 type AllSchema = typeof all
 
 declare module 'vue-i18n' {
-  export interface DefineLocaleMessage extends AllSchema {}
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  export type DefineLocaleMessage = AllSchema
 }

app/utils/constants.ts

@@ -1,6 +1,6 @@
 import { isProd } from './environment.constants'
 
-export type NavLink = {
+export interface NavLink {
   text: string
   link: string
 }

app/utils/og.constants.ts

@@ -1,12 +1,12 @@
 import { conferenceTitle, ogDescription, linkUrl, vuefesTwitterID } from './constants'
 
-export type OGProp = {
+export interface OGProp {
   title?: string // タイトル
   description?: string // 説明文
   url?: string // URL
   image?: string // 画像
 }
-export type Meta = {
+export interface Meta {
   hid: string
   name: string
   content: string

nuxt.config.ts

@@ -14,8 +14,8 @@
       title: conferenceTitle,
       meta: [
         { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
         ...generalOg(),
         ...twitterOg(),
       ],
       link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
       htmlAttrs: {
@@ -131,6 +131,7 @@
         exclude: [1, 2, 3, 4, 5, 6],
       },
     },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     experimental: {
       clientDB: true, // https://github.com/nuxt/content/issues/2215#issuecomment-1713796864