Migrate to ESLint v9

eslint.config.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2024 ThrRip, XMing (洺知-故犯)
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  {
+    files: ['eslint.config.js']
+  },
+  {
+    rules: {
+      '@typescript-eslint/ban-ts-comment': ['error', {
+        'ts-expect-error': false,
+        'ts-nocheck': false
+      }],
+      '@typescript-eslint/no-dynamic-delete': 'off',
+      '@stylistic/arrow-parens': ['error', 'as-needed', { requireForBlockBody: false }],
+      '@stylistic/comma-dangle': ['error', 'never'],
+      '@stylistic/indent': ['error', 2, {
+        ignoredNodes: ['IfStatement[alternate.type="IfStatement"]'],
+        SwitchCase: 1
+      }],
+      '@stylistic/indent-binary-ops': 'off',
+      '@stylistic/max-statements-per-line': ['error', { max: 2 }],
+      '@stylistic/operator-linebreak': ['error', 'after'],
+      '@stylistic/space-before-function-paren': ['error', 'always'],
+      'vue/comma-dangle': ['error', 'never'],
+      'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
+      'vue/operator-linebreak': ['error', 'after']
+    }
+  },
+  {
+    files: ['packages/*/pages/**/*.vue'],
+    rules: { 'vue/multi-word-component-names': 'off' }
+  }
+)

nuxt.config.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2024 ThrRip, XMing (洺知-故犯)
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint'
+  ],
+
+  eslint: {
+    config: {
+      stylistic: true
+    }
+  }
+})

packages/admin/app.vue

@@ -99,9 +99,9 @@
           <font-awesome-icon
             :icon="['fas', 'angle-right']"
             class="max-lg:landscape:!h-4 !h-5 transition-transform duration-300"
-            :style="[ viewFullNavigationBarToggles === 0 ?
+            :style="[viewFullNavigationBarToggles === 0 ?
               '' :
-              `transform: rotate(${180 * viewFullNavigationBarToggles}deg)` ]"
+              `transform: rotate(${180 * viewFullNavigationBarToggles}deg)`]"
           />
         </button>
       </section>
@@ -155,9 +155,9 @@ backendClient.setEndpoint(useAppConfig().backendBase)
   .setProject(useAppConfig().backendProjectId)
 const backendAccount = new Account(backendClient)
 
-const backendLoggedIn = ref<Boolean>(false)
-const backendLoggedInChecking = ref<Boolean>(true)
-if (process.client) {
+const backendLoggedIn = ref<boolean>(false)
+const backendLoggedInChecking = ref<boolean>(true)
+if (import.meta.client) {
   backendAccount.get()
     .then(
       () => {
@@ -208,19 +208,20 @@ function backendLogout () {
 }
 
 // View
-const viewShowLoginModal = ref<Boolean>(true)
+const viewShowLoginModal = ref<boolean>(true)
 
-const viewShowFullNavigationBar = ref<Boolean>(false)
-const viewShowFullNavigationBarRealState = ref<Boolean>(false)
+const viewShowFullNavigationBar = ref<boolean>(false)
+const viewShowFullNavigationBarRealState = ref<boolean>(false)
 const viewFullNavigationBarToggles = ref<number>(0)
 
-const viewShowPageContent = ref<Boolean>(true)
+const viewShowPageContent = ref<boolean>(true)
 
 function viewToggleFullNavigationBar (show?: boolean) {
   if (show === undefined) {
     viewShowFullNavigationBar.value = !viewShowFullNavigationBar.value
     viewFullNavigationBarToggles.value++
-  } else
+  }
+ else
   if (viewShowFullNavigationBar.value !== show) {
     viewShowFullNavigationBar.value = show
     viewFullNavigationBarToggles.value++
@@ -230,7 +231,8 @@ function viewToggleFullNavigationBar (show?: boolean) {
   }, 300)
   if (viewShowFullNavigationBar.value) {
     viewShowPageContent.value = !viewShowFullNavigationBar.value
-  } else {
+  }
+  else {
     setTimeout(() => { viewShowPageContent.value = !viewShowFullNavigationBar.value }, 150)
   }
 }

packages/admin/components/playlist/ChangesList.vue

@@ -214,9 +214,9 @@
                   '请联系您的技术支持人员以获取帮助，或点击此图标以重新选择此项目，并再次尝试发布改动。' :
                   ''"
               class="group grid portrait:row-span-2 place-items-center pl-2.5 portrait:pl-2.5 portrait:pr-1 py-2.5 h-full"
-              :class="[ !getPublishingStateById(song.$id) ? 'cursor-pointer' :
+              :class="[!getPublishingStateById(song.$id) ? 'cursor-pointer' :
                 getPublishingStateById(song.$id)?.state === 'failed' ? 'grid-areas-stack cursor-pointer' :
-                'grid-areas-stack' ]"
+                'grid-areas-stack']"
             >
               <input
                 v-if="!getPublishingStateById(song.$id) || getPublishingStateById(song.$id)?.state === 'failed'"
@@ -473,7 +473,7 @@ const emit = defineEmits<{
 }>()
 
 const selectableIds = computed<Array<Song['$id']>>(() => {
-  // @ts-ignore
+  // @ts-expect-error
   return props.dataChanges.map(song => song.$id)
     .filter(id => getPublishingStateById(id)?.state !== 'processing' && getPublishingStateById(id)?.state !== 'succeeded')
 })

packages/admin/components/playlist/MainList.vue

@@ -366,7 +366,8 @@ function scrollList (position: 'top' | 'bottom') {
       top: 0,
       behavior: 'smooth'
     }))
