style: Sort imports

.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"]
 }

eslint.config.js

@@ -1,8 +1,8 @@
-import globals from "globals";
 import pluginJs from "@eslint/js";
+import pluginPrettier from "eslint-plugin-prettier/recommended";
 import pluginVue from "eslint-plugin-vue";
 import pluginVuetify from "eslint-plugin-vuetify";
-import pluginPrettier from "eslint-plugin-prettier/recommended";
+import globals from "globals";
 
 export default [
   {

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@eslint/js": "9.17.0",
+    "@trivago/prettier-plugin-sort-imports": "5.2.0",
     "@vue/eslint-config-prettier": "10.1.0",
     "eslint": "9.17.0",
     "eslint-config-prettier": "9.1.0",

src/App.vue

@@ -62,12 +62,12 @@
 </template>
 
 <script setup>
-import LogoIcon from "~icons/mnemonic-ninja/logo";
+import { computed, onBeforeMount } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
-import { computed, onBeforeMount } from "vue";
-import UpdateSnackbar from "./components/UpdateSnackbar.vue";
 import GithubButton from "./components/NavButtons/GithubButton.vue";
+import UpdateSnackbar from "./components/UpdateSnackbar.vue";
+import LogoIcon from "~icons/mnemonic-ninja/logo";
 
 const { smAndDown: isMobile } = useDisplay();
 

src/components/InteractiveResult.vue

@@ -46,8 +46,8 @@
 </template>
 
 <script setup>
-import CopyIcon from "~icons/material-symbols/content-copy-rounded";
 import { nextTick, ref } from "vue";
+import CopyIcon from "~icons/material-symbols/content-copy-rounded";
 
 const props = defineProps({
   modelValue: {

src/components/InteractiveToolbar.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script setup>
-import ArrowLeftIcon from "~icons/material-symbols/chevron-left";
 import { ref } from "vue";
+import ArrowLeftIcon from "~icons/material-symbols/chevron-left";
 
 const props = defineProps({
   pairs: {

src/composables/conversion_api.js

@@ -1,4 +1,4 @@
-import { wordlist, loading } from "../data/wordlist";
+import { loading, wordlist } from "../data/wordlist";
 
 const types = {
   word: [0, 1],

src/composables/query_converter.js

@@ -1,8 +1,8 @@
+import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { useConversionApi } from "./conversion_api";
 import router from "../plugins/router";
 import { castArray, debounce } from "../util/helpers";
-import { computed, ref, watch } from "vue";
+import { useConversionApi } from "./conversion_api";
 
 export const castPair = (val) =>
   val.map((p) => {

src/data/rules.js

@@ -1,7 +1,7 @@
 import NumberIcon from "~icons/material-symbols/123-rounded";
-import SoundIcon from "~icons/material-symbols/sound-detection-loud-sound-rounded";
 import LetterIcon from "~icons/material-symbols/abc-rounded";
 import CommentIcon from "~icons/material-symbols/mode-comment-rounded";
+import SoundIcon from "~icons/material-symbols/sound-detection-loud-sound-rounded";
 
 class Rule {
   constructor(number, sounds, letters, comments) {

src/layouts/PageLayout.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script setup>
-import AppIcon from "~icons/mnemonic-ninja/logo";
 import { useDisplay } from "vuetify";
 import GithubButton from "../components/NavButtons/GithubButton.vue";
+import AppIcon from "~icons/mnemonic-ninja/logo";
 
 const { smAndDown: isMobile } = useDisplay();
 </script>

src/main.js

@@ -1,6 +1,6 @@
-import "./plugins/plausible";
 import { createApp } from "vue";
 import App from "./App.vue";
+import "./plugins/plausible";
 import router from "./plugins/router";
 import vuetify from "./plugins/vuetify";
 

src/plugins/router.js

@@ -1,8 +1,8 @@
+import { nextTick } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 import HomeIcon from "~icons/material-symbols/home-rounded";
-import SwapIcon from "~icons/material-symbols/swap-horizontal-circle-rounded";
 import InfoIcon from "~icons/material-symbols/info-rounded";
-import { nextTick } from "vue";
+import SwapIcon from "~icons/material-symbols/swap-horizontal-circle-rounded";
 
 const routes = [
   {

src/plugins/vuetify.js

@@ -1,8 +1,7 @@
 import { createVuetify } from "vuetify";
 import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
-import colors from "vuetify/util/colors";
-
 import "vuetify/styles";
+import colors from "vuetify/util/colors";
 
 export default createVuetify({
   icons: {

src/views/AboutPage.vue

@@ -130,9 +130,9 @@
 </template>
 
 <script setup>
+import RulesTable from "../components/RulesTable.vue";
+import PageLayout from "../layouts/PageLayout.vue";
 import RulesIcon from "~icons/material-symbols/checklist-rounded";
-import SecurityIcon from "~icons/material-symbols/shield-lock-rounded";
 import DevelopmentIcon from "~icons/material-symbols/code-rounded";
-import PageLayout from "../layouts/PageLayout.vue";
-import RulesTable from "../components/RulesTable.vue";
+import SecurityIcon from "~icons/material-symbols/shield-lock-rounded";
 </script>

src/views/HomePage.vue

@@ -40,8 +40,8 @@
 </template>
 
 <script setup>
-import SwapIcon from "~icons/material-symbols/swap-horizontal-circle-rounded";
 import PageLayout from "../layouts/PageLayout.vue";
+import SwapIcon from "~icons/material-symbols/swap-horizontal-circle-rounded";
 
 const converters = [
   {

src/views/InteractiveConverter.vue

@@ -56,13 +56,13 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
+import InteractiveResult from "../components/InteractiveResult.vue";
+import InteractiveToolbar from "../components/InteractiveToolbar.vue";
+import InteractiveWords from "../components/InteractiveWords.vue";
 import { useQueryConverter } from "../composables/query_converter.js";
 import { useQueryRules } from "../composables/query_rules.js";
 import ConvertersPage from "../layouts/ConvertersPage.vue";
-import InteractiveToolbar from "../components/InteractiveToolbar.vue";
-import InteractiveWords from "../components/InteractiveWords.vue";
-import { computed } from "vue";
-import InteractiveResult from "../components/InteractiveResult.vue";
 
 const props = defineProps({
   q: {

src/views/NumberConverter.vue

@@ -60,14 +60,14 @@
 </template>
 
 <script setup>
-import ArrowRightIcon from "~icons/material-symbols/chevron-right";
-import ArrowDownIcon from "~icons/material-symbols/keyboard-arrow-down";
-import LoadingIcon from "~icons/mdi/shuriken";
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
 import { useQueryConverter } from "../composables/query_converter.js";
 import { useQueryRules } from "../composables/query_rules.js";
-import { useDisplay } from "vuetify";
 import ConvertersPage from "../layouts/ConvertersPage.vue";
-import { computed } from "vue";
+import ArrowRightIcon from "~icons/material-symbols/chevron-right";
+import ArrowDownIcon from "~icons/material-symbols/keyboard-arrow-down";
+import LoadingIcon from "~icons/mdi/shuriken";
 
 const props = defineProps({
   q: {

src/views/WordConverter.vue

@@ -65,14 +65,14 @@
 </template>
 
 <script setup>
-import ArrowRightIcon from "~icons/material-symbols/chevron-right";
-import ArrowDownIcon from "~icons/material-symbols/keyboard-arrow-down";
-import LoadingIcon from "~icons/mdi/shuriken";
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
 import { useQueryConverter } from "../composables/query_converter.js";
 import { useQueryRules } from "../composables/query_rules.js";
-import { useDisplay } from "vuetify";
 import ConvertersPage from "../layouts/ConvertersPage.vue";
-import { computed } from "vue";
+import ArrowRightIcon from "~icons/material-symbols/chevron-right";
+import ArrowDownIcon from "~icons/material-symbols/keyboard-arrow-down";
+import LoadingIcon from "~icons/mdi/shuriken";
 
 const props = defineProps({
   q: {

vite.config.js

@@ -1,11 +1,11 @@
 import vue from "@vitejs/plugin-vue";
-import vuetify from "vite-plugin-vuetify";
+import autoprefixer from "autoprefixer";
+import { FileSystemIconLoader } from "unplugin-icons/loaders";
+import Icons from "unplugin-icons/vite";
 import { defineConfig } from "vite";
 import { VitePWA } from "vite-plugin-pwa";
-import Icons from "unplugin-icons/vite";
-import { FileSystemIconLoader } from "unplugin-icons/loaders";
+import vuetify from "vite-plugin-vuetify";
 import { CompileCmudict } from "./src/plugins/compile-cmudict/CompileCmudict";
-import autoprefixer from "autoprefixer";
 
 export default defineConfig({
   plugins: [