eslint-plugin-vue

.eslintrc

@@ -1,6 +1,11 @@
 {
   "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-essential",
+    "plugin:vue/vue3-recommended",
+    "@vue/prettier",
+    "@vue/typescript"
+  ]
 }

app/components/ltFilesSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <h2 class="mt-4" v-hide="userInfo" translate="translate">Sign in</h2>
+  <h2 v-hide="userInfo" class="mt-4" translate="translate">Sign in</h2>
   <p v-hide="userInfo">
     <span translate="translate">
       In order to allow locator-tool to modify file description pages, sign in first:
@@ -18,8 +18,8 @@
       <button
         class="nav-link"
         translate="translate"
-        @click="$tab = Tab.CATEGORY"
         :class="{active: $tab === Tab.CATEGORY}"
+        @click="$tab = Tab.CATEGORY"
       >
         Category
       </button>
@@ -28,8 +28,8 @@
       <button
         class="nav-link"
         translate="translate"
-        @click="$tab = Tab.USER"
         :class="{active: $tab === Tab.USER}"
+        @click="$tab = Tab.USER"
       >
         User files
       </button>
@@ -38,17 +38,17 @@
       <button
         class="nav-link"
         translate="translate"
-        @click="$tab = Tab.FILES"
         :class="{active: $tab === Tab.FILES}"
+        @click="$tab = Tab.FILES"
       >
         File list
       </button>
     </li>
   </ul>
-  <form name="formUser" @submit="nextForUser()" v-show="$tab === Tab.USER">
+  <form v-show="$tab === Tab.USER" name="formUser" @submit="nextForUser()">
     <div class="mb-4">
       <label for="inputUser" translate="translate">User</label>
-      <input class="form-control" id="inputUser" v-model="user" placeholder="User:…" />
+      <input id="inputUser" v-model="user" class="form-control" placeholder="User:…" />
     </div>
     <div class="row">
       <div class="mb-4 col-sm-4">
@@ -59,31 +59,31 @@
         >
           Limit
         </label>
-        <input class="form-control" id="inputUserLimit" v-model="userLimit" type="number" />
+        <input id="inputUserLimit" v-model="userLimit" class="form-control" type="number" />
       </div>
       <div class="mb-4 col-sm-4">
         <label for="inputUserStart" translate="translate">Start timestamp</label>
-        <input class="form-control" id="inputUserStart" v-model="userStart" type="date" />
+        <input id="inputUserStart" v-model="userStart" class="form-control" type="date" />
       </div>
       <div class="mb-4 col-sm-4">
         <label for="inputUserEnd" translate="translate">End timestamp</label>
-        <input class="form-control" id="inputUserEnd" v-model="userEnd" type="date" />
+        <input id="inputUserEnd" v-model="userEnd" class="form-control" type="date" />
       </div>
     </div>
     <div class="mb-4">
-      <button class="btn btn-success" @click="nextForUser()" :disabled="!user">
+      <button class="btn btn-success" :disabled="!user" @click="nextForUser()">
         <svg class="octicon">
           <use xlink:href="#location"></use>
         </svg>
         <span translate="translate">Load User files to geolocate</span>
       </button>
-      <button class="btn btn-secondary" @click="nextForUser('map')" :disabled="!user">
+      <button class="btn btn-secondary" :disabled="!user" @click="nextForUser('map')">
         <svg class="octicon">
           <use xlink:href="#globe"></use>
         </svg>
         <span translate="translate">Show User files on map</span>
       </button>
-      <button class="btn btn-secondary" @click="nextForUser('gallery')" :disabled="!user">
+      <button class="btn btn-secondary" :disabled="!user" @click="nextForUser('gallery')">
         <svg class="octicon">
           <use xlink:href="#file-media"></use>
         </svg>
@@ -93,18 +93,18 @@
     </div>
     <lt-spinner v-if="getFilesForUser$q && !getFilesForUser$q.$$state.status"></lt-spinner>
   </form>
-  <form name="formCategory" @submit="nextForCategory()" v-show="$tab === Tab.CATEGORY">
+  <form v-show="$tab === Tab.CATEGORY" name="formCategory" @submit="nextForCategory()">
     <div class="row">
       <div class="mb-4 col-lg-10">
         <label for="inputCategory" translate="translate">Category</label>
         <input
-          class="form-control"
           id="inputCategory"
-          list="datalistCategory"
           v-model="category"
           v-model-options="{updateOn: 'default blur', debounce: {default: 500, change: 0, blur: 0}}"
-          @change="getCategoriesForPrefix()"
+          class="form-control"
+          list="datalistCategory"
           placeholder="Category:…"
+          @change="getCategoriesForPrefix()"
         />
       </div>
       <div class="mb-4 col-lg-2">
@@ -116,23 +116,23 @@
         >
           Depth
         </label>
-        <input class="form-control" id="inputCategoryDepth" type="number" v-model="categoryDepth" />
+        <input id="inputCategoryDepth" v-model="categoryDepth" class="form-control" type="number" />
       </div>
     </div>
     <div class="mb-4">
