From 12a658da5943f264eaf1bd123987ee021577b423 Mon Sep 17 00:00:00 2001
From: Gabe Cook <gabe565@gmail.com>
Date: Sun, 18 Jun 2023 03:40:22 -0500
Subject: [PATCH] :rotating_light: Update lint config

---
 .eslintrc.cjs                           | 22 ++++++++++------------
 .prettierrc.json                        |  8 ++++++++
 babel.config.js                         |  3 ---
 components.d.ts                         |  4 +---
 package-lock.json                       | 14 +-------------
 package.json                            |  5 +++--
 src/App.vue                             |  2 +-
 src/components/InteractiveConverter.vue |  3 +--
 src/components/InteractiveResult.vue    |  3 +--
 src/components/InteractiveToolbar.vue   |  2 +-
 src/components/UpdateSnackbar.vue       |  2 +-
 src/composables/query_converter.js      |  4 ++--
 src/data/rules.js                       | 24 ++++++++++++------------
 src/data/wordlist.js                    |  2 +-
 src/views/ConvertersPage.vue            |  2 +-
 15 files changed, 44 insertions(+), 56 deletions(-)
 create mode 100644 .prettierrc.json
 delete mode 100644 babel.config.js

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 24554c13..13419391 100644
--- a/.eslintrc.cjs
+++ b/.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"],
 };
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..75fe0614
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "printWidth": 100,
+  "trailingComma": "all"
+}
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index 162a3ea9..00000000
--- a/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
diff --git a/components.d.ts b/components.d.ts
index 18f61335..3c974cbe 100644
--- a/components.d.ts
+++ b/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']
diff --git a/package-lock.json b/package-lock.json
index 78f08a4c..c63d04a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,8 +27,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",
@@ -3346,18 +3346,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-config-google": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-google/-/eslint-config-google-0.14.0.tgz",
-      "integrity": "sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "peerDependencies": {
-        "eslint": ">=5.16.0"
-      }
-    },
     "node_modules/eslint-config-prettier": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
diff --git a/package.json b/package.json
index 77c28d9c..6c64ca4c 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index d5d57e5a..dda00eef 100644
--- a/src/App.vue
+++ b/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" />
diff --git a/src/components/InteractiveConverter.vue b/src/components/InteractiveConverter.vue
index a52883c6..e33693b0 100644
--- a/src/components/InteractiveConverter.vue
+++ b/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(() => {
diff --git a/src/components/InteractiveResult.vue b/src/components/InteractiveResult.vue
index dec6f176..a4c4506b 100644
--- a/src/components/InteractiveResult.vue
+++ b/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>
diff --git a/src/components/InteractiveToolbar.vue b/src/components/InteractiveToolbar.vue
index 89f3720e..b62913df 100644
--- a/src/components/InteractiveToolbar.vue
+++ b/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>
diff --git a/src/components/UpdateSnackbar.vue b/src/components/UpdateSnackbar.vue
index 2d4bd895..d3b83a54 100644
--- a/src/components/UpdateSnackbar.vue
+++ b/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"
   >
diff --git a/src/composables/query_converter.js b/src/composables/query_converter.js
index 2d0a5812..7d88ed81 100644
--- a/src/composables/query_converter.js
+++ b/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);
diff --git a/src/data/rules.js b/src/data/rules.js
index 85ca5498..86516455 100644
--- a/src/data/rules.js
+++ b/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,7 +34,7 @@ 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",
@@ -42,7 +42,7 @@ export default {
       ["<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>).",
-      ]
+      ],
     ),
   ],
 };
diff --git a/src/data/wordlist.js b/src/data/wordlist.js
index 7b3c7b37..c92f4046 100644
--- a/src/data/wordlist.js
+++ b/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`,
   );
 };
 
diff --git a/src/views/ConvertersPage.vue b/src/views/ConvertersPage.vue
index 1b44fc2c..be62f274 100644
--- a/src/views/ConvertersPage.vue
+++ b/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>