chore(lint): add eslint #28

.eslintrc

@@ -0,0 +1,33 @@
+{
+  "root": true,
+  "extends": ["@nuxtjs/eslint-config-typescript"],
+  "ignorePatterns": ["queries/*.query.ts"],
+  "rules": {
+    "indent": ["error", 4],
+    "vue/html-indent": ["error", 4],
+
+    "quotes": ["error", "double"],
+
+    "comma-dangle": ["error", "always-multiline"],
+
+    "semi": ["error", "always"],
+
+    "space-before-function-paren": ["error", {
+      "anonymous": "always",
+      "named": "never",
+      "asyncArrow": "always"
+    }],
+
+    // This rule is silly...
+    "vue/multi-word-component-names": ["off"],
+
+    // TODO: Only disable for `<NuxtLink />`
+    "vue/singleline-html-element-content-newline": ["off"],
+
+    // TODO: Fix `default` prop usage
+    "vue/no-parsing-error": ["off"],
+
+    // TODO: Fix rule in typescript generics
+    "func-call-spacing": ["off"]
+  }
+}

app.vue

@@ -16,8 +16,8 @@ import { darkTheme } from "naive-ui";
 useHead({
     titleTemplate: (pageName) => {
         return pageName
-        ? `${pageName} - Reservoir`
-        : "Reservoir";
+            ? `${pageName} - Reservoir`
+            : "Reservoir";
     },
 });
 </script>

components/ErrorDisplay.vue

@@ -1,7 +1,7 @@
 <template>
     <NResult status="error" :title="title ? title : 'Error'" :description="description">
-        <template #footer v-if="details">
-            <NButton @click="viewDetails = !viewDetails" type="error" ghost>
+        <template v-if="details" #footer>
+            <NButton type="error" ghost @click="viewDetails = !viewDetails">
                 {{ viewDetails ? "Hide error details" : "Show error details" }}
             </NButton>
 

components/SmartBreadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
     <NBreadcrumb>
         <!-- href combines the `hrefPart`s of current and previous routes -->
-        <NBreadcrumbItem v-for="partIdx in routes.length" :href="routes.slice(0, partIdx).map(x => x[1]).join('')">
+        <NBreadcrumbItem v-for="partIdx in routes.length" :key="partIdx" :href="routes.slice(0, partIdx).map(x => x[1]).join('')">
             {{ routes[partIdx - 1][0] }}
         </NBreadcrumbItem>
     </NBreadcrumb>

components/edit/drawer.vue

@@ -1,5 +1,5 @@
 <template>
-    <NDrawer :show="show" @update:show="x => $emit('update:show', x)" :default-width="502" resizable>
+    <NDrawer :show="show" :default-width="502" resizable @update:show="x => $emit('update:show', x)">
         <NDrawerContent :title="title" closable>
             <slot />
 

components/edit/field/country-leaders.vue

@@ -1,7 +1,14 @@
 <template>
     <NFormItem :label="label" :show-label="label != undefined">
-        <NSelect v-model:value="value" :options="options" :loading="pending" multiple filterable clearable>
-            <template #action v-if="error">
+        <NSelect
+            v-model:value="value"
+            :options="options"
+            :loading="pending"
+            multiple
+            filterable
+            clearable
+        >
+            <template v-if="error" #action>
                 <NAlert title="Error fetching members" type="error">
                     <code>{{ error }}</code>
                 </NAlert>
@@ -40,8 +47,8 @@ watch(value, emitInput);
 
 function emitInput() {
     // Check that the lengths of both arrays are equal and that they contain the same values
-    const isEqual = value.value.length === default_.value.length
-        && value.value.every(i => default_.value.includes(i));
+    const isEqual = value.value.length === default_.value.length &&
+        value.value.every(i => default_.value.includes(i));
 
     if (isEqual) {
         // No change, emit undefined

components/edit/field/num.vue

@@ -1,8 +1,8 @@
 <template>
     <NFormItem :label="label" :show-label="label != undefined" :required="!optional">
-        <NSwitch v-if="optional" v-model:value="enabled" @update:value="emitInput" style="margin-right: 1rem" />
+        <NSwitch v-if="optional" v-model:value="enabled" style="margin-right: 1rem" @update:value="emitInput" />
         <NInputNumber v-model:value="value" :default-value="default" :disabled="!enabled" :placeholder="defaultAsString" :precision="precision">
-            <template #suffix v-if="suffix">{{ suffix }}</template>
+            <template v-if="suffix" #suffix>{{ suffix }}</template>
         </NInputNumber>
     </NFormItem>
 </template>
@@ -53,15 +53,13 @@ function emitInput() {
             // Emit null, the switch is disabled
             emit("input:optional", null);
         }
+    // If the value is different from the default
+    } else if (value.value !== props.default) {
+        // Emit new value
+        emit("input:required", value.value);
     } else {
-        // If the value is different from the default
-        if (value.value !== props.default) {
-            // Emit new value
-            emit("input:required", value.value);
-        } else {
-            // Emit undefined, no change
-            emit("input:required", undefined);
-        }
+        // Emit undefined, no change
+        emit("input:required", undefined);
     }
 }
 </script>

