chore: setup eslint for coalesce-vue and coalesce-vue-vuetify3

Author: ascott18

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "dotnet.defaultSolution": "Coalesce.slnx",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
   "editor.formatOnPaste": false,
   "editor.formatOnSave": true,
   "editor.formatOnType": true,

package-lock.json

@@ -11,10 +11,12 @@
     "@types/node": "^22.15.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/eslint-plugin": "^1.3.23",
     "@vue/eslint-config-typescript": "14.6.0",
     "@vue/test-utils": "~2.4.6",
     "cspell": "8.19.3",
     "eslint": "9.32.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.3",
     "eslint-plugin-vue": "10.5.0",
     "jsdom": "^26.1.0",

package.json

@@ -0,0 +1,72 @@
+import pluginVue from "eslint-plugin-vue";
+import vueTsEslintConfig from "@vue/eslint-config-typescript";
+import pluginVitest from "@vitest/eslint-plugin";
+import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
+export default [
+  {
+    name: "app/files-to-lint",
+    files: ["**/*.{ts,mts,tsx,vue}"],
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+        // or, in CommonJS, __dirname
+      },
+    },
+  },
+
+  {
+    name: "app/files-to-ignore",
+    ignores: ["dist/**", "**/*.g.ts", "**/coverage/**", "eslint.config.mjs"],
+  },
+
+  ...pluginVue.configs["flat/recommended"],
+  ...vueTsEslintConfig(),
+  {
+    ...pluginVitest.configs.recommended,
+    files: ["src/**/__tests__/*", "src/**/*.spec.*"],
+  },
+  eslintPluginPrettier,
+
+  {
+    rules: {
+      "prettier/prettier": [
+        "error",
+        {
+          endOfLine: "auto",
+        },
+      ],
+
+      "vue/multi-word-component-names": "off",
+      "vue/attribute-hyphenation": "off",
+      "vue/component-definition-name-casing": "off",
+      "vue/require-default-prop": "off", // Annoying and wrong about defineProps
+      "vue/no-template-shadow": ["error", { allow: ["props"] }],
+      "vue/no-mutating-props": ["error", { shallowOnly: true }],
+
+      "prefer-const": "error",
+      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+      "no-console": "off",
+      "no-undef": "off", // Redundant with Typescript
+
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          varsIgnorePattern:
+            // Allow unused `const props = defineProps` (if props are only used in the template of an SFC)
+            "^(props|mock|saveMock|_.*)$",
+          args: "none",
+        },
+      ],
+    },
+  },
+
+  {
+    name: "app/tsx-overrides",
+    files: ["**/*.tsx"],
+    rules: {
+      "@typescript-eslint/no-unused-expressions": "off",
+      "vitest/expect-expect": "off", // https://github.com/vitest-dev/eslint-plugin-vitest/issues/697
+    },
+  },
+];

src/coalesce-vue-vuetify3/.eslintrc.cjs

