Update dependency eslint to v9 (#1072)

* Update dependency eslint to v9 * migrated to `@nuxt/eslint` * fixed linting errors --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Frank Elsinga <[email protected]>
TUM-Dev · Apr 28, 2024 · 530c393 · 530c393
1 parent 2682790
commit 530c393
Show file tree

Hide file tree

Showing 21 changed files with 2,132 additions and 1,879 deletions.
diff --git a/webclient/.eslintrc.cjs b/webclient/.eslintrc.cjs
diff --git a/webclient/.gitignore b/webclient/.gitignore
@@ -23,9 +23,4 @@ coverage
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
-/cdn/
-
-# lockfiles
-pnpm-lock.yaml
-package-lock.json
+*.sw?
diff --git a/webclient/components/AppFooter.vue b/webclient/components/AppFooter.vue
@@ -55,15 +55,15 @@ const navigation = computed(() => [
       <div class="mt-10 flex justify-center space-x-10 text-center">
         <Btn to="https://tum.de" variant="rounded-xl pt-2 pb-4 px-4 focusable" size="sm">
           <p class="text-zinc-600 text-center text-xs">
-            {{ t("official_roomfinder") }}<br />
+            {{ t("official_roomfinder") }}<br >
             <img
               :alt="t('tum_logo_alt')"
               :src="`/logos/tum_${colorMode.value === 'dark' ? 'dark' : 'light'}_${locale}.svg`"
               width="200"
               height="80"
               loading="lazy"
               aria-hidden="true"
-            />
+            >
           </p>
         </Btn>
       </div>

diff --git a/webclient/components/AppNavHeader.vue b/webclient/components/AppNavHeader.vue
@@ -3,7 +3,7 @@
     <nav class="mx-auto max-w-4xl">
       <div class="mx-5 my-2.5 flex place-content-between content-between justify-between gap-x-10 lg:mx-10">
         <NuxtLink class="my-auto hidden lg:block print:!block" to="/">
-          <img alt="Navigatum Logo" class="pt-2" width="201" height="32" src="~/assets/logos/navigatum.svg" />
+          <img alt="Navigatum Logo" class="pt-2" width="201" height="32" src="~/assets/logos/navigatum.svg" >
         </NuxtLink>
         <div class="my-auto max-w-lg flex-grow lg:col-span-3 print:!hidden">
           <slot />

diff --git a/webclient/components/AppSearchBar.vue b/webclient/components/AppSearchBar.vue
@@ -170,7 +170,7 @@ watchEffect(() => {
       <ul v-for="s in data.sections" v-cloak :key="s.facet" class="flex flex-col gap-2">
         <div class="flex items-center">
           <span class="text-md text-zinc-800 me-4 flex-shrink">{{ t(`sections.${s.facet}`) }}</span>
-          <div class="border-zinc-800 flex-grow border-t"></div>
+          <div class="border-zinc-800 flex-grow border-t" />
         </div>
 
         <template v-for="(e, i) in s.entries" :key="e.id">
@@ -181,8 +181,7 @@ watchEffect(() => {
             @click="searchBarFocused = false"
             @mousedown="keep_focus = true"
             @mouseover="highlighted = null"
-          >
-          </SearchResultItem>
+          />
         </template>
         <li class="-mt-2">
           <Btn

diff --git a/webclient/components/BreadcrumbList.vue b/webclient/components/BreadcrumbList.vue
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<{ items: Item[]; class?: string }>(), { c
         >
           <span property="name">{{ item.name }}</span>
         </NuxtLink>
-        <meta property="position" :content="`${i + 1}`" />
+        <meta property="position" :content="`${i + 1}`" >
       </li>
     </template>
   </ol>

diff --git a/webclient/components/Checkbox.vue b/webclient/components/Checkbox.vue
@@ -11,7 +11,7 @@ const model = defineModel<boolean>();
         v-model="model"
         type="checkbox"
         class="focusable bg-zinc-100 border-zinc-300 z-40 min-h-4 min-w-4 accent-blue-400"
-      />
+      >
     </div>
     <div class="ps-1">
       <label :for="id" class="text-zinc-900 z-30 text-sm font-medium">

diff --git a/webclient/components/DetailsInteractiveMap.vue b/webclient/components/DetailsInteractiveMap.vue
@@ -27,8 +27,7 @@ function loadInteractiveMap(fromUi = false) {
       if (document.getElementById("interactive-map")?.classList.contains("maplibregl-map")) {
         marker.value?.remove();
       } else {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore recursive calls are not supported by ts
+        // @ts-expect-error recursive calls are not supported by ts
         map.value = initMap("interactive-map");
 
         document.getElementById("interactive-map")?.classList.remove("loading");
@@ -260,7 +259,7 @@ function setOverlayImage(imgUrl: string | null, coords: Coordinates | undefined)
     <div v-if="webglSupport" id="interactive-map" class="absolute !h-full !w-full" />
     <div v-else class="relative">
       {{ t("no_webgl.no_browser_support") }}
-      {{ t("no_webgl.explain_webgl") }} <br />
+      {{ t("no_webgl.explain_webgl") }} <br >
       {{ t("no_webgl.please_try") }}:
       <ol>
         <li>

diff --git a/webclient/components/DetailsSources.vue b/webclient/components/DetailsSources.vue
@@ -26,7 +26,7 @@ const { t } = useI18n({ useScope: "local" });
           <template v-if="i < sources.base.length - 1"> • </template>
         </span>
         <span v-if="sources.patched">
-          <br />
+          <br >
           ({{ t("base.patched") }})
         </span>
       </p>

diff --git a/webclient/components/FeedbackModal.vue b/webclient/components/FeedbackModal.vue
@@ -28,7 +28,7 @@ const feedback = useFeedback();
           class="focusable bg-zinc-200 border-zinc-400 flex-grow rounded border px-2 py-1"
           type="text"
           :placeholder="t('subject')"
-        />
+        >
       </div>
 
       <div class="flex flex-col pb-5">
@@ -41,8 +41,7 @@ const feedback = useFeedback();
           class="focusable bg-zinc-200 border-zinc-400 resize-y rounded border px-2 py-1"
           :placeholder="t('message')"
           rows="6"
-        >
-        </textarea>
+        />
         <p class="text-zinc-500 text-xs">
           {{
             {

diff --git a/webclient/components/RoomfinderImageLocation.vue b/webclient/components/RoomfinderImageLocation.vue
@@ -105,7 +105,7 @@ onMounted(draw);
       'max-w-2xl': map.height <= map.width,
     }"
   >
-    <canvas :id="props.id" class="w-full" :width="map.width" :height="map.height"></canvas>
+    <canvas :id="props.id" class="w-full" :width="map.width" :height="map.height" />
   </div>
 </template>
 

diff --git a/webclient/components/SearchResultItem.vue b/webclient/components/SearchResultItem.vue
@@ -53,8 +53,8 @@ type RoomEntry = components["schemas"]["RoomEntry"];
         <small>
           {{ item.subtext }}
           <template v-if="item.type === 'room' || item.type === 'virtual_room' || item.type === 'poi'"
-            >, <b v-html="item.subtext_bold"></b
-          ></template>
+            >, <b v-html="item.subtext_bold"
+          /></template>
         </small>
       </div>
     </NuxtLink>

diff --git a/webclient/components/SearchSectionList.vue b/webclient/components/SearchSectionList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-type SearchResponse = components["schemas"]["SearchResponse"];
 import type { components } from "~/api_types";
 import SearchResultItem from "~/components/SearchResultItem.vue";
+type SearchResponse = components["schemas"]["SearchResponse"];
 
 defineProps<{
   data: SearchResponse;
@@ -19,8 +19,12 @@ const { t } = useI18n({ useScope: "local" });
       <h2 class="text-md text-zinc-500 font-semibold">{{ t(`sections.${s.facet}`) }}</h2>
       <ul class="flex flex-col gap-3">
         <template v-for="(e, i) in s.entries" :key="e.id">
-          <SearchResultItem v-if="i < s.n_visible" :highlighted="false" :item="e" @click="router.push(`/view/${e.id}`)">
-          </SearchResultItem>
+          <SearchResultItem
+            v-if="i < s.n_visible"
+            :highlighted="false"
+            :item="e"
+            @click="router.push(`/view/${e.id}`)"
+          />
         </template>
       </ul>
       <p v-if="s.estimatedTotalHits > 10" class="text-zinc-500 text-sm">

diff --git a/webclient/components/Spinner.vue b/webclient/components/Spinner.vue
@@ -12,11 +12,11 @@ const props = defineProps<{
     fill="none"
     viewBox="0 0 24 24"
   >
-    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
     <path
       class="opacity-75"
       fill="currentColor"
       d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    ></path>
+    />
   </svg>
 </template>
diff --git a/webclient/components/TokenBasedModal.vue b/webclient/components/TokenBasedModal.vue
@@ -179,7 +179,7 @@ function sendForm() {
         @click="sendForm"
       >
         <template v-if="loading">
-          <Spinner class="my-auto h-4 w-4"></Spinner>
+          <Spinner class="my-auto h-4 w-4" />
           {{ t("sending...") }}
         </template>
         <template v-else-if="error.blockSend">{{ t("try_again_later") }}</template>

diff --git a/webclient/composables/feedbackToken.ts b/webclient/composables/feedbackToken.ts
@@ -27,7 +27,7 @@ export function useFeedbackToken(t: ReturnType<typeof useI18n>["t"]): {
 
   // legacy migration function TODO: remove only after 31.09.2023, to give our users time to migrate to the new token format
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
+  // @ts-expect-error
   if (token.value?.expiry) {
     token.value = null;
   }

diff --git a/webclient/eslint.config.mjs b/webclient/eslint.config.mjs
@@ -0,0 +1,77 @@
+import withNuxt from "./.nuxt/eslint.config.mjs";
+
+export default withNuxt(
+  {
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: "latest",
+      },
+    },
+    rules: {
+      "vue/no-multiple-template-root": "off",
+      "vue/no-v-html": "off",
+      "vue/block-lang": [
+        "error",
+        {
+          script: {
+            lang: "ts",
+          },
+        },
+      ],
+      "vue/block-order": [
+        "error",
+        {
+          order: ["script", "template", "style", "i18n"],
+        },
+      ],
+      "vue/block-tag-newline": "error",
+      "vue/component-api-style": [
+        "error",
+        ["script-setup", "composition"], // "script-setup", "composition", "composition-vue2", or "options"
+      ],
+      "vue/multi-word-component-names": "off",
+      "vue/component-name-in-template-casing": ["error", "PascalCase", { registeredComponentsOnly: false }],
+      "vue/custom-event-name-casing": ["error", "camelCase"],
+      "vue/define-macros-order": "error",
+      "vue/define-props-declaration": ["error", "type-based"],
+      "vue/html-button-has-type": [
+        "error",
+        {
+          button: true,
+          submit: true,
+          reset: true,
+        },
+      ],
+      "vue/no-boolean-default": ["error", "default-false"],
+      "vue/no-empty-component-block": "error",
+      "vue/html-comment-content-spacing": ["error", "always"],
+      "vue/no-ref-object-reactivity-loss": "error",
+      "vue/no-required-prop-with-default": "error",
+      "vue/no-restricted-call-after-await": "error",
+      //"vue/no-root-v-if": "error", todo: enable when there is a loading animation
+      "vue/no-setup-props-reactivity-loss": "error",
+      //"vue/no-static-inline-styles": "error", todo: enable after migration to tailwind
+      "vue/no-useless-mustaches": "error",
+      "vue/no-useless-v-bind": "error",
+      "vue/no-v-text": "error",
+      "vue/padding-line-between-blocks": "error",
+      "vue/prefer-prop-type-boolean-first": "error",
+      "vue/prefer-separate-static-class": "error",
+      "vue/require-macro-variable-name": "error",
+      "vue/require-typed-ref": "error",
+      "vue/static-class-names-order": "off",
+      "vue/v-for-delimiter-style": "error",
+      "vue/no-constant-condition": "error",
+    },
+  },
+  // your custom flat configs go here, for example:
+  // {
+  //   files: ['**/*.ts', '**/*.tsx'],
+  //   rules: {
+  //     'no-console': 'off' // allow console.log in TypeScript files
+  //   }
+  // },
+  // {
+  //   ...
+  // }
+);
diff --git a/webclient/nuxt.config.ts b/webclient/nuxt.config.ts
@@ -9,6 +9,7 @@ export default defineNuxtConfig({
     },
   },
   modules: [
+    "@nuxt/eslint",
     "@nuxtjs/i18n",
     "@nuxtjs/tailwindcss",
     "@nuxtjs/color-mode",
@@ -157,4 +158,5 @@ export default defineNuxtConfig({
       "sharp", // sharp somehow has problems when not transpiled causing "module not transpiled" errors
     ],
   },
+  eslint: {},
 });
diff --git a/webclient/package.json b/webclient/package.json
@@ -9,7 +9,7 @@
     "postinstall": "nuxt prepare",
     "type-check": "nuxt typecheck",
     "type-refresh": "openapi-typescript ../openapi.yaml --output ./api_types/index.ts --export-type --immutable-types --support-array-length && npm run format && npm run lint",
-    "lint": "eslint . --ext .vue,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --fix --ignore-pattern '.nuxt|node_modules|.output' ",
     "format": "prettier --plugin=prettier-plugin-tailwindcss --end-of-line lf --write ."
   },
   "dependencies": {
@@ -32,16 +32,14 @@
     "vue3-carousel": "0.3.3"
   },
   "devDependencies": {
+    "@nuxt/eslint": "0.3.10",
     "@nuxtjs/i18n": "8.3.1",
     "@nuxtjs/tailwindcss": "6.12.0",
     "@types/node": "20.12.7",
     "@types/swagger-ui": "3.52.4",
-    "@vue/eslint-config-prettier": "9.0.0",
-    "@vue/eslint-config-typescript": "13.0.0",
     "@vue/tsconfig": "0.5.1",
     "autoprefixer": "10.4.19",
-    "eslint": "8.57.0",
-    "eslint-plugin-vue": "9.25.0",
+    "eslint": "9.1.1",
     "openapi-typescript": "6.7.5",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ const { t } = useI18n({ useScope: "local" }); @@
               <template v-if="i < sources.base.length - 1"> • </template>
             </span>
             <span v-if="sources.patched">
-              <br />
+              <br >
               ({{ t("base.patched") }})
             </span>
           </p>
@@ Expand Down @@