components/edit/field/text.vue

@@ -1,7 +1,16 @@
 <template>
     <NFormItem :label="label" :show-label="label != undefined" :required="!optional">
-        <NSwitch v-if="optional" v-model:value="enabled" @update:value="emitInput" style="margin-right: 1rem" />
-        <NInput @input="emitInput" v-model:value="value" :default-value="default" :disabled="!enabled" :type="type" :maxlength="maxlength" :show-count="maxlength !== undefined" clearable />
+        <NSwitch v-if="optional" v-model:value="enabled" style="margin-right: 1rem" @update:value="emitInput" />
+        <NInput
+            v-model:value="value"
+            :default-value="default"
+            :disabled="!enabled"
+            :type="type"
+            :maxlength="maxlength"
+            :show-count="maxlength !== undefined"
+            clearable
+            @input="emitInput"
+        />
     </NFormItem>
 </template>
 
@@ -22,7 +31,7 @@ const emit = defineEmits<{
 // Coerce null to empty string
 const value = ref(props.default ? props.default : "");
 
-// If optional, enable if default is not null, else always be enabled 
+// If optional, enable if default is not null, else always be enabled
 const enabled = ref(props.optional ? props.default !== null : true);
 
 // Default type to "text"
@@ -45,15 +54,13 @@ function emitInput() {
             // Emit null, the switch is disabled
             emit("input:optional", null);
         }
+    // If the value is different from the default
+    } else if (value.value !== props.default) {
+        // Emit the new value
+        emit("input:required", value.value);
     } else {
-        // If the value is different from the default
-        if (value.value !== props.default) {
-            // Emit the new value
-            emit("input:required", value.value);
-        } else {
-            // Emit undefined, no change
-            emit("input:required", undefined);
-        }
+        // Emit undefined, no change
+        emit("input:required", undefined);
     }
 }
 </script>

components/home/CountryList.vue

@@ -9,7 +9,7 @@
             <ErrorDisplay v-if="error" description="Error fetching countries." :details="error" style="margin: 1rem 0" />
 
             <!-- Else if more than 0 countries -->
-            <NListItem v-else-if="data!.total > 0" v-for="country in data?.countries">
+            <NListItem v-for="country in data?.countries" v-else-if="data!.total > 0" :key="country.id">
                 <template #prefix>
                     <NText type="success" strong>{{ country.name }}</NText>
                 </template>

components/home/IncomeDistributor.vue

@@ -4,8 +4,8 @@
     </NButton>
     <NCard v-else title="Are you sure?" embedded>
         <NButtonGroup vertical>
-            <NButton @click="async () => distributeIncome()" type="success" ghost :loading="pendingDistribution">Yes, distribute income</NButton>
-            <NButton @click="confirmIncome = false; pendingDistribution = false" type="error" ghost>No, don't do it</NButton>
+            <NButton type="success" ghost :loading="pendingDistribution" @click="async () => distributeIncome()">Yes, distribute income</NButton>
+            <NButton type="error" ghost @click="confirmIncome = false; pendingDistribution = false">No, don't do it</NButton>
         </NButtonGroup>
     </NCard>
 </template>
@@ -32,9 +32,6 @@ async function distributeIncome() {
             duration: 5000,
             closable: true,
         });
-
-        // Purposefully not giving error.value, due to less readable output.
-        console.error("An error occured while distributing income.", error);
     } else {
         message.success(`Distributed income to ${data.value!.included.length} countries.`);
     }

components/home/MemberList.vue

@@ -7,7 +7,7 @@
 
             <ErrorDisplay v-if="error" description="Error fetching members." :details="error" style="margin: 1rem 0" />
 
-            <NListItem v-else-if="data!.total > 0" v-for="member in data?.members">
+            <NListItem v-for="member in data?.members" v-else-if="data!.total > 0" :key="member.id">
                 <template #prefix>
                     {{ member.name }}
                 </template>

