🚨 Update lint config

.eslintrc.cjs

@@ -3,26 +3,24 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
   root: true,
+  env: {
+    browser: true,
+  },
   extends: [
-    "google",
     "plugin:vue/vue3-recommended",
     "eslint:recommended",
-    "@vue/eslint-config-prettier",
+    "@vue/eslint-config-prettier/skip-formatting",
+    "plugin:vuetify/base",
+    "prettier",
+    "plugin:prettier/recommended",
     "./.eslintrc-auto-import.json",
   ],
   rules: {
-    "object-curly-spacing": ["error", "always"],
-    "require-jsdoc": "off",
-    indent: ["error", 2, { SwitchCase: 1 }],
-    "no-unused-vars": [
-      "error",
-      { varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
-    ],
-    "valid-jsdoc": "off",
-    "new-cap": "off",
+    "no-unused-vars": ["error", { varsIgnorePattern: "^_", argsIgnorePattern: "^_" }],
     "vue/no-template-shadow": "off",
   },
   parserOptions: {
-    ecmaVersion: "latest",
+    sourceType: "module",
   },
+  ignorePatterns: ["auto-imports.d.ts", "components.d.ts"],
 };

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "printWidth": 100,
+  "trailingComma": "all"
+}

components.d.ts

@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     GitHubButton: typeof import('./src/components/GitHubButton.vue')['default']
     InteractiveConverter: typeof import('./src/components/InteractiveConverter.vue')['default']

package.json

@@ -7,7 +7,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "watch": "vite build --mode=dev --watch",
-    "lint": "eslint --ext .js,.vue --fix src"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier . --write --ignore-path .gitignore"
   },
   "dependencies": {
     "@mdi/js": "7.2.96",
@@ -29,8 +30,8 @@
     "@rushstack/eslint-patch": "1.3.2",
     "@vue/eslint-config-prettier": "7.1.0",
     "eslint": "8.43.0",
-    "eslint-config-google": "0.14.0",
     "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-vue": "9.14.1",
     "eslint-plugin-vuetify": "2.0.2",
     "prettier": "2.8.8",

src/App.vue

@@ -4,7 +4,7 @@
       >Skip to main content</v-btn
     >
 
-    <v-app-bar app theme="dark" color="primary">
+    <v-app-bar theme="dark" color="primary">
       <v-btn to="/" class="text-body-2 text-none px-2" size="x-large">
         <template #prepend>
           <img alt="Mnemonic Ninja Logo" :src="LogoIcon" style="height: 42px" />

src/components/InteractiveConverter.vue

@@ -20,7 +20,6 @@
         <v-col>
           <v-text-field
             v-model="query"
-            rounded
             variant="outlined"
             clearable
             label="Query"
@@ -75,7 +74,7 @@ const { query, pairs, result, valid, loading, updateUrl } = useQueryConverter(
   "number",
   props,
   emit,
-  true
+  true,
 );
 
 const phrase = computed(() => {

src/components/InteractiveResult.vue

@@ -22,7 +22,6 @@
         <v-text-field
           :model-value="modelValue"
           variant="outlined"
-          rounded
           readonly
           label="Phrase"
           @focus="$event.target.select()"
@@ -40,7 +39,7 @@
         </v-text-field>
       </v-col>
     </v-row>
-    <v-snackbar v-model="showCopiedSnackbar" timeout="5000" bottom class="pb-14 pb-md-0">
+    <v-snackbar v-model="showCopiedSnackbar" timeout="5000" location="bottom" class="pb-14 pb-md-0">
       Copied to clipboard.
     </v-snackbar>
   </v-col>

src/components/InteractiveToolbar.vue

@@ -13,7 +13,7 @@
     <v-col>
       <v-tooltip v-for="(pair, key) in pairs" :key="key" location="top" :aria-label="pair.number">
         <template #activator="{ props }">
-          <v-chip v-bind="props" class="ma-1" closable close @click:close="emit('go-back-to', key)">
+          <v-chip v-bind="props" class="ma-1" closable @click:close="emit('go-back-to', key)">
             {{ pair.word }}
           </v-chip>
         </template>

src/components/UpdateSnackbar.vue

@@ -2,7 +2,7 @@
   <v-snackbar
     :model-value="offlineReady || needRefresh"
     :timeout="needRefresh ? -1 : 5000"
-    bottom
+    location="bottom"
     class="mb-16 mb-md-2"
     theme="light"
   >

src/composables/query_converter.js

@@ -34,7 +34,7 @@ export const useQueryConverter = (type, props, emit, usePairs = false) => {
         }
       }
     },
-    { immediate: true, flush: "post" }
+    { immediate: true, flush: "post" },
   );
 
   const buildQueryParams = () => {
@@ -66,7 +66,7 @@ export const useQueryConverter = (type, props, emit, usePairs = false) => {
       if (props.isActive) {
         return updateUrl();
       }
-    }, 200)
+    }, 200),
   );
 
   const { loading, lookupWordlist } = useConversionApi(type);

src/data/rules.js

