feat: apply lint, use explict import

packages/devtools/client/app.config.ts

@@ -1,3 +1,5 @@
+import { defineAppConfig } from '#imports'
+
 export default defineAppConfig({
   fixture1: 'from app.config.ts',
 })

packages/devtools/client/composables/client-services/markdown.ts

@@ -1,4 +1,5 @@
 import type MarkdownIt from 'markdown-it'
+import { shallowRef } from 'vue'
 
 const md = shallowRef<MarkdownIt>()
 

packages/devtools/client/composables/client-services/shiki.ts

@@ -1,5 +1,6 @@
 import type { BuiltinLanguage, HighlighterCore } from 'shiki'
 import { createHighlighterCore, createJavaScriptRegexEngine } from 'shiki/core'
+import { shallowRef } from 'vue'
 
 export const shiki = shallowRef<HighlighterCore>()
 

packages/devtools/client/composables/client.ts

@@ -1,5 +1,10 @@
+import type { useRoute, useRouter } from '#imports'
 import type { NuxtDevtoolsClient, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, VueInspectorData } from '@nuxt/devtools-kit/types'
 import type { Unhead } from '@unhead/schema'
+import type { ComputedRef } from 'vue'
+import { useState } from '#imports'
+import { useColorMode } from '@vueuse/core'
+import { computed, ref } from 'vue'
 import { renderMarkdown } from './client-services/markdown'
 import { renderCodeHighlight } from './client-services/shiki'
 import { extendedRpcMap, rpc } from './rpc'

packages/devtools/client/composables/dev-auth.ts

@@ -1,5 +1,9 @@
+import { devtoolsUiShowNotification } from '#imports'
 import { until } from '@vueuse/core'
 import { UAParser } from 'ua-parser-js'
+import { ref } from 'vue'
+import { AuthConfirm } from './dialog'
+import { rpc } from './rpc'
 
 export const devAuthToken = ref<string | null>(localStorage.getItem('__nuxt_dev_token__'))
 

packages/devtools/client/composables/dialog.ts

@@ -1,4 +1,6 @@
 import type { InstallModuleReturn, ModuleActionType, ModuleStaticInfo } from '../../src/types'
+import { useState } from '#imports'
+import { createTemplatePromise } from '@vueuse/core'
 
 export const ModuleDialog = createTemplatePromise<boolean, [info: ModuleStaticInfo, result: InstallModuleReturn, type: ModuleActionType]>()
 

packages/devtools/client/composables/editor.ts

@@ -1,4 +1,10 @@
+import { useRouter } from '#app/composables/router'
+import { devtoolsUiShowNotification } from '#imports'
 import { useClipboard } from '@vueuse/core'
