Devex: Faster linting (#5611)

* devex: Keep the presubmit from wiping the lint cache * devex: typescript for eslint config * devex: upgrade lint plugins and dedupe lockfile * lint: Fix autofixable rules with updated vue linter * lint: Remove default for required prop * lint: temporarily disable warnings for missing defaults * deps: Update vue-tsc * lint: use the config convenience utility, switch to using projectService * lint: Fix redundant eslint config blocks and misplaced parser * lint: Split up parsing options for typescript vs vue files
2026-01-26 19:09:52 +00:00 · 2025-09-16 19:23:03 -07:00
parent 6a01b08ebf
commit 6b59f839e0
22 changed files with 391 additions and 574 deletions
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -5,13 +5,14 @@ import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
+import { defineConfig } from 'eslint/config'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'

-export default [
-  {
-    files: ['src/**/*.{js,mjs,cjs,ts,vue}']
-  },
+const extraFileExtensions = ['.vue']
+
+export default defineConfig([
  {
    ignores: [
      'src/scripts/*',
@@ -24,35 +25,49 @@ export default [
    ]
  },
  {
+    files: ['./**/*.{ts,mts}'],
    languageOptions: {
      globals: {
        ...globals.browser,
        __COMFYUI_FRONTEND_VERSION__: 'readonly'
      },
-      parser: tseslint.parser,
      parserOptions: {
-        project: ['./tsconfig.json', './tsconfig.eslint.json'],
+        parser: tseslint.parser,
+        projectService: true,
+        tsConfigRootDir: import.meta.dirname,
        ecmaVersion: 2020,
        sourceType: 'module',
-        extraFileExtensions: ['.vue']
+        extraFileExtensions
+      }
+    }
+  },
+  {
+    files: ['./**/*.vue'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __COMFYUI_FRONTEND_VERSION__: 'readonly'
+      },
+      parser: vueParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        projectService: true,
+        tsConfigRootDir: import.meta.dirname,
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions
      }
    }
  },
  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/recommended'],
+  tseslint.configs.recommended,
+  pluginVue.configs['flat/recommended'],
  eslintPluginPrettierRecommended,
-  {
-    files: ['src/**/*.vue'],
-    languageOptions: {
-      parserOptions: {
-        parser: tseslint.parser
-      }
-    }
-  },
+  storybook.configs['flat/recommended'],
  {
    plugins: {
      'unused-imports': unusedImports,
+      // @ts-expect-error Bad types in the plugin
      '@intlify/vue-i18n': pluginI18n
    },
    rules: {
@@ -67,6 +82,7 @@ export default [
      'vue/multi-word-component-names': 'off', // TODO: fix
      'vue/no-template-shadow': 'off', // TODO: fix
      'vue/one-component-per-file': 'off', // TODO: fix
+      'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
      // Restrict deprecated PrimeVue components
      'no-restricted-imports': [
        'error',
@@ -135,6 +151,5 @@ export default [
        }
      ]
    }
-  },
-  ...storybook.configs['flat/recommended']
-]
+  }
+])
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -3,13 +3,13 @@ export default {

  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
    ...formatAndEslint(stagedFiles),
-    'vue-tsc --noEmit'
+    'pnpm typecheck'
  ]
 }

 function formatAndEslint(fileNames) {
  return [
-    `eslint --fix ${fileNames.join(' ')}`,
-    `prettier --write ${fileNames.join(' ')}`
+    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
+    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
  ]
 }
--- a/package.json
+++ b/package.json
@@ -38,10 +38,10 @@
    "build-storybook": "storybook build"
  },
  "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.35.0",
    "@iconify-json/lucide": "^1.2.66",
    "@iconify/tailwind": "^1.2.0",
-    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
    "@lobehub/i18n-cli": "^1.25.1",
    "@nx/eslint": "21.4.1",
    "@nx/playwright": "21.4.1",
@@ -64,11 +64,11 @@
    "@vitest/ui": "^3.0.0",
    "@vue/test-utils": "^2.4.6",
    "eslint": "^9.34.0",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
-    "eslint-plugin-storybook": "^9.1.1",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-storybook": "^9.1.6",
+    "eslint-plugin-unused-imports": "^4.2.0",
+    "eslint-plugin-vue": "^10.4.0",
    "fs-extra": "^11.2.0",
    "globals": "^15.9.0",
    "happy-dom": "^15.11.0",
@@ -79,13 +79,13 @@
    "lint-staged": "^15.2.7",
    "nx": "21.4.1",
    "prettier": "^3.3.2",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.6",
    "tailwindcss": "^4.1.12",
    "tailwindcss-primeui": "^0.6.1",
    "tsx": "^4.15.6",
    "tw-animate-css": "^1.3.8",
    "typescript": "^5.4.5",
-    "typescript-eslint": "^8.42.0",
+    "typescript-eslint": "^8.44.0",
    "unplugin-icons": "^0.22.0",
    "unplugin-vue-components": "^0.28.0",
    "uuid": "^11.1.0",
