Setup new eslint configuration + needed fixes for errors

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "eslint.validate": ["javascript", "typescript", "vue"],
+  "eslint.useFlatConfig": true,
   "typescript.tsdk": "./frontend/node_modules/typescript/lib"
 }

CONTRIBUTING.md

@@ -326,19 +326,20 @@ exit
 
 ### Frontend
 
-Please check the formatting of your code using Prettier before pull requests with the following command:
+Please check the formatting of your code using Prettier and run the static type check with eslint before pull requests with the following command:
 
 ```bash
 # Within ./frontend:
-yarn prettier . --check --config ../.prettierrc --ignore-path ../.prettierignore
+yarn format
+yarn lint
 ```
 
 You can further run the following commands for TypeScript type checks on the frontend:
 
 ```bash
 # Within ./frontend:
 yarn run postinstall
-yarn nuxi typecheck
+yarn typecheck
 ```
 
 > [!NOTE]

frontend/components/card/CardOrgApplicationVote.vue

@@ -93,14 +93,9 @@ export interface Props {
  */
 export interface Emits {
   /**
-   * The up vote casted event.
+   * The up and down vote casted events.
    */
-  (event: "up-vote"): void;
-
-  /**
-   * The down vote casted event.
-   */
-  (event: "down-vote"): void;
+  (event: "up-vote" | "down-vote"): void;
 }
 
 defineEmits<Emits>();

frontend/components/card/CardTopicSelection.vue

@@ -255,6 +255,7 @@ const selectedTopicTags = computed(() => {
 
 const topics = computed((): TopicsTag[] => {
   return [
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     ...selectedTopicTags.value.sort((a, b) => a.value.localeCompare(b.value)),
     ...GLOBAL_TOPICS.filter((topic) => !isActiveTopic(topic.value)).sort(
       (a, b) => a.value.localeCompare(b.value)

frontend/components/dropdown/DropdownCreate.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 import type { MenuSelector } from "~/types/menu/menu-selector";
 
 defineProps<{

frontend/components/dropdown/DropdownInfo.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 import type { MenuSelector } from "~/types/menu/menu-selector";
 
 defineProps<{

frontend/components/dropdown/DropdownLanguage.vue

@@ -30,7 +30,7 @@
 import { MenuItem } from "@headlessui/vue";
 import type { LocaleObject } from "@nuxtjs/i18n";
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 
 defineProps<{
   location?: DropdownLocation;

frontend/components/dropdown/DropdownTheme.vue

@@ -30,7 +30,7 @@
 import { MenuItem } from "@headlessui/vue";
 import { computed } from "vue";
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 
 defineProps<{
   location?: DropdownLocation;

frontend/components/dropdown/DropdownUserOptions.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 import type { MenuSelector } from "~/types/menu/menu-selector";
 
 defineProps<{

frontend/components/grid/GridGitHubContributors.vue

@@ -56,14 +56,20 @@
 <script setup lang="ts">
 const localePath = useLocalePath();
 
-interface GithubContributor {
+interface GitHubContributor {
   avatarUrl: string;
   htmlUrl: string;
   loginID: string;
 }
 
+interface GitHubContributorResponse {
+  avatar_url: string;
+  html_url: string;
+  login: string;
+}
+
 const isLoading = ref<boolean>(false);
-const githubData = ref<GithubContributor[]>([]);
+const githubData = ref<GitHubContributor[]>([]);
 const currentPage = ref<number>(1);
 const hasMoreContributors = ref<boolean>(true);
 
@@ -84,7 +90,7 @@ async function fetchDataFromGitHubAPI(page: number, numPerPage: number = 30) {
     }
 
     githubData.value = githubData.value.concat(
-      data.map((item: any) => {
+      data.map((item: GitHubContributorResponse) => {
         return {
           avatarUrl: item.avatar_url,
           htmlUrl: item.html_url,

frontend/components/media/MediaMap.vue

@@ -9,7 +9,7 @@
 import MapLibreGlDirections, {
   layersFactory,
 } from "@maplibre/maplibre-gl-directions";
-import maplibregl, { Map } from "maplibre-gl";
+import maplibregl, { type Map } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 const props = defineProps<{
@@ -39,6 +39,7 @@ function isWebglSupported() {
       }
     } catch (e) {
       // WebGL is supported, but disabled.
+      console.log(e);
     }
     return false;
   }

frontend/components/menu/MenuItemLabel.vue

@@ -37,11 +37,11 @@
 const props = defineProps<{
   isSideLeftMenu?: boolean | undefined;
   isButton: boolean;
-  handlerClick?: () => void | undefined;
+  handlerClick?: () => void;
   iconName?: string | undefined;
   ariaLabel?: string | undefined;
   label: string;
-  active: any;
+  active: boolean;
 }>();
 
 const sidebar = useSidebar();

frontend/components/menu/MenuSearchResult.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
   <div
     @mouseleave="showTooltip = false"
     ref="quickActionBtnAndMenu"

frontend/components/modal/ModalSharePage.vue

@@ -314,6 +314,7 @@ const shareOptions = {
   bcc: [""],
   subject: getEntityType()?.subject || "Share this!",
   body:
+    // eslint-disable-next-line no-constant-binary-expression
     `${getEntityType()?.body}   ${getEntityType()?.url}` || "Check this out!",
   redirectUri: "https://www.domain.com/",
   domain: "https://mas.to",

frontend/components/modal/qr-code/ModalQRCode.vue

@@ -177,11 +177,12 @@ const availableFormats: Ref<string[]> = computed(() => {
 });
 
 function drawInlineSVG(
-  svgElement: any,
+  svgElement: Element,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ctx: any,
   width: number,
   height: number,
-  callback: any
+  callback: () => void
 ) {
   const svgURL = new XMLSerializer().serializeToString(svgElement);
   const img = new Image();

frontend/components/sidebar/left/SidebarLeft.vue

@@ -234,6 +234,7 @@ const getFiltersByPageType = computed<Filters>(() => {
   for (const filter in filters) {
     const f = filters[filter as keyof typeof filters];
     if (!f.sidebarType.includes(sidebarType.value)) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete filteredFilters[filter as keyof typeof filters];
     }
   }
@@ -251,6 +252,7 @@ const applyTopShadow = ref(false);
 
 function setSidebarContentScrollable(): void {
   setTimeout(() => {
+    // eslint-disable-next-line vue/no-ref-as-operand
     if (content && content.value) {
       sidebarContentScrollable.value =
         content.value.scrollHeight > content.value.clientHeight ? true : false;

frontend/composables/fetch.ts

@@ -6,7 +6,7 @@
  */
 export const fetchWithOptionalToken = async (
   url: string,
-  data: object | {} | undefined
+  data: object | undefined
 ) => {
   const token = localStorage.getItem("accessToken");
 

frontend/composables/put.ts

@@ -1,13 +1,11 @@
-export const putWithToken = async (
-  url: string,
-  data: object | {} | undefined
-) => {
+export const putWithToken = async (url: string, data: object | undefined) => {
   const token = localStorage.getItem("accessToken");
 
   if (data !== undefined) {
     const res = await $fetch.raw(BASE_BACKEND_URL + url, {
       method: "PUT",
       body: JSON.stringify({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ...(data as { value: any }).value,
       }),
       headers: {

frontend/composables/useAuth.ts

@@ -1,5 +1,5 @@
 interface LoginResponse {
-  data: {};
+  data: object;
 }
 
 export const useAuth = () => {

frontend/composables/useFormCheckboxRadio.ts

@@ -1,5 +1,6 @@
 export default function useFormCheckboxRadio(
   value: string | string[],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   emit: (event: "update:modelValue", ...args: any[]) => void
 ) {
   const selectedValue = ref<string | string[]>(value);

frontend/composables/useFormSetup.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export default function useFormInput(
   props: Record<string, unknown>,
   emit: any,

frontend/.eslintrc.js → frontend/eslint.config.mjs

@@ -1,41 +1,25 @@
-module.exports = {
-  parser: "vue-eslint-parser",
-  extends: [
-    "plugin:vuejs-accessibility/recommended",
-    "eslint:recommended",
-    "plugin:vue/vue3-recommended",
-    "plugin:vue/base",
-    "@nuxt/eslint-config",
-    "prettier",
-  ],
+import vue from "eslint-plugin-vue";
+import vueA11y from "eslint-plugin-vuejs-accessibility";
+import withNuxt from "./.nuxt/eslint.config.mjs";
+
+export default withNuxt({
   files: ["**/*.js", "**/*.ts", "**/*.vue"],
+
+  plugins: {
+    vue,
+    "vuejs-accessibility": vueA11y,
+  },
+
   rules: {
-    "vue/no-multiple-template-root": "off",
-    "vue/component-tags-order": [
-      "error",
-      {
-        order: ["template", "script", "style"],
-      },
-    ],
-    "vue/multi-word-component-names": "off",
-    "vue/no-empty-component-block": "error",
+    ...vue.configs.recommended.rules,
+
+    "valid-v-for": "off",
     "vue/attribute-hyphenation": [
       "off",
       {
         ignore: [],
       },
     ],
-    "vue/v-on-event-hyphenation": [
-      "off",
-      {
-        autofix: false,
-        ignore: [],
-      },
-    ],
-    "vue/no-use-v-if-with-v-for": "off",
-    "vue/require-default-prop": "off",
-    "vue/require-v-for-key": "off",
-    "valid-v-for": "off",
     "vue/attributes-order": [
       "error",
       {
@@ -55,6 +39,26 @@ module.exports = {
         alphabetical: false,
       },
     ],
+    "vue/component-tags-order": [
+      "error",
+      {
+        order: ["template", "script", "style"],
+      },
+    ],
+    "vue/html-self-closing": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/no-empty-component-block": "error",
+    "vue/no-multiple-template-root": "off",
+    "vue/no-use-v-if-with-v-for": "off",
+    "vue/require-default-prop": "off",
+    "vue/require-v-for-key": "off",
+    "vue/v-on-event-hyphenation": [
+      "off",
+      {
+        autofix: false,
+        ignore: [],
+      },
+    ],
     "vuejs-accessibility/label-has-for": [
       "error",
       {
@@ -67,4 +71,4 @@ module.exports = {
       },
     ],
   },
-};
+});

frontend/layouts/auth.vue

@@ -43,9 +43,10 @@
 </template>
 
 <script setup lang="ts">
-const route = useRoute();
 import useBreakpoint from "~/composables/useBreakpoint";
 
+const route = useRoute();
+
 const aboveMediumBP = useBreakpoint("md");
 
 const page = computed(() => {

frontend/modules.ts

@@ -1,6 +1,6 @@
 import type { NuxtModule } from "@nuxt/schema";
 
-const modules: (string | [string, Record<string, any>] | NuxtModule)[] = [
+const modules: (string | [string, Record<string, object>] | NuxtModule)[] = [
   "@nuxt/content",
   "nuxt-icon",
   [
@@ -18,6 +18,7 @@ const modules: (string | [string, Record<string, any>] | NuxtModule)[] = [
   "@nuxtjs/color-mode",
   "@nuxtjs/device",
   "@nuxt/devtools",
+  "@nuxt/eslint",
   "@nuxtjs/i18n",
   "@nuxtjs/plausible",
   "@nuxtjs/tailwindcss",

frontend/package.json

@@ -8,13 +8,17 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "test:local": "cross-env TEST_ENV=local playwright test",
-    "test:prod": "cross-env TEST_ENV=prod playwright test"
+    "test:prod": "cross-env TEST_ENV=prod playwright test",
+    "typecheck": "nuxi typecheck",
+    "format": "yarn prettier . --check --config ../.prettierrc --ignore-path ../.prettierignore",
+    "lint": "eslint ."
   },
   "devDependencies": {
     "@headlessui/vue": "1.7.23",
     "@nuxt/content": "2.13.2",
     "@nuxt/devtools": "1.6.0",
-    "@nuxt/eslint-config": "0.5.7",
+    "@nuxt/eslint": "^0.6.0",
+    "@nuxt/eslint-config": "0.6.0",
     "@nuxtjs/color-mode": "3.5.1",
     "@nuxtjs/device": "3.2.4",
     "@nuxtjs/i18n": "8.5.5",