Upgrade eslint to version 9 and flat config

.github/dependabot.yml

@@ -24,11 +24,6 @@ updates:
           - "vuetify"
       development-dependencies:
         dependency-type: "development"
-        exclude-patterns:
-          - "eslint"
-          - "@typescript-eslint/parser"
-          - "@typescript-eslint/eslint-plugin"
-          - "@vue/eslint-config-typescript"
 
   - package-ecosystem: "gomod"
     directory: "/"

.github/workflows/ci.yml

@@ -101,5 +101,5 @@ jobs:
       - name: Lint frontend
         working-directory: ./web
         run: |
-          yarn lint
+          yarn run eslint
           yarn prettier --check .

web/eslint.config.mjs

@@ -0,0 +1,46 @@
+import globals from "globals";
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
+import pluginVue from "eslint-plugin-vue";
+import vueParser from "vue-eslint-parser";
+import vueTsEslintConfig from "@vue/eslint-config-typescript";
+
+export default tseslint.config(
+  {
+    ignores: [
+      "**/*.guard.ts",
+      "**/dist/",
+      "**/node_modules/",
+      "src/parser/query.ts",
+    ],
+  },
+  {
+    extends: [
+      eslint.configs.recommended,
+      ...pluginVue.configs["flat/vue2-strongly-recommended"],
+      ...vueTsEslintConfig(),
+      ...tseslint.configs.recommendedTypeChecked,
+    ],
+    languageOptions: {
+      parser: vueParser,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 2021,
+        extraFileExtensions: [".vue"],
+        sourceType: "module",
+        parser: tseslint.parser,
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    files: ["**/*.{ts,vue}"],
+    rules: {
+      "no-console": "off",
+      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+      "vue/multi-word-component-names": "off",
+      "vue/no-reserved-component-names": "off",
+    },
+  },
+  eslintConfigPrettier,
+);

web/package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "lint": "eslint --ext .js,.ts,.vue --fix .",
+    "lint": "eslint --fix .",
     "format": "prettier --check --write .",
     "nearley": "nearleyc src/parser/query.ne -o src/parser/query.ts"
   },
@@ -27,26 +27,30 @@
     "vuetify": "^2.6.14"
   },
   "devDependencies": {
+    "@types/eslint": "^9.6.1",
     "@types/moo": "^0.5.9",
     "@types/nearley": "^2.11.5",
     "@types/node": "^22.10.2",
     "@types/vue-moment": "^4.0.7",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
     "@vitejs/plugin-vue2": "^2.3.3",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "eslint": "^8.57.1",
+    "@vue/eslint-config-typescript": "^14.1.4",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.14.0",
     "prettier": "^3.4.2",
     "sass": "~1.83.0",
     "ts-auto-guard": "^5.0.1",
     "typescript": "~5.7.2",
+    "typescript-eslint": "^8.18.2",
     "unplugin-vue-components": "^0.28.0",
     "vite": "^6.0.5",
     "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-node-polyfills": "^0.22.0"
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vue-eslint-parser": "^9.4.3"
   },
   "browserslist": [
     "> 1%",

web/src/apiClient.ts

@@ -331,7 +331,7 @@ const APIClient = {
     if (guard(response.data)) {
       return response.data;
     }
-    throw "Unexpected response, types mismatch";
+    throw new Error("Unexpected response, types mismatch");
   },
 };
 

web/src/components/CTFWizardDialog.vue

@@ -167,10 +167,10 @@ function createService() {
       service_by_port_loading.value = false;
       EventBus.emit("showMessage", `Service ${serviceName.value} created.`);
     })