components/new/CountryForm.vue

@@ -15,7 +15,7 @@
                 </NSelect>
             </NFormItem>
 
-            <NButton @click="async () => await createCountry()" :loading="loading">Create</NButton>
+            <NButton :loading="loading" @click="async () => await createCountry()">Create</NButton>
         </NForm>
     </NCard>
 </template>
@@ -28,6 +28,7 @@ const { data, pending, refresh, error } = await useLazyFetch("/api/members", {
 });
 
 // Export refresh function to be accessible from template refs
+// eslint-disable-next-line vue/no-expose-after-await
 defineExpose({
     refresh,
 });
@@ -39,10 +40,12 @@ const form = reactive<{
 
 const loading = ref(false);
 
-const membersOptions = computed(() => data.value ? data.value.members.map(x => ({
-    label: x.name,
-    value: x.id,
-})) : []);
+const membersOptions = computed(() => data.value
+    ? data.value.members.map(x => ({
+        label: x.name,
+        value: x.id,
+    }))
+    : []);
 
 async function createCountry() {
     loading.value = true;

components/new/MemberForm.vue

@@ -9,7 +9,7 @@
                 <NInput v-model:value="form.ig_name" clearable />
             </NFormItem>
 
-            <NButton @click="async () => await createMember()" :loading="loading">Create</NButton>
+            <NButton :loading="loading" @click="async () => await createMember()">Create</NButton>
         </NForm>
     </NCard>
 </template>
@@ -34,7 +34,7 @@ async function createMember() {
     }
 
     // Replace empty string with undefined
-    if (!form.ig_name) form.ig_name = undefined;
+    if (!form.ig_name) { form.ig_name = undefined; }
 
     // Send post request, catching any errors
     try {
@@ -45,7 +45,7 @@ async function createMember() {
 
         await navigateTo(`/member/${data.res.id}`);
     } catch {
-        message.error("Error creating member. Please see console for more information.")
+        message.error("Error creating member. Please see console for more information.");
     }
 
     loading.value = false;

components/utils/LeadersDisplay.vue

@@ -6,7 +6,7 @@
             Iterate over the index, ignoring the value
             See: https://vuejs.org/api/built-in-directives.html#v-for
         -->
-        <template v-for="(_, i) in leaders">
+        <template v-for="(_, i) in leaders" :key="leaders[i].id">
             <!-- Output name, concated with a comma if not the last item -->
             <NuxtLink :to="`/member/${leaders[i].id}`" :style="style">
                 {{ leaders[i].name }}

components/view/stat.vue

@@ -1,15 +1,15 @@
 <template>
     <NStatistic :label="label">
-        <template #prefix v-if="prefix">{{ prefix }}</template>
+        <template v-if="prefix" #prefix>{{ prefix }}</template>
 
         <!-- Wrap animation in NText if type is defined -->
         <NText v-if="type" :type="type">
-            <NNumberAnimation :to="to" :duration="DURATION" showSeparator />
+            <NNumberAnimation :to="to" :duration="DURATION" show-separator />
         </NText>
 
-        <NNumberAnimation v-else :to="to" :duration="DURATION" showSeparator />
+        <NNumberAnimation v-else :to="to" :duration="DURATION" show-separator />
 
-        <template #suffix v-if="suffix">{{ suffix }}</template>
+        <template v-if="suffix" #suffix>{{ suffix }}</template>
     </NStatistic>
 </template>
 

nuxt.config.ts

@@ -4,8 +4,12 @@ export default defineNuxtConfig({
         { path: "~/components" },
         { path: "~/components/utils", prefix: "U" },
     ],
+    eslint: {
+        lintOnStart: false,
+    },
     modules: [
         "@huntersofbook/naive-ui-nuxt",
+        "@nuxtjs/eslint-module",
     ],
     typescript: {
         shim: false,

package.json

@@ -7,13 +7,17 @@
     "clean": "nuxi clean && rm -rf queries/*.query.ts reservoir.tar.gz",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
+    "lint": "eslint .",
     "preview": "npm run build:query && nuxt preview",
     "postinstall": "nuxt prepare && npm run build:query"
   },
   "devDependencies": {
     "@edgedb/generate": "^0.3.1",
     "@huntersofbook/naive-ui-nuxt": "^1.1.0",
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxtjs/eslint-module": "^4.1.0",
     "edgedb": "^1.3.3",
+    "eslint": "^8.45.0",
     "nuxt": "^3.6.5"
   }
 }