Add eslint and prettier

web/admin/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ["eslint:recommended", "@nuxt/eslint-config"],
+  rules: {
+    "vue/multi-word-component-names": "off",
+    "vue/html-self-closing": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/html-indent": "off",
+    "vue/html-closing-bracket-newline": "off",
+  },
+};

web/admin/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "trailingComma": "es5"
+}

web/admin/app.vue

@@ -34,7 +34,7 @@ async function login() {
 
 <template>
   <NuxtPage v-if="user" />
-  <div class="flex items-center justify-center fixed w-full h-full" v-else>
+  <div v-else class="flex items-center justify-center fixed w-full h-full">
     <div
       class="mx-auto bg-gray-50 border border-gray-400 dark:border-gray-700 dark:bg-gray-800 py-4 px-5 rounded-lg w-[400px] max-w-[80vw]"
     >
@@ -43,20 +43,20 @@ async function login() {
       <div class="flex flex-col mb-4">
         <label class="font-bold mb-1" for="name">Handle</label>
         <input
-          class="bg-white dark:bg-gray-900 rounded border border-gray-400 dark:border-gray-700 px-2 py-1"
           id="name"
-          type="text"
           v-model="identifier"
+          class="bg-white dark:bg-gray-900 rounded border border-gray-400 dark:border-gray-700 px-2 py-1"
+          type="text"
         />
       </div>
 
       <div class="flex flex-col mb-4">
         <label class="font-bold mb-1" for="password">App password</label>
         <input
-          class="bg-white dark:bg-gray-900 rounded border border-gray-400 dark:border-gray-700 px-2 py-1"
           id="password"
-          type="password"
           v-model="password"
+          class="bg-white dark:bg-gray-900 rounded border border-gray-400 dark:border-gray-700 px-2 py-1"
+          type="password"
         />
       </div>
 

web/admin/components/shared/bsky/description.vue

@@ -20,7 +20,11 @@ watch(() => props.description, updateDescription);
 </script>
 <template>
   <div>
-    <shared-bsky-text v-for="segment in segments" :segment="segment" />
+    <shared-bsky-text
+      v-for="(segment, index) in segments"
+      :key="index"
+      :segment="segment"
+    />
     <div v-if="!segments" class="whitespace-pre-line">
       {{ description }}
     </div>

web/admin/components/shared/bsky/text.vue

@@ -21,5 +21,5 @@ defineProps<{ segment: RichTextSegment }>();
   >
     {{ segment.text }}
   </nuxt-link>
-  <span class="whitespace-pre-line" v-else>{{ segment.text }}</span>
+  <span v-else class="whitespace-pre-line">{{ segment.text }}</span>
 </template>

web/admin/components/user-card.vue

@@ -75,7 +75,7 @@ await loadProfile();
       </button>
     </div>
   </shared-card>
-  <shared-card class="bg-red-200 dark:bg-red-700" v-else>
+  <shared-card v-else class="bg-red-200 dark:bg-red-700">
     Profile with did {{ did }} was not found.
   </shared-card>
 </template>

web/admin/package.json

@@ -10,9 +10,15 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
+    "@nuxt/eslint-config": "^0.1.1",
     "@nuxtjs/tailwindcss": "^6.8.0",
     "@types/node": "^18.16.19",
-    "nuxt": "^3.6.3"
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-vue": "^9.15.1",
+    "nuxt": "^3.6.3",
+    "prettier": "^2.8.0"
   },
   "dependencies": {
     "@atproto/api": "^0.4.0",

web/admin/pages/index.vue

@@ -41,8 +41,6 @@ await nextActor();
       @accept="accept"
       @reject="reject"
     />
-    <shared-card v-else>
-      No user is in the queue.
-    </shared-card>
+    <shared-card v-else> No user is in the queue. </shared-card>
   </div>
 </template>