@@ -94,7 +94,8 @@
    "vite-plugin-html": "^3.2.2",
    "vite-plugin-vue-devtools": "^7.7.6",
    "vitest": "^3.2.4",
-    "vue-tsc": "^2.1.10",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.7",
    "zip-dir": "^2.0.0",
    "zod-to-json-schema": "^3.24.1"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -46,7 +46,7 @@ const hasSelection = ref(false)
 const isHovered = useElementHover(rootEl)

 const terminalData = useTerminal(terminalEl)
-emit('created', terminalData, rootEl)
+emit('created', terminalData, ref(rootEl))

 const { terminal } = terminalData
 let selectionDisposable: IDisposable | undefined
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -7,7 +7,7 @@
    <InputText
      v-else
      ref="inputRef"
-      v-model:modelValue="inputValue"
+      v-model:model-value="inputValue"
      v-focus
      type="text"
      size="small"
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -21,7 +21,7 @@
      <component
        :is="markRaw(getFormComponent(props.item))"
        :id="props.id"
-        v-model:modelValue="formValue"
+        v-model:model-value="formValue"
        :aria-labelledby="`${props.id}-label`"
        v-bind="getFormAttrs(props.item)"
      />
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,7 +1,7 @@
 <template>
  <Tree
-    v-model:expandedKeys="expandedKeys"
-    v-model:selectionKeys="selectionKeys"
+    v-model:expanded-keys="expandedKeys"
+    v-model:selection-keys="selectionKeys"
    class="tree-explorer py-0 px-2 2xl:px-4"
    :class="props.class"
    :value="renderedRoot.children"
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -16,7 +16,7 @@
    <div class="flex flex-1 relative overflow-hidden">
      <ManagerNavSidebar
        v-if="isSideNavOpen"
-        v-model:selectedTab="selectedTab"
+        v-model:selected-tab="selectedTab"
        :tabs="tabs"
      />
      <div
@@ -57,9 +57,9 @@
            </IconButton>
          </div>
          <RegistrySearchBar
-            v-model:searchQuery="searchQuery"
-            v-model:searchMode="searchMode"
-            v-model:sortField="sortField"
+            v-model:search-query="searchQuery"
+            v-model:search-mode="searchMode"
+            v-model:sort-field="sortField"
            :search-results="searchResults"
            :suggestions="suggestions"
            :is-missing-tab="isMissingTab"
--- a/src/components/dialog/content/manager/infoPanel/MetadataRow.vue
+++ b/src/components/dialog/content/manager/infoPanel/MetadataRow.vue
@@ -8,7 +8,7 @@
 </template>

 <script setup lang="ts">
