fix(web): Fix eslint config

gabe565 · May 13, 2024 · 8bdd99b · 8bdd99b
1 parent 6b5b99c
commit 8bdd99b
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 44 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -15,6 +15,7 @@ repos:
         types: []
         types_or: [javascript, vue]
         args:
+          - --config=web/eslint.config.js
           - --fix
 
   - repo: local

diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs
diff --git a/web/eslint.config.js b/web/eslint.config.js
@@ -0,0 +1,18 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
+import pluginPrettier from "eslint-plugin-prettier/recommended";
+
+export default [
+  { languageOptions: { globals: globals.browser } },
+  { ignores: ["dist", "**/wasm_exec.js"] },
+  pluginJs.configs.recommended,
+  ...pluginVue.configs["flat/recommended"],
+  pluginPrettier,
+  {
+    rules: {
+      "no-unused-vars": ["error", { varsIgnorePattern: "^_", argsIgnorePattern: "^_" }],
+      "vue/no-template-shadow": "off",
+    },
+  },
+];
diff --git a/web/game_frame/index.html b/web/game_frame/index.html
@@ -1,2 +1,2 @@
-<!DOCTYPE html>
+<!doctype html>
 <script type="module" src="../src/scripts/game_frame.js"></script>
diff --git a/web/index.html b/web/index.html
@@ -1,18 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GoNES</title>
-    <meta name="description" content="GoNES: An NES emulator written in Go.">
-    <meta name="author" content="Gabe Cook">
-    <meta name="keywords" content="nes, emulator, wasm, nintendo">
-    <meta property="og:title" content="GoNES">
-    <meta property="og:image" content="/images/thumb.png">
-    <meta property="og:description" content="GoNES: An NES emulator written in Go.">
-    <meta property="og:url" content="https://gones.gabe565.com/">
-    <meta property="og:type" content="website">
+    <meta name="description" content="GoNES: An NES emulator written in Go." />
+    <meta name="author" content="Gabe Cook" />
+    <meta name="keywords" content="nes, emulator, wasm, nintendo" />
+    <meta property="og:title" content="GoNES" />
+    <meta property="og:image" content="/images/thumb.png" />
+    <meta property="og:description" content="GoNES: An NES emulator written in Go." />
+    <meta property="og:url" content="https://gones.gabe565.com/" />
+    <meta property="og:type" content="website" />
     <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png" />

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --fix",
     "format": "prettier . --write --ignore-path .gitignore"
   },
   "dependencies": {
@@ -25,11 +25,14 @@
     "vue": "3.4.27"
   },
   "devDependencies": {
+    "@eslint/js": "9.2.0",
     "@rushstack/eslint-patch": "1.10.2",
     "@vue/eslint-config-prettier": "9.0.0",
     "eslint": "9.2.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-vue": "9.26.0",
+    "globals": "15.2.0",
     "prettier": "3.2.5"
   }
 }
diff --git a/web/src/components/GameView.vue b/web/src/components/GameView.vue
@@ -108,5 +108,5 @@ const loadState = () => {
     src="game_frame/index.html"
     class="w-full h-full overflow-hidden"
     title="Game"
-  ></iframe>
+  />
 </template>
diff --git a/web/src/components/KeyTable.vue b/web/src/components/KeyTable.vue
@@ -39,10 +39,13 @@ const keys = reactive({
             v-for="key in keyList"
             :key="key"
             class="px-1.5 py-0.5 m-0.5 text-xs font-semibold bg-gray-700 text-gray-100 border-gray-500 border border-b-2 rounded-lg"
-            >{{ key }}</kbd
           >
+            {{ key }}
+          </kbd>
+        </td>
+        <td class="text-sm">
+          {{ action }}
         </td>
-        <td class="text-sm">{{ action }}</td>
       </tr>
     </tbody>
   </table>

diff --git a/web/src/components/UpdateAlert.vue b/web/src/components/UpdateAlert.vue
@@ -6,9 +6,9 @@
       class="z-40 flex items-center absolute bottom-0 right-0 m-8 mb-md-2 bg-teal-700 border-b-4 border-teal-500 rounded-lg text-teal-100 px-4 py-3 shadow-md"
     >
       <span class="mx-1">
-        <template v-if="needRefresh"
-          >New content available, click on reload button to update.</template
-        >
+        <template v-if="needRefresh">
+          New content available, click on reload button to update.
+        </template>
         <template v-else>App ready to work offline</template>
       </span>
       <button