-      <button class="btn btn-success" @click="nextForCategory()" :disabled="!category">
+      <button class="btn btn-success" :disabled="!category" @click="nextForCategory()">
         <svg class="octicon">
           <use xlink:href="#location"></use>
         </svg>
         <span translate="translate">Load Category to geolocate</span>
       </button>
-      <button class="btn btn-secondary" @click="nextForCategory('map')" :disabled="!category">
+      <button class="btn btn-secondary" :disabled="!category" @click="nextForCategory('map')">
         <svg class="octicon">
           <use xlink:href="#globe"></use>
         </svg>
         <span translate="translate">Show Category on map</span>
       </button>
-      <button class="btn btn-secondary" @click="nextForCategory('gallery')" :disabled="!category">
+      <button class="btn btn-secondary" :disabled="!category" @click="nextForCategory('gallery')">
         <svg class="octicon">
           <use xlink:href="#file-media"></use>
         </svg>
@@ -142,17 +142,17 @@
     </div>
     <lt-spinner v-if="getFilesForCategory$q && !getFilesForCategory$q.$$state.status"></lt-spinner>
     <datalist id="datalistCategory">
-      <option v-for="i in categorySuggestions" :value="i"></option>
+      <option v-for="i in categorySuggestions" :key="i" :value="i"></option>
     </datalist>
   </form>
-  <form name="formTitles" v-show="$tab === Tab.FILES">
+  <form v-show="$tab === Tab.FILES" name="formTitles">
     <div class="mb-4">
       <label for="inputTitles" translate="translate">File list</label>
       <textarea
-        class="form-control"
         id="inputTitles"
-        rows="10"
         v-model="titles"
+        class="form-control"
+        rows="10"
         placeholder="File:…"
         @paste="onFilesPaste($event)"
       ></textarea>

app/components/ltLanguageSelector.vue

@@ -1,6 +1,6 @@
 <template>
-  <select class="form-select" v-model="language">
-    <option v-for="(label, key) in languages" :value="key">{{ label }}</option>
+  <select v-model="language" class="form-select">
+    <option v-for="(label, key) in languages" :key="key" :value="key">{{ label }}</option>
   </select>
   <span
     hidden="hidden"

app/components/ltNavbar.vue

@@ -25,8 +25,8 @@
         </li>
         <li class="nav-item">
           <router-link
-            class="nav-link"
             v-show="activateLinks"
+            class="nav-link"
             :to="{name: 'geolocate', params: $route.query}"
           >
             <svg class="octicon">
@@ -37,8 +37,8 @@
         </li>
         <li class="nav-item">
           <router-link
-            class="nav-link"
             v-show="activateLinks"
+            class="nav-link"
             :to="{name: 'map', params: $route.query}"
           >
             <svg class="octicon">
@@ -49,8 +49,8 @@
         </li>
         <li class="nav-item">
           <router-link
-            class="nav-link"
             v-show="activateLinks"
+            class="nav-link"
             :to="{name: 'gallery', params: $route.query}"
           >
             <svg class="octicon">

app/components/ltUserInfo.vue

@@ -1,14 +1,14 @@
 <template>
-  <a class="btn btn-success ms-2" :href="loginURL()" v-hide="userInfo?.user">
+  <a v-hide="userInfo?.user" class="btn btn-success ms-2" :href="loginURL()">
     <svg class="octicon">
       <use xlink:href="#sign-in"></use>
     </svg>
     <span translate="translate">Log in</span>
   </a>
-  <span class="navbar-text ms-2" v-show="userInfo?.user" translate="translate">
+  <span v-show="userInfo?.user" class="navbar-text ms-2" translate="translate">
     Logged in as {{ userInfo?.user }}
   </span>
-  <a class="btn btn-secondary ms-2" :href="logoutURL()" v-show="userInfo?.user">
+  <a v-show="userInfo?.user" class="btn btn-secondary ms-2" :href="logoutURL()">
     <svg class="octicon">
       <use xlink:href="#sign-out"></use>
     </svg>

app/index.ts

@@ -8,15 +8,15 @@ import './vendor';
 import './vendor-leaflet';
 import './style.css';
 
-const params = [
-  'files',
-  'user',
-  'userLimit',
-  'userStart',
-  'userEnd',
-  'category',
-  'categoryDepth'
-].join('&');
+// const params = [
+//   'files',
+//   'user',
+//   'userLimit',
+//   'userStart',
+//   'userEnd',
+//   'category',
+//   'categoryDepth'
+// ].join('&');
 
 const router = createRouter({
   history: createWebHashHistory(),

package.json

@@ -55,9 +55,13 @@
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "angular-gettext-cli": "^1.2.0",
     "angular-gettext-tools": "^2.3.5",
     "eslint": "^8.48.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.20.1",
     "husky": "^7.0.4",
     "lint-staged": "^12.4.0",
     "prettier": "^3.0.3",