Lint: Add eslint import plugin (#5955)

## Summary

Adds the linter, turns on the recommended and a few extra rules, fixes
existing violations.

Doesn't prohibit `../../...` imports yet, that'll be it's own PR.

## Changes

- **What**: Consistent and fixable imports
- **Dependencies**: The plugin and parser

## Review Focus

How do you feel about the recommended rules?
What about the extra ones?
[Any
more](https://github.com/un-ts/eslint-plugin-import-x?tab=readme-ov-file#rules)
you'd want to turn on?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5955-Lint-Add-eslint-import-plugin-2856d73d3650819985c0fb9ca3fa94b0)
by [Unito](https://www.unito.io)

src/components/common/FormItem.vue

@@ -34,7 +34,8 @@ import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
 import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
-import { type Component, markRaw } from 'vue'
+import { markRaw } from 'vue'
+import type { Component } from 'vue'
 
 import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue'
 import CustomFormValue from '@/components/common/CustomFormValue.vue'

src/components/common/TreeExplorer.vue

@@ -47,9 +47,11 @@ import { useTreeFolderOperations } from '@/composables/tree/useTreeFolderOperati
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import {
   InjectKeyExpandedKeys,
-  InjectKeyHandleEditLabelFunction,
-  type RenderedTreeExplorerNode,
-  type TreeExplorerNode
+  InjectKeyHandleEditLabelFunction
+} from '@/types/treeExplorerTypes'
+import type {
+  RenderedTreeExplorerNode,
+  TreeExplorerNode
 } from '@/types/treeExplorerTypes'
 import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
 

src/components/common/TreeExplorerTreeNode.vue

@@ -45,10 +45,10 @@ import {
   usePragmaticDraggable,
   usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
-import {
-  InjectKeyHandleEditLabelFunction,
-  type RenderedTreeExplorerNode,
-  type TreeExplorerDragAndDropData
+import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
+import type {
+  RenderedTreeExplorerNode,
+  TreeExplorerDragAndDropData
 } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{

src/components/common/VirtualGrid.vue

@@ -17,7 +17,8 @@
 <script setup lang="ts" generic="T">
 import { useElementSize, useScroll, whenever } from '@vueuse/core'
 import { clamp, debounce } from 'es-toolkit/compat'
-import { type CSSProperties, computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
 
 type GridState = {
   start: number

src/components/dialog/content/ErrorDialogContent.vue

@@ -65,10 +65,8 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import {
-  type ErrorReportData,
-  generateErrorReport
-} from '@/utils/errorReportUtil'
+import { generateErrorReport } from '@/utils/errorReportUtil'
+import type { ErrorReportData } from '@/utils/errorReportUtil'
 
 const { error } = defineProps<{
   error: Omit<ErrorReportData, 'workflow' | 'systemStats' | 'serverLogs'> & {

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -33,9 +33,10 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import InputNumber, {
-  type InputNumberBlurEvent,
-  type InputNumberInputEvent
+import InputNumber from 'primevue/inputnumber'
+import type {
+  InputNumberBlurEvent,
+  InputNumberInputEvent
 } from 'primevue/inputnumber'
 import ProgressSpinner from 'primevue/progressspinner'
 import Tag from 'primevue/tag'

src/components/dialog/content/signin/SignInForm.vue

@@ -83,7 +83,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { type SignInData, signInSchema } from '@/schemas/signInSchema'
+import { signInSchema } from '@/schemas/signInSchema'
+import type { SignInData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const authStore = useFirebaseAuthStore()

src/components/dialog/content/signin/SignUpForm.vue

@@ -67,7 +67,8 @@ import Checkbox from 'primevue/checkbox'
 import InputText from 'primevue/inputtext'
 import { useI18n } from 'vue-i18n'
 
-import { type SignUpData, signUpSchema } from '@/schemas/signInSchema'
+import { signUpSchema } from '@/schemas/signInSchema'
+import type { SignUpData } from '@/schemas/signInSchema'
 
 import PasswordFields from './PasswordFields.vue'
 

src/components/graph/SelectionToolbox.vue

@@ -67,7 +67,8 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
-import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
+import { useCommandStore } from '@/stores/commandStore'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
 
 import FrameNodes from './selectionToolbox/FrameNodes.vue'
 import NodeOptionsButton from './selectionToolbox/NodeOptionsButton.vue'

src/components/graph/TitleEditor.vue

@@ -14,7 +14,8 @@
 
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
-import { type CSSProperties, computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'

src/components/graph/selectionToolbox/NodeOptions.vue

@@ -46,11 +46,13 @@ import {
   restoreMoreOptionsSignal
 } from '@/composables/canvas/useSelectionToolboxPosition'
 import {
-  type MenuOption,
-  type SubMenuOption,
   registerNodeOptionsInstance,
   useMoreOptionsMenu
 } from '@/composables/graph/useMoreOptionsMenu'
+import type {
+  MenuOption,
+  SubMenuOption
+} from '@/composables/graph/useMoreOptionsMenu'
 import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -130,14 +130,8 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import {
-  type CSSProperties,
-  type Component,
-  computed,
-  nextTick,
-  onMounted,
-  ref
-} from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'

src/components/input/MultiSelect.vue

@@ -105,7 +105,8 @@
 </template>
 
 <script setup lang="ts">
-import { type UseFuseOptions, useFuse } from '@vueuse/integrations/useFuse'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import Button from 'primevue/button'
 import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
 import MultiSelect from 'primevue/multiselect'

src/components/searchbox/NodeSearchItem.vue

@@ -56,8 +56,7 @@ import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
-import { highlightQuery } from '@/utils/formatUtil'
-import { formatNumberWithSuffix } from '@/utils/formatUtil'
+import { formatNumberWithSuffix, highlightQuery } from '@/utils/formatUtil'
 
 const settingStore = useSettingStore()
 const showCategory = computed(() =>

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -59,8 +59,7 @@ import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
 import { ResourceState, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
-import type { TreeNode } from '@/types/treeExplorerTypes'
-import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
 import { isElectron } from '@/utils/envUtil'
 import { buildTree } from '@/utils/treeUtil'
 

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -156,8 +156,7 @@ import type {
   GroupingStrategyId,
   SortingStrategyId
 } from '@/types/nodeOrganizationTypes'
-import type { TreeNode } from '@/types/treeExplorerTypes'
-import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -144,13 +144,12 @@ import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
+  ComfyWorkflow,
   useWorkflowBookmarkStore,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
-import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import type { TreeNode } from '@/types/treeExplorerTypes'
-import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
 import { appendJsonExt } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
 

src/components/sidebar/tabs/modelLibrary/DownloadItem.vue

@@ -67,10 +67,8 @@ import Chip from 'primevue/chip'
 import ProgressBar from 'primevue/progressbar'
 import { useI18n } from 'vue-i18n'
 
-import {
-  type ElectronDownload,
-  useElectronDownloadStore
-} from '@/stores/electronDownloadStore'
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import type { ElectronDownload } from '@/stores/electronDownloadStore'
 
 const { t } = useI18n()
 

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -34,11 +34,11 @@ import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import type { TreeNode } from '@/types/treeExplorerTypes'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerDragAndDropData,
-  TreeExplorerNode
+  TreeExplorerNode,
+  TreeNode
 } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{

src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue

@@ -11,10 +11,8 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import type { BookmarkCustomization } from '@/schemas/apiSchema'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import {
-  InjectKeyExpandedKeys,
-  type RenderedTreeExplorerNode
-} from '@/types/treeExplorerTypes'
+import { InjectKeyExpandedKeys } from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const { node } = defineProps<{
   node: RenderedTreeExplorerNode<ComfyNodeDefImpl>

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -81,7 +81,8 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
 import { useLitegraphService } from '@/services/litegraphService'
-import { TaskItemDisplayStatus, type TaskItemImpl } from '@/stores/queueStore'
+import { TaskItemDisplayStatus } from '@/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
 
 import ResultItem from './ResultItem.vue'
 

src/components/topbar/CommandMenubar.vue

@@ -73,10 +73,8 @@
 
 <script setup lang="ts">
 import type { MenuItem } from 'primevue/menuitem'
-import TieredMenu, {
-  type TieredMenuMethods,
-  type TieredMenuState
-} from 'primevue/tieredmenu'
+import TieredMenu from 'primevue/tieredmenu'
+import type { TieredMenuMethods, TieredMenuState } from 'primevue/tieredmenu'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 

src/components/topbar/WorkflowTabs.vue

@@ -84,8 +84,10 @@ import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
-import { useWorkflowBookmarkStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import {
+  useWorkflowBookmarkStore,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'

src/components/ui/slider/Slider.vue

@@ -8,7 +8,8 @@ import {
   SliderTrack,
   useForwardPropsEmits
 } from 'reka-ui'
-import { type HTMLAttributes, ref } from 'vue'
+import { ref } from 'vue'
+import type { HTMLAttributes } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'