fix: enabling eslint on typescript and fixing all eslint issues

Author: technikhil314

components/RTStickyCopyButton.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="sticky top-0 text-right z-1">
     <button
-      @click="handleClick"
       class="absolute top-0 right-0 p-2 text-gray-800 transition-all transform rounded-full shadow  dark:text-gray-50 z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
-      v-bind:class="{
+      :class="{
         'bg-gray-100 dark:bg-gray-600': !copied,
         'bg-green-500': copied,
       }"
+      @click="handleClick"
     >
       <svg
         v-show="!copied"
@@ -44,7 +44,12 @@
 
 <script>
 export default {
-  props: ['clickHandler'],
+  props: {
+    clickHandler: {
+      type: Function,
+      default: () => {},
+    },
+  },
   data() {
     return {
       copied: false,

components/Toast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-[20px] top-24" id="toast">
+  <div id="toast" class="absolute right-[20px] top-24">
     <div
       class="
         absolute
@@ -13,7 +13,7 @@
         z-2
         w-72
       "
-      v-bind:class="{
+      :class="{
         '-translate-y-screen': !toastState.show,
         'translate-y-0': toastState.show,
         'bg-green-400 text-gray-800': toastState.theme === 'success',

components/navbar.vue

@@ -65,11 +65,11 @@
             @click="toggleDarkMode"
           >
             <svg
+              v-if="!darkMode"
               fill="none"
               stroke="currentColor"
               class="w-6 h-6"
               viewBox="0 0 24 24"
-              v-if="!darkMode"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
@@ -80,11 +80,11 @@
               ></path>
             </svg>
             <svg
+              v-if="darkMode"
               fill="none"
               class="w-6 h-6"
               stroke="currentColor"
               viewBox="0 0 24 24"
-              v-if="darkMode"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
@@ -152,7 +152,9 @@
 
 <script>
 export default {
-  props: ['showBackButton'],
+  props: {
+    showBackButton: Boolean,
+  },
   data() {
     return {
       darkMode: false,

helpers/utils.ts

@@ -9,7 +9,7 @@ export function undoUrlSafeBase64(_encoded: string) {
 }
 
 export function urlEncode(unencoded: string): string {
-  let encoded = globalThis.btoa(unencoded)
+  const encoded = globalThis.btoa(unencoded)
   return doUrlSafeBase64(encoded)
 }
 

package.json

@@ -8,10 +8,10 @@
     "build": "npm run clean && nuxt build",
     "start": "nuxt start",
     "generate": "npm run clean && nuxt generate",
-    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
+    "lint:jsts": "eslint --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
     "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
     "prepare": "husky install",
-    "lint": "npm run lint:js && npm run lint:style",
+    "lint": "npm run lint:jsts -- --fix && npm run lint:style",
     "test": "jest"
   },
   "engines": {

pages/diff.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="contents">
     <Navbar show-back-button="true">
-      <template v-slot:right>
+      <template #right>
         <button
           type="button"
-          @click="copyUrlToClipboard"
           class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
-          v-bind:class="{
+          :class="{
             'bg-blue-500 text-white': !copied,
             'bg-green-500 text-gray-800': copied,
           }"
+          @click="copyUrlToClipboard"
         >
-          <span class="inline-flex justify-center" v-show="copied">
+          <span v-show="copied" class="inline-flex justify-center">
             <svg
               class="inline-block w-6 h-6 ml-[-4px]"
               fill="none"
@@ -28,7 +28,7 @@
             </svg>
             <span class="hidden ml-2 md:inline-block">Copied</span>
           </span>
-          <span class="inline-flex justify-center" v-show="!copied">
+          <span v-show="!copied" class="inline-flex justify-center">
             <svg
               class="w-6 h-6"
               fill="none"
@@ -55,11 +55,11 @@
         <div
           class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
         >
-          <RTStickyCopyButton :clickHandler="copyTextToClipboard" />
+          <RTStickyCopyButton :click-handler="copyTextToClipboard" />
           <div
             v-for="(lineDiff, index) in lhsDiff"
             :key="index"
-            v-bind:class="{
+            :class="{
               'bg-red-100 dark:bg-yellow-700': lineDiff.includes('isModified'),
             }"
           >
@@ -69,11 +69,11 @@
         <div
           class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
         >
-          <RTStickyCopyButton :clickHandler="copyTextToClipboard" />
+          <RTStickyCopyButton :click-handler="copyTextToClipboard" />
           <div
             v-for="(lineDiff, index) in rhsDiff"
             :key="index"
-            v-bind:class="{
+            :class="{
               'bg-green-100 dark:bg-green-700': lineDiff.includes('isModified'),
             }"
           >
@@ -90,6 +90,13 @@ import pako from 'pako'
 import { undoUrlSafeBase64 } from '../helpers/utils'
 export default {
   layout: 'main',
+  data() {
+    return {
+      lhsDiff: this.lhsDiff,
+      rhsDiff: this.rhsDiff,
+      copied: false,
+    }
+  },
   mounted() {
     const _diff = this.$route.hash
     const gunzip = pako.ungzip(Buffer.from(undoUrlSafeBase64(_diff), 'base64'))
@@ -129,13 +136,6 @@ export default {
       `${`${maxLineCount}`.split('').length}ch`
     )
   },
-  data() {
-    return {
-      lhsDiff: this.lhsDiff,
-      rhsDiff: this.rhsDiff,
-      copied: false,
-    }
-  },
   methods: {
     putToClipboard(textToPut, toastContent) {
       navigator.clipboard.writeText(textToPut)

pages/index.vue

@@ -8,7 +8,7 @@
       <h2 class="w-full mb-2 text-center text-md">
         Don’t worry, We don’t store any of your data
       </h2>
-      <form @submit="checkForm" class="w-full h-full">
+      <form class="w-full h-full" @submit="checkForm">
         <div class="flex flex-wrap w-full h-full gap-4">
           <textarea
             id="lhs"

plugins/fart-remover.client.ts

@@ -21,11 +21,11 @@ declare module '@nuxt/types' {
 declare module 'vuex/types/index' {
   // this.$isDarkModeinside Vuex stores
   interface Store<S> {
-    $isDarkMode: boolean
+    $isDarkMode: boolean | S
   }
 }
 
-const myPlugin: Plugin = (context, inject) => {
+const myPlugin: Plugin = (_context, inject) => {
   inject('isDarkMode', isDarkModeCookie())
 }
 

store/toast.ts

@@ -1,4 +1,4 @@
-import { GetterTree, Store, MutationTree } from 'vuex'
+import { GetterTree, MutationTree, Store } from 'vuex/types'
 
 export const state = () => ({
   show: false,