@@ -25,7 +25,7 @@ export default {
         "<i>Zero</i> begins with <i>z</i>.",
         "Upper case <i>S</i> and <i>Z</i>, as well as lower case <i>s</i> and <i>z</i>, have <i>zero</i> vertical strokes each, as with the number <i>0</i>.",
         'The alveolar fricatives /s/ and /z/ form a <a href="https://en.wikipedia.org/wiki/Voice_(phonetics)" target="_blank">voiceless and voiced pair</a>.',
-      ]
+      ],
     ),
     new Rule(
       "1",
@@ -34,15 +34,15 @@ export default {
       [
         "Upper case <i>T</i> and <i>D</i>, as well as lower case <i>t</i> and <i>d</i> have one vertical stroke each, as with the number <i>1</i>.",
         "The alveolar stops /t/ and /d/ form a voiceless and voiced pair, as do the similar-sounding dental fricatives /θ/ and /ð/, though some variant systems may omit the latter pair.",
-      ]
+      ],
     ),
     new Rule(
       "2",
       ["/n/"],
       ["<i>n</i>"],
       [
         'Upper case <i>N</i> and lower case <i>n</i> each have <i>two</i> vertical strokes and <i>two</i> points on the <a href="https://en.wikipedia.org/wiki/Baseline_(typography)" target="_blank">baseline</a>.',
-      ]
+      ],
     ),
     new Rule(
       "3",
@@ -51,13 +51,13 @@ export default {
       [
         "Lower case <i>m</i> has <i>three</i> vertical strokes.",
         "Both upper case <i>M</i> and lower case <i>m</i> each have <i>three</i> points on the baseline and look like the number <i>3</i> on its side.",
-      ]
+      ],
     ),
     new Rule(
       "4",
       ["/r/"],
       ["<i>r</i>,", "<i>l</i> (in <i>colonel</i>)"],
-      ["<i>Four</i> ends with <i>r</i> (and /r/ in rhotic accents)."]
+      ["<i>Four</i> ends with <i>r</i> (and /r/ in rhotic accents)."],
     ),
     new Rule(
       "5",
@@ -66,7 +66,7 @@ export default {
       [
         '<i>L</i> is the <a href="https://en.wikipedia.org/wiki/Roman_number" target="_blank">Roman number</a> for <i>5</i>0.',
         "Among the <i>five</i> digits of one's <i>l</i>eft hand, the thumb and index fingers also form an <i>L</i>",
-      ]
+      ],
     ),
     new Rule(
       "6",
@@ -91,7 +91,7 @@ export default {
         'In some <a href="https://en.wikipedia.org/wiki/Serif" target="_blank">serif</a> fonts, upper case <i>CH</i>, <i>SH</i> and <i>ZH</i> each have <i>six</i> serifs.',
         "The postalveolar affricates /tʃ/ and /dʒ/ form a voiceless and voiced pair, as do the similar-sounding postalveolar fricatives /ʃ/ and /ʒ/.",
         "<i>CH</i>urch has six letters.",
-      ]
+      ],
     ),
     new Rule(
       "7",
@@ -102,7 +102,7 @@ export default {
         "In some fonts, the lower-right part of the upper case <i>G</i> looks like a <i>7</i>.",
         "<i>G</i> is also the <i>7</i>th letter of the alphabet.",
         "The velar stops /k/ and /g/ form a voiceless and voiced pair.",
-      ]
+      ],
     ),
     new Rule(
       "8",
@@ -111,7 +111,7 @@ export default {
       [
         "Lower case script <i>f</i>, which tends to have an upper and lower loop, looks like a <i>f</i>igure-<i>8</i>.",
         "The labiodental fricatives /f/ and /v/ form a voiceless and voiced pair.",
-      ]
+      ],
     ),
     new Rule(
       "9",
@@ -121,7 +121,7 @@ export default {
         "Upper case <i>P</i> and lower case <i>p</i> look like the number <i>9</i> flipped horizontally.",
         "Lower case <i>b</i> looks like the number <i>9</i> turned 180°.",
         "The labial stops /p/ and /b/ form a voiceless and voiced pair.",
-      ]
+      ],
     ),
     new Rule(
       "Unassigned",
@@ -144,7 +144,7 @@ export default {
       ],
       [
         '<a href="https://en.wikipedia.org/wiki/Vowel" target="_blank">Vowel</a> sounds, <a href="https://en.wikipedia.org/wiki/Semivowel" target="_blank">semivowels</a> (/j/ and /w/) and /h/ do not correspond to any number. They can appear anywhere in a word without changing its number value.',
-      ]
+      ],
     ),
     new Rule(
       "(2, 27 or 7)",
@@ -158,7 +158,7 @@ export default {
       ],
       [
         "Variant systems differ about whether /ŋ/ should encode <i>2</i> and classified together with /n/, <i>7</i> and classified together with /k/ and /g/ or even <i>27</i> (e.g. <i>ring</i> could be <i>42</i>, <i>47</i> or <i>427</i>). When a /k/ and /g/ is pronounced separately after the /ŋ/, variant systems that chose /ŋ/ to be <i>27</i> also disagree if an extra <i>7</i> should be written (e.g. finger could be <i>8274</i> or <i>82774</i>, or if /ŋ/ is chosen to be <i>7</i>, <i>8774</i>).",
-      ]
+      ],
     ),
   ],
 };

src/data/wordlist.js

@@ -16,7 +16,7 @@ const load = async () => {
   }
   timeTaken = performance.now() - timeTaken;
   console.info(
-    `Loaded ${wordlist.length.toLocaleString()} words in ${timeTaken.toLocaleString()}ms`
+    `Loaded ${wordlist.length.toLocaleString()} words in ${timeTaken.toLocaleString()}ms`,
   );
 };
 

src/views/ConvertersPage.vue

@@ -91,6 +91,6 @@ watch(
       currentTab.value = Object.values(tabs.value).findIndex((e) => e.slug === val);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>