-    .catch((err: string) => {
+    .catch((err: Error) => {
       service_by_port_error.value = true;
       service_by_port_loading.value = false;
-      EventBus.emit("showError", err);
+      EventBus.emit("showError", err.message);
     });
 }
 
@@ -192,15 +192,15 @@ function createFlagTags() {
     .then((res) => {
       const rejected = res.filter((r) => r.status === "rejected");
       if (rejected.length != 0) {
-        throw rejected.map((r) => r.reason as string).join("; ");
+        throw new Error(rejected.map((r) => r.reason as string).join("; "));
       }
       visible.value = false;
       flag_regex_loading.value = false;
     })
-    .catch((err: string) => {
+    .catch((err: Error) => {
       flag_regex_error.value = true;
       flag_regex_loading.value = false;
-      EventBus.emit("showError", err);
+      EventBus.emit("showError", err.message);
     });
 }
 </script>

web/src/components/ConverterResetDialog.vue

@@ -61,10 +61,10 @@ function resetConverterAction() {
     .then(() => {
       visible.value = false;
     })
-    .catch((err: string) => {
+    .catch((err: Error) => {
       error.value = true;
       loading.value = false;
-      EventBus.emit("showError", err);
+      EventBus.emit("showError", err.message);
     });
 }
 </script>

web/src/components/Converters.vue

@@ -143,11 +143,11 @@ onMounted(() => {
 });
 
 function refreshConverters() {
-  store.updateTags().catch((err: string) => {
-    EventBus.emit("showError", `Failed to update tags: ${err}`);
+  store.updateTags().catch((err: Error) => {
+    EventBus.emit("showError", `Failed to update tags: ${err.message}`);
   });
-  store.updateConverters().catch((err: string) => {
-    EventBus.emit("showError", `Failed to update converters: ${err}`);
+  store.updateConverters().catch((err: Error) => {
+    EventBus.emit("showError", `Failed to update converters: ${err.message}`);
   });
 }
 
@@ -170,8 +170,8 @@ function showErrorLog(process: ProcessStats, converter: ConverterStatistics) {
         fetchStderrError.value = "Stderr is empty";
       }
     })
-    .catch((err: string | Error) => {
-      fetchStderrError.value = err.toString();
+    .catch((err: Error) => {
+      fetchStderrError.value = err.message;
     })
     .finally(() => {
       loadingStderr.value = false;

web/src/components/Graph.vue

@@ -668,8 +668,8 @@ graphStore.$subscribe((_mutation, state) => {
           theme: colorscheme,
         },
       } as ApexCharts.ApexOptions)
-      .catch((err: string) => {
-        EventBus.emit("showError", `Failed to update graph: ${err}`);
+      .catch((err: Error) => {
+        EventBus.emit("showError", `Failed to update graph: ${err.message}`);
       });
   });
   chartData.value = [];
@@ -683,7 +683,7 @@ onMounted(() => {
 function setChartTagOptions(typ: string, active: boolean) {
   nextTick(() => {
     const sel = chartTags.value;
-    for (var i = 0; i < sel.length; i++) {
+    for (let i = 0; i < sel.length; i++) {
       if (sel[i].startsWith(`${typ}/`)) {
         sel.splice(i--, 1);
       }
@@ -716,8 +716,8 @@ function fetchGraphLocal() {
       query as string,
       type as GraphType,
     )
-    .catch((err: string) => {
-      EventBus.emit("showError", `Failed to update graph: ${err}`);
+    .catch((err: Error) => {
+      EventBus.emit("showError", `Failed to update graph: ${err.message}`);
     });
 }
 </script>

web/src/components/Navigation.vue

@@ -318,11 +318,11 @@ onMounted(() => {
     .then(() => {
       if (store.tags?.length === 0) EventBus.emit("showCTFWizard");
     })
-    .catch((err: string) => {
-      EventBus.emit("showError", `Failed to update tags: ${err}`);
+    .catch((err: Error) => {
+      EventBus.emit("showError", `Failed to update tags: ${err.message}`);
     });
-  store.updateStatus().catch((err: string) => {
-    EventBus.emit("showError", `Failed to update status: ${err}`);
+  store.updateStatus().catch((err: Error) => {
+    EventBus.emit("showError", `Failed to update status: ${err.message}`);
   });
 });
 

web/src/components/PcapOverIP.vue

@@ -205,10 +205,10 @@ onMounted(() => {
 });
 
 function refresh() {
-  store.updatePcapOverIPEndpoints().catch((err: string) => {
+  store.updatePcapOverIPEndpoints().catch((err: Error) => {
     EventBus.emit(
       "showError",
-      `Failed to update PCAP-over-IP endpoints: ${err}`,
+      `Failed to update PCAP-over-IP endpoints: ${err.message}`,
     );
   });
 }
@@ -224,10 +224,13 @@ function add() {
       newAddress.value = "";
       refresh();
     })
-    .catch((err: string) => {
+    .catch((err: Error) => {
       addDialogLoading.value = false;
       addDialogError.value = true;
-      EventBus.emit("showError", `Failed to add PCAP-over-IP endpoint: ${err}`);
+      EventBus.emit(
+        "showError",
+        `Failed to add PCAP-over-IP endpoint: ${err.message}`,
+      );
     });
 }
 function del() {
@@ -240,10 +243,10 @@ function del() {
       delDialogLoading.value = false;
       refresh();
     })
-    .catch((err: string) => {
+    .catch((err: Error) => {
       EventBus.emit(
         "showError",
-        `Failed to delete PCAP-over-IP endpoint: ${err}`,
+        `Failed to delete PCAP-over-IP endpoint: ${err.message}`,
       );
       delDialogError.value = true;
       delDialogLoading.value = false;

web/src/components/Pcaps.vue

@@ -86,8 +86,8 @@ const headers = [
 ];
 
 onMounted(() => {
-  store.updatePcaps().catch((err: string) => {
-    EventBus.emit("showError", `Failed to update pcaps: ${err}`);
+  store.updatePcaps().catch((err: Error) => {
+    EventBus.emit("showError", `Failed to update pcaps: ${err.message}`);
   });
 });
 </script>