chore(web): Sort imports

.pre-commit-config.yaml

@@ -7,19 +7,14 @@ repos:
         args: [--fix]
       - id: go-test-mod
 
-  - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.19.0
-    hooks:
-      - id: eslint
-        files: '^web'
-        types: []
-        types_or: [javascript, vue]
-        args:
-          - --config=web/eslint.config.js
-          - --fix
-
   - repo: local
     hooks:
+      - id: eslint
+        name: eslint
+        entry: npm --prefix web run lint
+        language: system
+        files: ^web
+        pass_filenames: false
       - id: usage-docs
         name: usage-docs
         entry: go run ./internal/generate/docs

web/.prettierrc.json

@@ -1,8 +1,11 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "semi": true,
   "tabWidth": 2,
   "singleQuote": false,
   "printWidth": 100,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "importOrderSortSpecifiers": true,
+  "importOrder": ["<THIRD_PARTY_MODULES>", "^\\.\\.?", "^~icons"]
 }

web/eslint.config.js

@@ -1,7 +1,7 @@
-import globals from "globals";
 import pluginJs from "@eslint/js";
-import pluginVue from "eslint-plugin-vue";
 import pluginPrettier from "eslint-plugin-prettier/recommended";
+import pluginVue from "eslint-plugin-vue";
+import globals from "globals";
 
 export default [
   { languageOptions: { globals: globals.browser } },

web/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@eslint/js": "9.19.0",
+    "@trivago/prettier-plugin-sort-imports": "5.2.1",
     "@vue/eslint-config-prettier": "10.2.0",
     "eslint": "9.19.0",
     "eslint-config-prettier": "10.0.1",

web/src/components/GameView.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
-import MenuButton from "./MenuButton.vue";
-import SettingsMenu from "./SettingsMenu.vue";
+import { plausible } from "../plugins/plausible.js";
 import {
   exitEvent,
   nameEvent,
@@ -12,7 +11,8 @@ import {
   newSaveStateEvent,
   readyEvent,
 } from "../util/events";
-import { plausible } from "../plugins/plausible.js";
+import MenuButton from "./MenuButton.vue";
+import SettingsMenu from "./SettingsMenu.vue";
 
 const showSettings = ref(true);
 const name = ref("");

web/src/components/SettingsMenu.vue

@@ -1,15 +1,15 @@
 <script setup>
+import { ref } from "vue";
+import GonesButton from "./GonesButton.vue";
+import KeyTable from "./KeyTable.vue";
+import IconHeading from "~icons/gones/heading?width=8em&height=2.5em";
+import IconLogo from "~icons/gones/icon";
 import IconClose from "~icons/material-symbols/close-rounded";
 import IconOpen from "~icons/material-symbols/folder-open-rounded";
+import IconLoad from "~icons/material-symbols/restore-page-rounded";
+import IconSave from "~icons/material-symbols/save-rounded";
 import IconStop from "~icons/material-symbols/stop-rounded";
 import IconGithub from "~icons/simple-icons/github";
-import IconSave from "~icons/material-symbols/save-rounded";
-import IconLoad from "~icons/material-symbols/restore-page-rounded";
-import IconLogo from "~icons/gones/icon";
-import IconHeading from "~icons/gones/heading?width=8em&height=2.5em";
-import KeyTable from "./KeyTable.vue";
-import { ref } from "vue";
-import GonesButton from "./GonesButton.vue";
 
 defineProps({
   modelValue: {

web/src/components/UpdateAlert.vue

@@ -32,9 +32,9 @@
 </template>
 
 <script setup>
-import IconRefreshCw from "~icons/material-symbols/refresh-rounded";
-import IconClose from "~icons/material-symbols/close-rounded";
 import { onMounted, ref, watch } from "vue";
+import IconClose from "~icons/material-symbols/close-rounded";
+import IconRefreshCw from "~icons/material-symbols/refresh-rounded";
 
 const updateSW = ref(undefined);
 const offlineReady = ref(false);

web/src/main.js

@@ -1,5 +1,5 @@
-import "./plugins/plausible";
 import { createApp } from "vue";
 import App from "./App.vue";
+import "./plugins/plausible";
 
 createApp(App).mount("#app");

web/src/scripts/game_frame.js

@@ -1,7 +1,6 @@
-import "./wasm_exec";
 import wasmUrl from "../assets/gones.wasm?url";
-import { waitForElement } from "../util/element";
 import { dbGet, dbPut } from "../plugins/db";
+import { waitForElement } from "../util/element";
 import {
   exitEvent,
   loadStateEvent,
@@ -11,6 +10,7 @@ import {
   playEvent,
   saveStateEvent,
 } from "../util/events";
+import "./wasm_exec";
 
 // Polyfill
 if (!WebAssembly.instantiateStreaming) {

web/vite.config.js

@@ -1,10 +1,10 @@
-import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import Icons from "unplugin-icons/vite";
-import { promises as fs } from "node:fs";
-import { VitePWA } from "vite-plugin-pwa";
 import autoprefixer from "autoprefixer";
+import { promises as fs } from "node:fs";
 import tailwindcss from "tailwindcss";
+import Icons from "unplugin-icons/vite";
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({