chore: update format, typo (#2641)

Co-authored-by: Haotian Zhang <haotian.zhang@shopee.com>

.vscode/settings.json

@@ -1,8 +1,15 @@
 {
   "cSpell.words": [
+    "Axios",
+    "consola",
     "Demi",
-    "Unsubscribable",
+    "esno",
     "iframes",
+    "iife",
+    "Pausable",
+    "Unref",
+    "Unsubscribable",
+    "vitepress",
     "vueuse"
   ],
   "prettier.enable": false,

packages/core/useIdle/demo.vue

@@ -13,7 +13,7 @@ const idledFor = computed(() =>
 
 <template>
   <note class="mb-2">
-    For demonstraction purpose, the idle timeout is set to <b>5s</b> in this
+    For demonstration purpose, the idle timeout is set to <b>5s</b> in this
     demo (default 1min).
   </note>
   <div class="mb-2">

packages/core/useInfiniteScroll/index.md

@@ -4,18 +4,17 @@ category: Sensors
 
 # useInfiniteScroll
 
-Infinite scrolling of the element. 
+Infinite scrolling of the element.
 
 ## Usage
 
-
 ```html
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
 import { useInfiniteScroll } from '@vueuse/core'
 
 const el = ref<HTMLElement>(null)
-const data = ref([1,2,3,4,5,6])
+const data = ref([1, 2, 3, 4, 5, 6])
 
 useInfiniteScroll(
   el,

packages/core/useWebWorkerFn/demo.vue

@@ -35,15 +35,15 @@ const workerSort = async () => {
 <template>
   <p>Current Time: <b>{{ computedTime }}</b></p>
   <note class="mb-2">
-    This is a demo showing sort for large array (5 milion numbers) with or w/o WebWorker.<br>Clock stops when UI blocking happens.
+    This is a demo showing sort for large array (5 million numbers) with or w/o WebWorker.<br>Clock stops when UI blocking happens.
   </note>
   <button @click="baseSort">
     Sort in Main Thread
   </button>
   <button v-if="!running" @click="workerSort">
     Sort in Worker
   </button>
-  <button v-else class="orange" @click="workerTerminate">
+  <button v-else class="orange" @click="workerTerminate('PENDING')">
     Terminate Worker
   </button>
   <p v-if="data">

packages/core/useWebWorkerFn/lib/depsParser.ts

@@ -3,7 +3,7 @@
  * Concatenates the dependencies into a comma separated string.
  * this string will then be passed as an argument to the "importScripts" function
  *
- * @param {Array.<String>}} deps array of string
+ * @param {Array.<String>} deps array of string
  * @returns {String} a string composed by the concatenation of the array
  * elements "deps" and "importScripts".
  *

packages/integrations/useAsyncValidator/demo.client.vue

@@ -40,7 +40,9 @@ const { pass, isFinished, errorFields } = useAsyncValidator(form, rules)
     <div>
       email:
       <input
-        v-model="form.email" :class="{ '!border-red': errorFields?.email?.length }" type="text"
+        v-model="form.email"
+        :class="{ '!border-red': errorFields?.email?.length }"
+        type="text"
         placeholder="email"
       >
       <div v-if="errorFields?.email?.length" text-red>
@@ -50,20 +52,24 @@ const { pass, isFinished, errorFields } = useAsyncValidator(form, rules)
     <div>
       name:
       <input
-        v-model="form.name" :class="{ '!border-red': errorFields?.name?.length }" type="text"
+        v-model="form.name"
+        :class="{ '!border-red': errorFields?.name?.length }"
+        type="text"
         placeholder="name"
       >
-      <div v-if=" errorFields?.name?.length" text-red>
+      <div v-if="errorFields?.name?.length" text-red>
         {{ errorFields.name[0].message }}
       </div>
     </div>
     <div>
       age:
       <input
-        v-model="form.age" :class="{ '!border-red': errorFields?.age?.length }" type="number"
+        v-model="form.age"
+        :class="{ '!border-red': errorFields?.age?.length }"
+        type="number"
         placeholder="age"
       >
-      <div v-if=" errorFields?.age?.length" text-red>
+      <div v-if="errorFields?.age?.length" text-red>
         {{ errorFields.age[0].message }}
       </div>
     </div>