+import { rpc } from './rpc'
+import { useServerConfig, useVirtualFiles } from './state'
+import { useCurrentVirtualFile } from './state-routes'
+import { telemetry } from './telemetry'
 
 export function useOpenInEditor() {
   const config = useServerConfig()

packages/devtools/client/composables/npm.ts

@@ -1,5 +1,10 @@
 import type { NpmCommandOptions } from '../../src/types'
+import { useNuxtApp } from '#app/nuxt'
 import semver from 'semver'
+import { computed, ref } from 'vue'
+import { ensureDevAuthToken } from './dev-auth'
+import { rpc } from './rpc'
+import { useAsyncState } from './utils'
 
 export type PackageUpdateState = 'idle' | 'running' | 'updated'
 

packages/devtools/client/composables/rpc.ts

@@ -1,7 +1,9 @@
 import type { ClientFunctions, ServerFunctions } from '../../src/types'
+import { useDebounce } from '@vueuse/core'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'flatted'
 import { tryCreateHotContext } from 'vite-hot-client'
+import { ref } from 'vue'
 import { WS_EVENT_NAME } from '../../src/constant'
 
 export const wsConnecting = ref(false)

packages/devtools/client/composables/state-commands.ts

@@ -1,5 +1,8 @@
 import type { MaybeRefOrGetter } from 'vue'
+import { useRouter } from '#app/composables/router'
 import { randomStr } from '@antfu/utils'
+import { computed, onUnmounted, reactive, toValue } from 'vue'
+import { useEnabledTabs } from './state-tabs'
 
 export interface CommandItem {
   id: string

packages/devtools/client/composables/state-components.ts

@@ -1,4 +1,8 @@
 import type { Component } from 'nuxt/schema'
+import { computed } from 'vue'
+import { useClient } from './client'
+import { rpc } from './rpc'
+import { useAsyncState } from './utils'
 
 export function useComponents() {
   const client = useClient()

packages/devtools/client/composables/state-modules.ts

@@ -1,4 +1,8 @@
 import type { InstalledModuleInfo, ModuleStaticInfo } from '../../src/types'
+import { useState } from '#imports'
+import { computed } from 'vue'
+import { useServerConfig } from './state'
+import { getModuleNameFromPath, isNodeModulePath, parseReadablePath, useAsyncState } from './utils'
 
 const ignoredModules = [
   'pages',

packages/devtools/client/composables/state-routes.ts

@@ -1,4 +1,6 @@
 // virtual-files Tab
+import { useSessionState } from './utils'
+
 export function useCurrentVirtualFile() {
   return useSessionState<string>('virtual-files:current', '')
 }

packages/devtools/client/composables/state-schema.ts

@@ -1,3 +1,5 @@
+import { useSessionState } from './utils'
+
 export function useSchemaInput() {
   return useSessionState<{
     name?: string

packages/devtools/client/composables/state-subprocess.ts

@@ -1,4 +1,5 @@
 import type { AnalyzeBuildingState, InstallingModulestate } from '~/../src/types'
+import { ref } from 'vue'
 
 export const processInstallingModules = ref<InstallingModulestate[]>([])
 

packages/devtools/client/composables/state-tabs.ts

@@ -1,6 +1,11 @@
-import type { MaybeRef } from 'vue'
+import type { computed, ComputedRef, MaybeRef } from 'vue'
 import type { CategorizedTabs, ModuleBuiltinTab, ModuleCustomTab, RouteInfo, TabCategory } from '../../src/types'
+import { useRouter } from '#app/composables/router'
 import { objectPick } from '@antfu/utils'
+import { toValue, unref } from 'vue'
+import { useClientRouter } from './client'
+import { useCustomTabs, useServerPages } from './state'
+import { useDevToolsOptions } from './storage-options'
 
 export function useAllTabs() {
   const customTabs = useCustomTabs()

packages/devtools/client/composables/state.ts

@@ -1,6 +1,11 @@
 import type { Ref } from 'vue'
 import type { HookInfo, RouteInfo } from '../../src/types'
+import { useFetch } from '#app/composables/fetch'
 import { objectPick } from '@antfu/utils'
+import { computed } from 'vue'
+import { useClientRouter } from './client'
+import { rpc } from './rpc'
+import { useAsyncState } from './utils'
 
 export function useServerPages() {
   return useAsyncState('getServerPages', () => rpc.getServerPages())

packages/devtools/client/composables/storage-options.ts

@@ -1,7 +1,7 @@
 import type { ToRefs } from 'vue'
 import type { NuxtDevToolsOptions } from '../../types'
 import { watchDebounced } from '@vueuse/core'
-import { toRefs } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { defaultTabOptions } from '../../src/constant'
 import { rpc } from './rpc'
 

packages/devtools/client/composables/storage.ts

@@ -1,4 +1,6 @@
 import type { DevToolsFrameState } from '~~/../src/types'
+import { useLocalStorage, useWindowSize } from '@vueuse/core'
+import { computed } from 'vue'
 
 export const isFirstVisit = useLocalStorage('nuxt-devtools-first-visit', true)
 

packages/devtools/client/composables/telemetry.ts

@@ -1,3 +1,7 @@
+import { userAgentInfo } from './dev-auth'
+import { rpc } from './rpc'
+import { useDevToolsOptions } from './storage-options'
+
 export const telemetryEnabled = useDevToolsOptions('behavior').telemetry
 
 export function telemetry(event: string, payload?: object, immediate = false) {

packages/devtools/client/composables/utils.ts

@@ -2,7 +2,13 @@ import type { AsyncDataOptions } from '#app'
 import type { ComponentRelationship, ComponentWithRelationships, NormalizedHeadTag, SocialPreviewCard, SocialPreviewResolved } from '~/../src/types'
 import type { Component } from 'nuxt/schema'
 import type { Ref } from 'vue'
+import { useAsyncData } from '#app/composables/asyncData'
+import { useNuxtApp } from '#app/nuxt'
+import { useState } from '#imports'
+import { useSessionStorage } from '@vueuse/core'
 import { relative } from 'pathe'
+import { triggerRef } from 'vue'
+import { useClient } from './client'
 
 export function isNodeModulePath(path: string) {
   return !!path.match(/[/\\]node_modules[/\\]/) || isPackageName(path)

packages/devtools/client/middleware/route.global.ts

@@ -1,3 +1,4 @@
+import { defineNuxtRouteMiddleware, navigateTo } from '#imports'
 import { isFirstVisit } from '~/composables/storage'
 
 export default defineNuxtRouteMiddleware((to) => {

packages/devtools/client/nuxt.config.ts

@@ -24,63 +24,74 @@ export default defineNuxtConfig({
     'nuxt-eslint-auto-explicit-import',
   ],
 
-  ssr: false,
-
-  nitro: {
-    output: {
-      publicDir: resolver.resolve('../dist/client'),
+  // For dogfooding purposes
+  $development: {
+    appConfig: {
+      fixture2: 'from nuxt.config.ts',
     },
-    devStorage: {
-      test: {
-        driver: 'fs',
-        base: resolver.resolve('./.data/test'),
+
+    runtimeConfig: {
+      'fixture3': 'private runtime config from nuxt.config.ts',
+      'api-key': 'null',
+      'public': {
+        fixture4: 'public runtime config from nuxt.config.ts',
       },
     },
-    hooks: {
-      'prerender:routes': function (routes) {
-        // Disable prerendering as it's an SPA
-        routes.clear()
+
+    nitro: {
+      devStorage: {
+        test: {
+          driver: 'fs',
+          base: resolver.resolve('./.data/test'),
+        },
+      },
+      experimental: {
+        tasks: true,
+      },
+      scheduledTasks: {
+        '*/5 * * * *': ['collection:1', 'collection:2'],
+        '*/30 * * * *': ['ping'],
       },
     },
-    experimental: {
-      tasks: true,
-    },
-    scheduledTasks: {
-      '*/5 * * * *': ['collection:1', 'collection:2'],
-      '*/30 * * * *': ['ping'],
+  },
+
+  // Production Overrides
+  $production: {
+    app: {
+      // We set a placeholder for the middleware to be replaced with the correct base URL
+      baseURL: '/__NUXT_DEVTOOLS_BASE__/',
     },
   },
 
+  ssr: false,
+
+  app: {
+    baseURL: '/__nuxt_devtools__/client/',
+  },
+
   alias: {
     '@nuxt/devtools-kit/iframe-client': resolver.resolve('../../devtools-kit/src/runtime/iframe-client'),
     '@nuxt/devtools-kit/types': resolver.resolve('../../devtools-kit/src/types'),
     '@nuxt/devtools-kit': resolver.resolve('../../devtools-kit/src/index'),
   },
 
-  eslint: {
-    config: {
-      standalone: false,
-    },
+  experimental: {
+    watcher: 'parcel',
   },
 
-  appConfig: {
-    fixture2: 'from nuxt.config.ts',
-  },
+  compatibilityDate: '2024-07-22',
 
-  runtimeConfig: {
-    'fixture3': 'private runtime config from nuxt.config.ts',
-    'api-key': 'null',
-    'public': {
-      fixture4: 'public runtime config from nuxt.config.ts',
+  nitro: {
+    output: {
+      publicDir: resolver.resolve('../dist/client'),
     },
-  },
 
-  app: {
-    baseURL: '/__nuxt_devtools__/client/',
-  },
-
-  experimental: {
-    watcher: 'parcel',
+    hooks: {
+      'prerender:routes': function (routes) {
+        // Disable prerendering as it's an SPA
+        routes.clear()
+      },
+    },
   },
 
   vite: {
@@ -138,13 +149,12 @@ export default defineNuxtConfig({
     includeWorkspace: true,
   },
 
-  // Production Overrides
-  $production: {
-    app: {
-      // We set a placeholder for the middleware to be replaced with the correct base URL
-      baseURL: '/__NUXT_DEVTOOLS_BASE__/',
+  eslint: {
+    config: {
+      standalone: false,
+      nuxt: {
+        sortConfigKeys: true,
+      },
     },
   },
-
-  compatibilityDate: '2024-07-22',
 })

packages/devtools/client/plugins/global.ts

@@ -1,3 +1,8 @@
+import { defineNuxtPlugin, useRouter } from '#imports'
+import { triggerRef } from 'vue'
+import { useClient, useComponentInspectorData } from '../composables/client'
+import { rpc } from '../composables/rpc'
+
 export default defineNuxtPlugin(() => {
   const client = useClient()
   const inspectorData = useComponentInspectorData()

packages/devtools/client/plugins/vue-devtools.ts

@@ -1,3 +1,4 @@
+import { defineNuxtPlugin } from '#imports'
 import { VueDevToolsVuePlugin } from '@vue/devtools-core'
 
 export default defineNuxtPlugin((nuxtApp) => {

packages/devtools/client/setup/client-rpc.ts

@@ -1,4 +1,11 @@
 import type { ClientFunctions } from '../../src/types'
+import { useNuxtApp, useRouter } from '#imports'
+import { useClient } from '../composables/client'
+import { devAuthToken, isDevAuthed } from '../composables/dev-auth'
+import { clientFunctions, rpc } from '../composables/rpc'
+import { processAnalyzeBuildInfo, processInstallingModules } from '../composables/state-subprocess'
+import { useDevToolsOptions } from '../composables/storage-options'
+import { telemetry } from '../composables/telemetry'
 
 export function setupClientRPC() {
   const nuxt = useNuxtApp()

packages/devtools/client/setup/vue-devtools.ts

@@ -1,5 +1,7 @@
 import { functions, onRpcConnected, rpc } from '@vue/devtools-core'
 import { createRpcClient, toggleHighPerfMode } from '@vue/devtools-kit'
+import { watchEffect } from 'vue'
+import { useDevToolsFrameState } from '../composables/storage'
 
 export function setupVueDevTools() {
   const state = useDevToolsFrameState()