-const { value = 'N/A', label = 'N/A' } = defineProps<{
+const { value = 'N/A', label } = defineProps<{
  label: string
  value?: string | number
 }>()
--- a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
@@ -41,12 +41,12 @@
    <div class="flex mt-3 text-sm">
      <div class="flex gap-6 ml-1">
        <SearchFilterDropdown
-          v-model:modelValue="searchMode"
+          v-model:model-value="searchMode"
          :options="filterOptions"
          :label="$t('g.filter')"
        />
        <SearchFilterDropdown
-          v-model:modelValue="sortField"
+          v-model:model-value="sortField"
          :options="availableSortOptions"
          :label="$t('g.sort')"
        />
--- a/src/components/dialog/header/ManagerProgressHeader.vue
+++ b/src/components/dialog/header/ManagerProgressHeader.vue
@@ -4,7 +4,7 @@
    class="px-4 py-2 flex items-center"
  >
    <TabMenu
-      v-model:activeIndex="activeTabIndex"
+      v-model:active-index="activeTabIndex"
      :model="tabs"
      class="w-full border-none"
      :pt="{
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -59,7 +59,7 @@ import ResponseBlurb from '@/components/graph/widgets/chatHistory/ResponseBlurb.
 import { ComponentWidget } from '@/scripts/domWidget'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'

-const { widget, history = '[]' } = defineProps<{
+const { widget, history } = defineProps<{
  widget?: ComponentWidget<string>
  history: string
 }>()
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -21,7 +21,7 @@
    </template>
    <template #header>
      <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="searchQuery"
        class="model-lib-search-box p-2 2xl:p-4"
        :placeholder="$t('g.searchModels') + '...'"
        @search="handleSearch"
@@ -31,7 +31,7 @@
      <ElectronDownloadItems v-if="isElectron()" />

      <TreeExplorer
-        v-model:expandedKeys="expandedKeys"
+        v-model:expanded-keys="expandedKeys"
        class="model-lib-tree-explorer"
        :root="renderedRoot"
      >
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -78,7 +78,7 @@
      <template #header>
        <div>
          <SearchBox
-            v-model:modelValue="searchQuery"
+            v-model:model-value="searchQuery"
            class="node-lib-search-box p-2 2xl:p-4"
            :placeholder="$t('g.searchNodes') + '...'"
            filter-icon="pi pi-filter"
@@ -106,7 +106,7 @@
            class="m-2"
          />
          <TreeExplorer
-            v-model:expandedKeys="expandedKeys"
+            v-model:expanded-keys="expandedKeys"
            class="node-lib-tree-explorer"
            :root="renderedRoot"
          >
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -86,7 +86,7 @@
  <ConfirmPopup />
  <ContextMenu ref="menu" :model="menuItems" />
  <ResultGallery
-    v-model:activeIndex="galleryActiveIndex"
+    v-model:active-index="galleryActiveIndex"
    :all-gallery-items="allGalleryItems"
  />
 </template>
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -14,7 +14,7 @@
    </template>
    <template #header>
      <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="searchQuery"
        class="workflows-search-box p-2 2xl:p-4"
        :placeholder="$t('g.searchWorkflows') + '...'"
        @search="handleSearch"
@@ -32,7 +32,7 @@
            class="ml-2"
          />
          <TreeExplorer
-            v-model:expandedKeys="dummyExpandedKeys"
+            v-model:expanded-keys="dummyExpandedKeys"
            :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
            :selection-keys="selectionKeys"
          >
@@ -74,7 +74,7 @@
            class="ml-2"
          />
          <TreeExplorer
-            v-model:expandedKeys="dummyExpandedKeys"
+            v-model:expanded-keys="dummyExpandedKeys"
            :root="
              renderTreeNode(
                bookmarkedWorkflowsTree,
@@ -96,7 +96,7 @@
          />
          <TreeExplorer
            v-if="workflowStore.persistedWorkflows.length > 0"
-            v-model:expandedKeys="expandedKeys"
+            v-model:expanded-keys="expandedKeys"
            :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
            :selection-keys="selectionKeys"
          >
@@ -114,7 +114,7 @@
      </div>
      <div v-else class="comfyui-workflows-search-panel">
        <TreeExplorer
-          v-model:expandedKeys="expandedKeys"
+          v-model:expanded-keys="expandedKeys"
          :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
        >
          <template #node="{ node }">
--- a/src/platform/settings/components/ServerConfigPanel.vue
+++ b/src/platform/settings/components/ServerConfigPanel.vue
@@ -54,7 +54,7 @@
      <div v-for="item in items" :key="item.name" class="mb-4">
        <FormItem
          :id="item.id"
-          v-model:formValue="item.value"
+          v-model:form-value="item.value"
          :item="translateItem(item)"
          :label-class="{
            'text-highlight': item.initialValue !== item.value
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -2,7 +2,7 @@
  <div class="settings-container">
    <ScrollPanel class="settings-sidebar shrink-0 p-2 w-48 2xl:w-64">
      <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="searchQuery"
        class="settings-search-box w-full mb-2"
        :placeholder="$t('g.searchSettings') + '...'"
        :debounce-time="128"
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-col gap-1">
    <Galleria
-      v-model:activeIndex="activeIndex"
+      v-model:active-index="activeIndex"
      :value="galleryImages"
      v-bind="filteredProps"
      :show-thumbnails="showThumbnails"
--- a/src/views/InstallView.vue
+++ b/src/views/InstallView.vue
@@ -37,8 +37,8 @@
        </StepPanel>
        <StepPanel v-slot="{ activateCallback }" value="1">
          <InstallLocationPicker
-            v-model:installPath="installPath"
-            v-model:pathError="pathError"
+            v-model:install-path="installPath"
+            v-model:path-error="pathError"
          />
          <div class="flex pt-6 justify-between">
            <Button
@@ -58,8 +58,8 @@
        </StepPanel>
        <StepPanel v-slot="{ activateCallback }" value="2">
          <MigrationPicker
-            v-model:sourcePath="migrationSourcePath"
-            v-model:migrationItemIds="migrationItemIds"
+            v-model:source-path="migrationSourcePath"
+            v-model:migration-item-ids="migrationItemIds"
          />
          <div class="flex pt-6 justify-between">
            <Button
@@ -78,13 +78,13 @@
        </StepPanel>
        <StepPanel v-slot="{ activateCallback }" value="3">
          <DesktopSettingsConfiguration
-            v-model:autoUpdate="autoUpdate"
-            v-model:allowMetrics="allowMetrics"
+            v-model:auto-update="autoUpdate"
+            v-model:allow-metrics="allowMetrics"
          />
          <MirrorsConfiguration
-            v-model:pythonMirror="pythonMirror"
-            v-model:pypiMirror="pypiMirror"
-            v-model:torchMirror="torchMirror"
+            v-model:python-mirror="pythonMirror"
+            v-model:pypi-mirror="pypiMirror"
+            v-model:torch-mirror="torchMirror"
            :device="device"
            class="mt-6"
          />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,6 +33,7 @@
    "src/types/**/*.d.ts",
    "tests-ui/**/*",
    "global.d.ts",
+    "eslint.config.ts",
    "vite.config.mts",
    ".storybook/**/*"
  ]