FSR-64: bump @knime/eslint-config version to 9.0.0

Robin Offel · jschroeter · commit ec2a3ac1ef8a · 2025-03-18T10:55:10.000+01:00
FSR-64 (Update to Eslint 9)
diff --git a/.changeset/sweet-mayflies-bow.md b/.changeset/sweet-mayflies-bow.md
diff --git a/eslint.config.js b/eslint.config.js
@@ -18,4 +18,10 @@ export default [
       },
     },
   },
+  {
+    files: ["packages/lint/**/*.js"],
+    rules: {
+      "no-magic-numbers": "off",
+    },
+  },
 ];
diff --git a/packages/components/src/components/forms/NumberInput/NumberInput.vue b/packages/components/src/components/forms/NumberInput/NumberInput.vue
@@ -204,7 +204,7 @@ export default {
 
       /** Mimic stepping to nearest step with safe value rounding */
       let parsedVal = value + increment;
-      parsedVal = Math.round(parsedVal * 10) / 10; // eslint-disable-line no-magic-numbers
+      parsedVal = Math.round(parsedVal * 10) / 10;
 
       /**
        * All measures have been taken to ensure a valid value at this point, so if the last
diff --git a/packages/components/src/components/forms/SearchInput/SearchInput.vue b/packages/components/src/components/forms/SearchInput/SearchInput.vue
@@ -99,6 +99,7 @@ export default {
     "toggle-inverse-search",
     "focus",
   ],
+  expose: ["focus"],
   data() {
     return {
       caseSensitiveSearch: this.initialCaseSensitiveSearch,
@@ -119,7 +120,6 @@ export default {
       return { ...defaultTooltips, ...this.tooltips };
     },
   },
-  expose: ["focus"],
   async mounted() {
     if (this.focusOnMount) {
       await nextTick();
diff --git a/packages/components/src/components/forms/TimePartInput/TimePartInput.vue b/packages/components/src/components/forms/TimePartInput/TimePartInput.vue
@@ -152,7 +152,6 @@ export default {
       if (isNaN(value) || (!value && value !== 0) || value < 0) {
         return value;
       }
-      // eslint-disable-next-line no-magic-numbers
       const strValue = value.toString(10);
       return this.minDigits < 1
         ? strValue
@@ -175,7 +174,6 @@ export default {
         this.localValue = "";
       } else {
         // use parsed value and convert back to string to remove leading zeros etc.
-        // eslint-disable-next-line no-magic-numbers
         const inputLength = inputNum.toString(10).length;
         // skip empty values (they become NaN which is 3 long)
         if (rawValue === "") {
@@ -235,7 +233,7 @@ export default {
 
       /** Mimic stepping to nearest step with safe value rounding */
       let parsedVal = value + increment;
-      parsedVal = Math.round(parsedVal * 10) / 10; // eslint-disable-line no-magic-numbers
+      parsedVal = Math.round(parsedVal * 10) / 10;
 
       /**
        * All measures have been taken to ensure a valid value at this point, so if the last
diff --git a/packages/components/src/components/node/NodePreview.vue b/packages/components/src/components/node/NodePreview.vue
@@ -85,14 +85,12 @@ export default {
       const portSize = 9;
       const bgSize = 32;
 
-      /* eslint-disable no-magic-numbers */
       let spacing = 1;
       if (total === 2) {
         spacing = 12;
       } else if (total === 3) {
         spacing = 1.5;
       }
-      /* eslint-enable no-magic-numbers */
 
       const totalHeight = total * portSize + (total - 1) * spacing;
       const delta = (bgSize - totalHeight) / 2;
diff --git a/packages/components/src/components/node/PortIcon.vue b/packages/components/src/components/node/PortIcon.vue
@@ -49,10 +49,8 @@ export default {
       ];
 
       // y and d are chosen so the triangle (including strokeWidth) fits precisely in the 9x9 port
-      /* eslint-disable no-magic-numbers */
       const d = Math.sqrt(5) / 2;
       const y = d / 2 + 1 / 4;
-      /* eslint-enable no-magic-numbers */
 
       // move points towards the center of the triangle according to strokeWidth
       const { strokeWidth } = this;
diff --git a/packages/hub-features/src/components/versions/ManageVersions.vue b/packages/hub-features/src/components/versions/ManageVersions.vue
@@ -42,7 +42,6 @@ const labelsEventBus = useEventBus("versionLabels");
 
 const closeLabelPopovers = throttle(() => {
   labelsEventBus.emit("versionLabelShowPopover");
-  // eslint-disable-next-line no-magic-numbers
 }, 10000); // Arbitrary delay to reduce overhead, is automatically reset @scrollend
 </script>
 
diff --git a/packages/hub-features/src/useFileUpload/useFileUpload.ts b/packages/hub-features/src/useFileUpload/useFileUpload.ts
@@ -277,7 +277,6 @@ export const useFileUpload = (options: UseFileUploadOptions = {}) => {
         const uploadPayload = await promise.retryPromise({
           fn: () => prepareUpload(parentId, enqueableFiles),
           excludeError: (error: FetchError) =>
-            // eslint-disable-next-line no-magic-numbers
             Boolean(error.statusCode && error.statusCode < 500),
           retryDelayMS: DEFAULT_RETRY_DELAY_MS,
         });
diff --git a/packages/jsonforms/src/uiComponents/__tests__/IntegerControl.test.ts b/packages/jsonforms/src/uiComponents/__tests__/IntegerControl.test.ts
@@ -62,8 +62,7 @@ describe("IntegerControl.vue", () => {
   });
 
   it("renders", () => {
-    // @ts-expect-error Property 'exists' does not exist on type
-    expect(wrapper.getComponent(NumberInput).exists()).toBe(true);
+    expect(wrapper.findComponent(NumberInput).exists()).toBe(true);
   });
 
   it("sets labelForId", () => {
diff --git a/packages/jsonforms/src/uiComponents/__tests__/NumberControl.test.ts b/packages/jsonforms/src/uiComponents/__tests__/NumberControl.test.ts
@@ -66,8 +66,7 @@ describe("NumberControl.vue", () => {
   });
 
   it("renders", () => {
-    // @ts-expect-error Property 'exists' does not exist on type
-    expect(wrapper.getComponent(NumberInput).exists()).toBe(true);
+    expect(wrapper.findComponent(NumberInput).exists()).toBe(true);
   });
 
   it("sets labelForId", () => {
diff --git a/packages/jsonforms/src/uiComponents/__tests__/OneOfDropdown.test.ts b/packages/jsonforms/src/uiComponents/__tests__/OneOfDropdown.test.ts
@@ -59,8 +59,7 @@ describe("OneOfDropdown.vue", () => {
   });
 
   it("renders", () => {
-    // @ts-expect-error Property 'exists' does not exist on type
-    expect(wrapper.getComponent(Dropdown).exists()).toBe(true);
+    expect(wrapper.findComponent(Dropdown).exists()).toBe(true);
   });
 
   it("computed dropdown options from oneof options", async () => {
diff --git a/packages/jsonforms/src/utils/localTimeUtils.ts b/packages/jsonforms/src/utils/localTimeUtils.ts
@@ -33,7 +33,7 @@ export const fromString = (value: string): Date => {
     ];
 
     for (const format of otherFormats) {
-      const parsed = parse(value, format, new Date(1970, 0, 1)); // eslint-disable-line no-magic-numbers
+      const parsed = parse(value, format, new Date(1970, 0, 1));
       if (!isNaN(parsed.getTime())) {
         return parsed;
       }
diff --git a/packages/licenses/src/collect-packages.js b/packages/licenses/src/collect-packages.js
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 /* eslint-disable no-console */
-/* eslint-disable import/extensions */
+
 import fs from "node:fs";
 import { readFile } from "node:fs/promises";
 import path from "path";
diff --git a/packages/lint/CHANGELOG.md b/packages/lint/CHANGELOG.md
@@ -1,5 +1,50 @@
 # @knime/eslint-config
 
+## 9.0.0
+
+### Major Changes
+
+- 649f9b6: update to eslint 9 and migrate eslint configs to flat config format
+
+  - upgrade to eslint 9
+  - update dependencies
+  - migrate eslint configs to flat config and add names to each config object
+  - use `eslint-plugin-import-x` instead of `eslint-plugin-import` (compatibility with nuxt3 ruleset)
+  - remove configs for jest, vue2, nuxt2 and the legacy config
+  - add `vue3-typescript-strict` config which enforces components to be written in TypeScript
+
+  Using this version will require you to also update to eslint 9.x.x and use the flat config format and write the configs as es modules.
+  Extending a config form `@knime/eslint-config` looks something like this then:
+
+  ```js
+  import config from "@knime/eslint-config/<config>.js";
+
+  export default [
+    ...config,
+    {
+      // additional config
+    },
+    // additional configs
+  ];
+  ```
+
+  If you need to extend the files covered with the base config you will need to do it like this:
+
+  ```js
+  ...config.map((conf) => {
+      if (conf.name?.includes("@knime/eslint-config/<config>")) {
+        return {
+          ...conf,
+          files: [...conf.files, "*.ts", "*.tsx", "*.mts", "*.cts", "*.vue"],
+        };
+      }
+      return conf;
+    })
+  ```
+
+  All config objects we export have a name, so should any other configs need adjustment afterwards they can be found through the name and then be adjusted.
+  The config objects are generally named after the config file with the "@knime/eslint-config/" prefix. Exceptions for this are the nuxt and vue-typescript configs as they use special helper functions to assemble the config that we couldn't pass a name to.
+
 ## 8.3.0
 
 ### Minor Changes
diff --git a/packages/lint/package.json b/packages/lint/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@knime/eslint-config",
-  "version": "8.3.0",
+  "version": "9.0.0",
   "description": "ESLint/Stylelint configs designed for typical KNIME frontend projects using JavaScript/TypeScript as well as Vue, Nuxt and Vitest.",
   "type": "module",
   "scripts": {
@@ -23,10 +23,10 @@
     "@nuxt/eslint-config": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
-    "@typescript-eslint/utils": "^8.25.0",
-    "@vitest/eslint-plugin": "1.1.37",
+    "@typescript-eslint/utils": "^8.26.1",
+    "@vitest/eslint-plugin": "1.1.38",
     "@vue/eslint-config-typescript": "^14.5.0",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-flat-config-utils": "^2.0.1",
     "eslint-import-resolver-custom-alias": "^1.3.2",
     "eslint-plugin-import-x": "^4.8.0",
diff --git a/packages/lint/vue3-typescript-strict.js b/packages/lint/vue3-typescript-strict.js
@@ -0,0 +1,18 @@
+import knimeVue3TS from "vue3-typescript.js";
+
+export default [
+  ...knimeVue3TS,
+  {
+    name: "@knime/eslint-config/vue3-typescript-strict",
+    rules: {
+      "vue/block-lang": [
+        "error",
+        {
+          script: {
+            lang: "ts",
+          },
+        },
+      ],
+    },
+  },
+];
diff --git a/packages/lint/vue3-typescript.js b/packages/lint/vue3-typescript.js
@@ -49,13 +49,6 @@ export default defineConfigWithVueTs({
     "import/no-duplicates": "error",
     "no-duplicate-imports": "off",
     "unused-imports/no-unused-vars": "off",
-    "vue/block-lang": [
-      "warn",
-      {
-        script: {
-          lang: "ts",
-        },
-      },
-    ],
+    "vue/block-lang": "off",
   },
 });
diff --git a/packages/rte/src/components/CreateLinkModal.vue b/packages/rte/src/components/CreateLinkModal.vue
@@ -25,7 +25,6 @@ watch(
     editedUrl.value = props.url.value;
     setTimeout(() => {
       inputRef.value?.focus();
-      // eslint-disable-next-line no-magic-numbers
     }, 200);
   },
   { deep: true },
diff --git a/packages/ui-extension-renderer/src/api/services/alert.ts b/packages/ui-extension-renderer/src/api/services/alert.ts
@@ -18,8 +18,6 @@ export type WarningAlert = {
   warnings: WarningData[];
 };
 
-export type ErrorDetails = unknown;
-
 export type UserErrorAlert = {
   type: "error";
   code: UserErrorCode;
diff --git a/packages/ui-extension-service/src/services/__tests__/mocks/extensionConfig.ts b/packages/ui-extension-service/src/services/__tests__/mocks/extensionConfig.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-magic-numbers */
 import type { UIExtensionServiceConfig } from "@knime/ui-extension-renderer/api";
 
 export const extensionConfig: UIExtensionServiceConfig = {
diff --git a/packages/utils/src/intervalUtils.ts b/packages/utils/src/intervalUtils.ts
@@ -52,7 +52,6 @@ const extractDurationFromRegexMatch = (
   negative: boolean,
   match: RegExpExecArray,
 ): Duration => {
-  // eslint-disable-next-line no-magic-numbers
   const milliseconds = parseInt(match[4]?.padEnd(3, "0") ?? "0", 10);
 
   return {
@@ -104,7 +103,6 @@ export const formatIntervalToISOIntervalString = (
   } else {
     output += `T${toFormat.interval.hours}H${toFormat.interval.minutes}M${toFormat.interval.seconds}.${toFormat.interval.milliseconds
       .toString()
-      // eslint-disable-next-line no-magic-numbers
       .padStart(3, "0")}S`;
   }
 
@@ -160,7 +158,7 @@ export const formatIntervalToHumanReadableIntervalString = (
       if (milliSecondsZero) {
         output += formatPart(toFormat.interval.seconds, "second");
       } else {
-        output += `${toFormat.interval.seconds}.${toFormat.interval.milliseconds.toString().padStart(3, "0")} seconds `; // eslint-disable-line no-magic-numbers
+        output += `${toFormat.interval.seconds}.${toFormat.interval.milliseconds.toString().padStart(3, "0")} seconds `;
       }
     }
   }
diff --git a/packages/utils/src/uploadManager/index.ts b/packages/utils/src/uploadManager/index.ts
@@ -1,6 +1,5 @@
 import { AbortError, createAbortablePromise, retryPromise } from "../promise";
 
-// eslint-disable-next-line no-magic-numbers
 const CHUNK_SIZE = 50 * 1024 * 1024; // 50 MB per chunk
 
 const DEFAULT_RETRY_COUNT = 5;
diff --git a/packages/virtual-tree/package.json b/packages/virtual-tree/package.json
@@ -32,7 +32,6 @@
     "consola": "catalog:peer"
   },
   "devDependencies": {
-    "@knime/eslint-config": "workspace:*",
     "@vitejs/plugin-vue": "catalog:",
     "@vue/test-utils": "catalog:",
     "consola": "catalog:",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
