Update dependency eslint to v9

webclient/.gitignore

@@ -23,9 +23,4 @@ coverage
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
-/cdn/
-
-# lockfiles
-pnpm-lock.yaml
-package-lock.json
+*.sw?

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>

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 />

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

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>

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">

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>

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>

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">
  {{
  {

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>
 

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>

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">

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>

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>

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;
  }

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
+ // }
+ // },
+ // {
+ // ...
+ // }
+);

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: {},
 });

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",