-  } else {
+  }
+  else {
     nextTick(() => listArea.value?.scroll({
       top: listArea.value?.scrollHeight,
       behavior: 'smooth'
@@ -382,7 +383,6 @@ interface ModifyTarget {
   field: 'name' | 'artist' | 'payment_amount' | 'language'
 }
 const modifyingTarget = ref<{
-  // eslint-disable-next-line no-use-before-define
   [P in keyof ModifyTarget]: ModifyTarget[P] | null
 }>({
   id: null,

packages/admin/ecosystem.config.js

@@ -15,9 +15,9 @@ module.exports = {
       port: 12321,
       max_memory_restart: '200M',
       env: {
-        'NITRO_PORT': 12321,
-        'NUXT_APP_SECURE_CONTEXT': true,
-        'NUXT_BACKEND_API_KEY': ''
+        NITRO_PORT: 12321,
+        NUXT_APP_SECURE_CONTEXT: true,
+        NUXT_BACKEND_API_KEY: ''
       }
     }
   ]

packages/admin/middleware/entry.global.ts

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-export default defineNuxtRouteMiddleware(async (to) => {
-  if (process.client) { return }
+export default defineNuxtRouteMiddleware(async to => {
+  if (import.meta.client) { return }
 
   function navigateToHome () {
     return navigateTo(useAppConfig().appHomeBase, { external: true })
@@ -19,6 +19,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
     httpOnly: true,
     path: useAppConfig().appAdminBasePath,
     sameSite: 'strict',
+    // @ts-expect-error
     secure: useRuntimeConfig().appSecureContext
   })
   const entryToken = entryTokenQuery ?? entryTokenCookie.value
@@ -29,7 +30,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   const backendDatabases = new Databases(backendClient)
   backendClient.setEndpoint(useAppConfig().backendBase)
     .setProject(useAppConfig().backendProjectId)
-    .setKey(useRuntimeConfig().backendApiKey)
+    .setKey(useRuntimeConfig().backendApiKey as string)
 
   const entryTokenMatches = (await backendDatabases.listDocuments(
     'admin',
@@ -41,7 +42,8 @@ export default defineNuxtRouteMiddleware(async (to) => {
   )).total
   if (entryTokenMatches) {
     entryTokenCookie.value = String(entryToken)
-  } else {
+  }
+  else {
     return navigateToHome()
   }
 })

packages/admin/nuxt.config.ts

@@ -31,30 +31,32 @@ export default defineNuxtConfig({
     }
   },
 
-  build: {
-    transpile: ['@fortawesome/vue-fontawesome']
-  },
-
   css: [
     '@/../../assets/css/main.css',
     '@fortawesome/fontawesome-svg-core/styles.css'
   ],
 
+  build: {
+    transpile: ['@fortawesome/vue-fontawesome']
+  },
+
   devServer: {
     host: '0.0.0.0',
     port: 3001
   },
 
-  devtools: false,
+  devtools: {
+    enabled: false
+  },
 
   nitro: {
     preset: 'bun'
   },
 
   postcss: {
     plugins: {
-      'tailwindcss': {},
-      'autoprefixer': {}
+      tailwindcss: {},
+      autoprefixer: {}
     }
   },