@@ -41,6 +41,8 @@
     "buildts": "tsc -p ./tsconfig.build-utils.json",
     "build-local-deps": "cd ../coalesce-vue && npm run build",
     "test": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "coverage": "vitest --coverage"
   },
   "dependencies": {

src/coalesce-vue-vuetify3/eslint.config.mjs

@@ -34,7 +34,7 @@
 
         <c-list-page class="c-admin-table-toolbar--page" :list="listVm" />
 
-        <template v-slot:extension>
+        <template #extension>
           <v-defaults-provider
             :defaults="{
               global: {
@@ -71,14 +71,14 @@
               <c-input
                 v-model="filter.state"
                 :for="listVm.$metadata.props.state"
-                @click:clear="$nextTick(() => (filter.state = ''))"
                 style="min-width: 210px; max-width: 210px"
+                @click:clear="$nextTick(() => (filter.state = ''))"
               />
 
               <c-select
                 v-if="'foreignKey' in userPropMeta"
-                :for="userPropMeta"
                 v-model:key-value="filter[userPropMeta.foreignKey.name]"
+                :for="userPropMeta"
                 clearable
                 style="width: 240px"
                 @click:clear="
@@ -146,8 +146,8 @@
                   />
                   <pre
                     :class="timeDiffClass(auditLog, items[index + 1])"
-                    v-text="timeDiff(auditLog, items[index + 1])"
                     title="Time delta from the preceding row"
+                    v-text="timeDiff(auditLog, items[index + 1])"
                   ></pre>
                 </td>
 
@@ -164,8 +164,8 @@
                   >
                   <div
                     v-if="auditLog.description"
-                    v-text="auditLog.description"
                     class="c-audit-logs--entry-desc text-grey"
+                    v-text="auditLog.description"
                   ></div>
                 </td>
 
@@ -221,8 +221,8 @@
                           {{ prop.oldValue }}
 
                           <span
-                            class="c-audit-logs--property-value-desc text-grey"
                             v-if="prop.oldValueDescription"
+                            class="c-audit-logs--property-value-desc text-grey"
                           >
                             ({{ prop.oldValueDescription }})
                           </span>
@@ -233,8 +233,8 @@
                           {{ prop.newValue }}
 
                           <span
-                            class="c-audit-logs--property-value-desc text-grey"
                             v-if="prop.newValueDescription"
+                            class="c-audit-logs--property-value-desc text-grey"
                           >
                             ({{ prop.newValueDescription }})
                           </span>
@@ -375,10 +375,10 @@ function timeDiff(current: AuditLogBase, older?: AuditLogBase) {
   const positive = ms >= 0;
   ms = Math.abs(ms);
 
-  var totalSec = ms / 1000;
-  var hours = Math.floor(totalSec / 3600);
-  var minutes = Math.floor((totalSec - hours * 3600) / 60);
-  var seconds = totalSec - hours * 3600 - minutes * 60;
+  const totalSec = ms / 1000;
+  const hours = Math.floor(totalSec / 3600);
+  const minutes = Math.floor((totalSec - hours * 3600) / 60);
+  const seconds = totalSec - hours * 3600 - minutes * 60;
 
   return (
     (positive ? "+" : "-") +

src/coalesce-vue-vuetify3/package.json

@@ -16,8 +16,8 @@
       <v-list-item
         v-for="item in creatableTypes"
         :key="item.metadata.name"
-        @click="emit('add', item.metadata, item.route!)"
         :title="item.metadata.displayName"
+        @click="emit('add', item.metadata, item.route!)"
       ></v-list-item>
     </v-list>
   </v-menu>

src/coalesce-vue-vuetify3/src/components/admin/c-admin-audit-log-page.vue

@@ -42,7 +42,7 @@ function render() {
 
   if (!meta) {
     throw Error(
-      "Provided model has no $metadata property, and no specific value was provided via the 'for' component prop to c-display."
+      "Provided model has no $metadata property, and no specific value was provided via the 'for' component prop to c-display.",
     );
   }
 
@@ -81,7 +81,7 @@ function render() {
           (((model as any)[narrowedMeta.name] as ViewModelCollection<any, any>)
             ?.$hasLoaded === false
             ? "View"
-            : "None")
+            : "None"),
       );
     }
 
@@ -95,7 +95,7 @@ function render() {
           {
             to: getRefNavRoute(router, model, meta),
           },
-          () => propDisplay(model, narrowedMeta) ?? fkValue
+          () => propDisplay(model, narrowedMeta) ?? fkValue,
         );
       }
     }
@@ -117,7 +117,7 @@ function render() {
             link.click();
           },
         },
-        h(CDisplay, { ...props })
+        h(CDisplay, { ...props }),
       );
     }
   }

src/coalesce-vue-vuetify3/src/components/admin/c-admin-create-btn.vue

@@ -28,7 +28,7 @@ import {
   HiddenAreas,
 } from "coalesce-vue";
 
-import { computed, watch, getCurrentInstance, onMounted } from "vue";
+import { computed, watch, getCurrentInstance } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { isPropReadOnly } from "../../util";
 import { copyParamsToNewViewModel } from "./util";
@@ -87,7 +87,7 @@ const pageTitle = computed(() => {
     return "Create - " + metadata.value.displayName;
   }
 
-  let display = viewModel ? modelDisplay(viewModel) : null;
+  const display = viewModel ? modelDisplay(viewModel) : null;
   if (!display) {
     return metadata.value.displayName;
   }