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/renderer/extensions/vueNodes/components/InputSlot.vue

@@ -25,13 +25,8 @@
 </template>
 
 <script setup lang="ts">
-import {
-  type ComponentPublicInstance,
-  computed,
-  onErrorCaptured,
-  ref,
-  watchEffect
-} from 'vue'
+import { computed, onErrorCaptured, ref, watchEffect } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'

src/renderer/extensions/vueNodes/components/NodeSlots.test.ts

@@ -1,12 +1,15 @@
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import { describe, expect, it } from 'vitest'
-import { type PropType, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { INodeOutputSlot } from '@/lib/litegraph/src/interfaces'
-import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot
+} from '@/lib/litegraph/src/interfaces'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import NodeSlots from './NodeSlots.vue'

src/renderer/extensions/vueNodes/components/OutputSlot.vue

@@ -22,13 +22,8 @@
 </template>
 
 <script setup lang="ts">
-import {
-  type ComponentPublicInstance,
-  computed,
-  onErrorCaptured,
-  ref,
-  watchEffect
-} from 'vue'
+import { computed, onErrorCaptured, ref, watchEffect } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'

src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
 
-import { type ClassValue, cn } from '@/utils/tailwindUtil'
+import { cn } from '@/utils/tailwindUtil'
+import type { ClassValue } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
   color?: string

src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts

@@ -1,4 +1,5 @@
-import { type MaybeRefOrGetter, computed, onUnmounted, ref, toValue } from 'vue'
+import { computed, onUnmounted, ref, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 import { isMiddlePointerInput } from '@/base/pointerUtils'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'

src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts

@@ -2,7 +2,8 @@ import type {
   TooltipDirectivePassThroughOptions,
   TooltipPassThroughMethodOptions
 } from 'primevue/tooltip'
-import { type MaybeRef, computed, ref, unref } from 'vue'
+import { computed, ref, unref } from 'vue'
+import type { MaybeRef } from 'vue'
 
 import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
 import { st } from '@/i18n'

src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts

@@ -5,7 +5,8 @@
  * positions in a single batched pass, and caches offsets so that node moves
  * update slot positions without DOM reads.
  */
-import { type Ref, onMounted, onUnmounted, watch } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
+import type { Ref } from 'vue'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'

src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts

@@ -1,4 +1,5 @@
-import { type Fn, useEventListener } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
+import type { Fn } from '@vueuse/core'
 import { onBeforeUnmount } from 'vue'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
@@ -14,10 +15,8 @@ import type {
 import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
 import { createLinkConnectorAdapter } from '@/renderer/core/canvas/links/linkConnectorAdapter'
 import type { LinkConnectorAdapter } from '@/renderer/core/canvas/links/linkConnectorAdapter'
-import {
-  type SlotDropCandidate,
-  useSlotLinkDragState
-} from '@/renderer/core/canvas/links/slotLinkDragState'
+import { useSlotLinkDragState } from '@/renderer/core/canvas/links/slotLinkDragState'
+import type { SlotDropCandidate } from '@/renderer/core/canvas/links/slotLinkDragState'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { Point } from '@/renderer/core/layout/types'

src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts

@@ -8,13 +8,8 @@
  * Supports different element types (nodes, slots, widgets, etc.) with
  * customizable data attributes and update handlers.
  */
-import {
-  type MaybeRefOrGetter,
-  getCurrentInstance,
-  onMounted,
-  onUnmounted,
-  toValue
-} from 'vue'
+import { getCurrentInstance, onMounted, onUnmounted, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'

src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts

@@ -1,5 +1,6 @@
 import { storeToRefs } from 'pinia'
-import { type MaybeRefOrGetter, computed, toValue } from 'vue'
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 import { useExecutionStore } from '@/stores/executionStore'
 

src/renderer/extensions/vueNodes/layout/useNodeLayout.ts

@@ -1,18 +1,13 @@
 import { storeToRefs } from 'pinia'
-import {
-  type CSSProperties,
-  type MaybeRefOrGetter,
-  computed,
-  inject,
-  ref,
-  toValue
-} from 'vue'
+import { computed, inject, ref, toValue } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter } from 'vue'
 
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { LayoutSource, type Point } from '@/renderer/core/layout/types'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import type { Point } from '@/renderer/core/layout/types'
 
 /**
  * Composable for individual Vue node components

src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts

@@ -1,5 +1,6 @@
 import { storeToRefs } from 'pinia'
-import { type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue'
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'

src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue

@@ -27,12 +27,8 @@ import ColorPicker from 'primevue/colorpicker'
 import { computed, ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import {
-  type ColorFormat,
-  type HSB,
-  isColorFormat,
-  toHexFromFormat
-} from '@/utils/colorUtil'
+import { isColorFormat, toHexFromFormat } from '@/utils/colorUtil'
+import type { ColorFormat, HSB } from '@/utils/colorUtil'
 import { cn } from '@/utils/tailwindUtil'
 import {
   PANEL_EXCLUDED_PROPS,

src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts

@@ -7,10 +7,8 @@ import { createI18n } from 'vue-i18n'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import WidgetGalleria, {
-  type GalleryImage,
-  type GalleryValue
-} from './WidgetGalleria.vue'
+import WidgetGalleria from './WidgetGalleria.vue'
+import type { GalleryImage, GalleryValue } from './WidgetGalleria.vue'
 
 const i18n = createI18n({
   legacy: false,

src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts

@@ -5,9 +5,8 @@ import { describe, expect, it } from 'vitest'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import WidgetImageCompare, {
-  type ImageCompareValue
-} from './WidgetImageCompare.vue'
+import WidgetImageCompare from './WidgetImageCompare.vue'
+import type { ImageCompareValue } from './WidgetImageCompare.vue'
 
 describe('WidgetImageCompare Display', () => {
   const createMockWidget = (

src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue

@@ -18,10 +18,8 @@
 import { computed } from 'vue'
 
 import type { ResultItemType } from '@/schemas/apiSchema'
-import {
-  type ComboInputSpec,
-  isComboInputSpec
-} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import type { AssetKind } from '@/types/widgetTypes'
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -16,11 +16,11 @@ import {
 } from '@/utils/widgetPropFilter'
 
 import FormDropdown from './form/dropdown/FormDropdown.vue'
-import {
-  AssetKindKey,
-  type DropdownItem,
-  type FilterOption,
-  type SelectedKey
+import { AssetKindKey } from './form/dropdown/types'
+import type {
+  DropdownItem,
+  FilterOption,
+  SelectedKey
 } from './form/dropdown/types'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 

src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.test.ts

@@ -6,7 +6,8 @@ import { describe, expect, it, vi } from 'vitest'
 
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 
-import WidgetTreeSelect, { type TreeNode } from './WidgetTreeSelect.vue'
+import WidgetTreeSelect from './WidgetTreeSelect.vue'
+import type { TreeNode } from './WidgetTreeSelect.vue'
 
 const createTreeData = (): TreeNode[] => [
   {

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -4,7 +4,8 @@ import { computed, inject, ref } from 'vue'
 import LazyImage from '@/components/common/LazyImage.vue'
 import { cn } from '@/utils/tailwindUtil'
 
-import { AssetKindKey, type LayoutMode } from './types'
+import { AssetKindKey } from './types'
+import type { LayoutMode } from './types'
 
 interface Props {
   index: number

src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts

@@ -1,8 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import {
-  type InputSpec,
-  isBooleanInputSpec
-} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { isBooleanInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 export const useBooleanWidget = () => {

src/renderer/extensions/vueNodes/widgets/composables/useChartWidget.ts

@@ -1,9 +1,9 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IChartWidget } from '@/lib/litegraph/src/types/widgets'
-import {
-  type ChartInputSpec,
-  type InputSpec as InputSpecV2,
-  isChartInputSpec
+import { isChartInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type {
+  ChartInputSpec,
+  InputSpec as InputSpecV2
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 

src/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget.ts

@@ -3,11 +3,8 @@ import { ref } from 'vue'
 import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import {
-  ComponentWidgetImpl,
-  type ComponentWidgetStandardProps,
-  addWidget
-} from '@/scripts/domWidget'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import type { ComponentWidgetStandardProps } from '@/scripts/domWidget'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 type ChatHistoryCustomProps = Omit<

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

@@ -13,20 +13,15 @@ import {
 import { assetService } from '@/platform/assets/services/assetService'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
-import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import {
-  type InputSpec,
-  isComboInputSpec
+import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type {
+  ComboInputSpec,
+  InputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import {
-  type BaseDOMWidget,
-  ComponentWidgetImpl,
-  addWidget
-} from '@/scripts/domWidget'
-import {
-  type ComfyWidgetConstructorV2,
-  addValueControlWidgets
-} from '@/scripts/widgets'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import type { BaseDOMWidget } from '@/scripts/domWidget'
+import { addValueControlWidgets } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 import { useRemoteWidget } from './useRemoteWidget'
 

src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts

@@ -3,10 +3,8 @@ import { clamp } from 'es-toolkit/compat'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import {
-  type InputSpec,
-  isFloatInputSpec
-} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { isFloatInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 function onFloatValueChange(this: INumericWidget, v: number) {

src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts

@@ -1,9 +1,5 @@
-import {
-  BaseWidget,
-  type CanvasPointer,
-  type LGraphNode,
-  LiteGraph
-} from '@/lib/litegraph/src/litegraph'
+import { BaseWidget, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { CanvasPointer, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type {
   IBaseWidget,
   IWidgetOptions

src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts

@@ -2,14 +2,10 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
-import {
-  type InputSpec,
-  isIntInputSpec
-} from '@/schemas/nodeDef/nodeDefSchemaV2'
-import {
-  type ComfyWidgetConstructorV2,
-  addValueControlWidget
-} from '@/scripts/widgets'
+import { isIntInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { addValueControlWidget } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 function onValueChange(this: INumericWidget, v: number) {
   // For integers, always round to the nearest step

src/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget.ts

@@ -3,11 +3,8 @@ import { ref } from 'vue'
 import TextPreviewWidget from '@/components/graph/widgets/TextPreviewWidget.vue'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import {
-  ComponentWidgetImpl,
-  type ComponentWidgetStandardProps,
-  addWidget
-} from '@/scripts/domWidget'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import type { ComponentWidgetStandardProps } from '@/scripts/domWidget'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 type TextPreviewCustomProps = Omit<

src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts

@@ -1,8 +1,7 @@
 import axios from 'axios'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IWidget } from '@/lib/litegraph/src/litegraph'
+import type { IWidget, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 import { api } from '@/scripts/api'
 

src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts

@@ -1,9 +1,7 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import {
-  type InputSpec,
-  isStringInputSpec
-} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { isStringInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'