diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 0bdebae34..16448a00b 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -6,9 +6,9 @@
           <label for="reqParamList">{{ $t("request_body") }}</label>
           <div>
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('bodyParams', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -34,9 +34,9 @@
           :placeholder="`key ${index + 1}`"
           :name="`bparam ${index}`"
           :value="param.key"
+          autofocus
           @change="updateBodyParams($event, index, `setKeyBodyParams`)"
           @keyup.prevent="setRouteQueryState"
-          autofocus
         />
       </li>
       <li>
@@ -66,8 +66,6 @@
       <div>
         <li>
           <button
-            class="icon"
-            @click="toggleActive(index, param)"
             v-tooltip.bottom="{
               content: param.hasOwnProperty('active')
                 ? param.active
@@ -75,6 +73,8 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            class="icon"
+            @click="toggleActive(index, param)"
           >
             <i class="material-icons">
               {{
@@ -91,7 +91,10 @@
       <div v-if="contentType === 'multipart/form-data'">
         <li>
           <label for="attachment" class="p-0">
-            <button class="w-full icon" @click="$refs.attachment[index].click()">
+            <button
+              class="w-full icon"
+              @click="$refs.attachment[index].click()"
+            >
               <i class="material-icons">attach_file</i>
             </button>
           </label>
@@ -99,17 +102,17 @@
             ref="attachment"
             name="attachment"
             type="file"
-            @change="setRequestAttachment($event, index)"
             multiple
+            @change="setRequestAttachment($event, index)"
           />
         </li>
       </div>
       <div>
         <li>
           <button
+            v-tooltip.bottom="$t('delete')"
             class="icon"
             @click="removeRequestBodyParam(index)"
-            v-tooltip.bottom="$t('delete')"
           >
             <i class="material-icons">delete</i>
           </button>
@@ -118,7 +121,7 @@
     </ul>
     <ul>
       <li>
-        <button class="icon" @click="addRequestBodyParam" name="addrequest">
+        <button class="icon" name="addrequest" @click="addRequestBodyParam">
           <i class="material-icons">add</i>
           <span>{{ $t("add_new") }}</span>
         </button>
@@ -127,26 +130,16 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.file-chips-container {
-  @apply flex;
-  @apply flex-1;
-  @apply whitespace-nowrap;
-  @apply overflow-auto;
-  @apply bg-bgDarkColor;
-
-  .file-chips-wrapper {
-    @apply flex;
-    @apply w-0;
-  }
-}
-</style>
-
 <script>
 export default {
   props: {
     bodyParams: { type: Array, default: () => [] },
   },
+  computed: {
+    contentType() {
+      return this.$store.state.request.contentType
+    },
+  },
   methods: {
     clearContent(bodyParams, $event) {
       this.$emit("clear-content", bodyParams, $event)
@@ -157,7 +150,10 @@ export default {
     removeRequestBodyParam(index) {
       const paramArr = this.$store.state.request.bodyParams.filter(
         (item, itemIndex) =>
-          itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true)
+          itemIndex !== index &&
+          (Object.prototype.hasOwnProperty.call(item, "active")
+            ? item.active === true
+            : true)
       )
       this.setRawParams(paramArr)
       this.$emit("remove-request-body-param", index)
@@ -188,26 +184,34 @@ export default {
         index,
         value: event.target.value,
       })
-      let paramArr = this.$store.state.request.bodyParams.filter((item) =>
-        item.hasOwnProperty("active") ? item.active == true : true
+      const paramArr = this.$store.state.request.bodyParams.filter((item) =>
+        Object.prototype.hasOwnProperty.call(item, "active")
+          ? item.active === true
+          : true
       )
 
       this.setRawParams(paramArr)
     },
     toggleActive(index, param) {
-      let paramArr = this.$store.state.request.bodyParams.filter((item, itemIndex) => {
-        if (index === itemIndex) {
-          return !param.active
-        } else {
-          return item.hasOwnProperty("active") ? item.active == true : true
+      const paramArr = this.$store.state.request.bodyParams.filter(
+        (item, itemIndex) => {
+          if (index === itemIndex) {
+            return !param.active
+          } else {
+            return Object.prototype.hasOwnProperty.call(item, "active")
+              ? item.active === true
+              : true
+          }
         }
-      })
+      )
 
       this.setRawParams(paramArr)
 
       this.$store.commit("setActiveBodyParams", {
         index,
-        value: param.hasOwnProperty("active") ? !param.active : false,
+        value: Object.prototype.hasOwnProperty.call(param, "active")
+          ? !param.active
+          : false,
       })
     },
     setRawParams(filteredParamArr) {
@@ -219,13 +223,26 @@ export default {
         }
       })
       const rawParamsStr = JSON.stringify(rawParams, null, 2)
-      this.$store.commit("setState", { value: rawParamsStr, attribute: "rawParams" })
-    },
-  },
-  computed: {
-    contentType() {
-      return this.$store.state.request.contentType
+      this.$store.commit("setState", {
+        value: rawParamsStr,
+        attribute: "rawParams",
+      })
     },
   },
 }
 </script>
+
+<style scoped lang="scss">
+.file-chips-container {
+  @apply flex;
+  @apply flex-1;
+  @apply whitespace-nowrap;
+  @apply overflow-auto;
+  @apply bg-bgDarkColor;
+
+  .file-chips-wrapper {
+    @apply flex;
+    @apply w-0;
+  }
+}
+</style>
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 1a9d4b7eb..6f0ee5972 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -14,7 +14,9 @@
       <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
         <v-popover>
-          <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
+          <pre v-if="requestType">{{
+            codegens.find((x) => x.id === requestType).name
+          }}</pre>
           <input
             v-else
             id="requestType"
@@ -26,7 +28,11 @@
           />
           <template slot="popover">
             <div v-for="gen in codegens" :key="gen.id">
-              <button class="icon" @click="requestType = gen.id" v-close-popover>
+              <button
+                v-close-popover
+                class="icon"
+                @click="requestType = gen.id"
+              >
                 {{ gen.name }}
               </button>
             </div>
@@ -37,10 +43,10 @@
         <label for="generatedCode">{{ $t("generated_code") }}</label>
         <div>
           <button
-            class="icon"
-            @click="copyRequestCode"
             ref="copyRequestCode"
             v-tooltip="$t('copy_code')"
+            class="icon"
+            @click="copyRequestCode"
           >
             <i class="material-icons">content_copy</i>
           </button>
@@ -48,6 +54,7 @@
       </div>
       <SmartAceEditor
         v-if="requestType"
+        ref="generatedCode"
         :value="requestCode"
         :lang="codegens.find((x) => x.id === requestType).language"
         :options="{
@@ -60,7 +67,6 @@
           useWorker: false,
         }"
         styles="rounded-b-lg"
-        ref="generatedCode"
       />
     </div>
   </SmartModal>
@@ -72,7 +78,7 @@ import { codegens } from "~/helpers/codegen/codegen"
 export default {
   props: {
     show: Boolean,
-    requestCode: String,
+    requestCode: { type: String, default: "" },
     requestTypeProp: { type: String, default: "curl" },
   },
   data() {
@@ -107,7 +113,10 @@ export default {
       this.$refs.generatedCode.editor.selectAll()
       this.$refs.generatedCode.editor.focus()
       document.execCommand("copy")
-      setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyRequestCode.innerHTML = this.copyButton),
+        1000
+      )
     },
   },
 }
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 4531fd4b9..84d601d50 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -1,14 +1,14 @@
 <template>
-  <AppSection label="Headers" ref="headers" no-legend>
+  <AppSection ref="headers" label="Headers" no-legend>
     <ul v-if="headers.length !== 0">
       <li>
         <div class="row-wrapper">
           <label for="headerList">{{ $t("header_list") }}</label>
           <div>
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('headers', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -35,6 +35,7 @@
           :source="commonHeaders"
           :spellcheck="false"
           :value="header.key"
+          autofocus
           @input="
             $store.commit('setKeyHeader', {
               index,
@@ -42,7 +43,6 @@
             })
           "
           @keyup.prevent="setRouteQueryState"
-          autofocus
         />
       </li>
       <li>
@@ -62,13 +62,6 @@
       <div>
         <li>
           <button
-            class="icon"
-            @click="
-              $store.commit('setActiveHeader', {
-                index,
-                value: header.hasOwnProperty('active') ? !header.active : false,
-              })
-            "
             v-tooltip.bottom="{
               content: header.hasOwnProperty('active')
                 ? header.active
@@ -76,6 +69,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            class="icon"
+            @click="
+              $store.commit('setActiveHeader', {
+                index,
+                value: header.hasOwnProperty('active') ? !header.active : false,
+              })
+            "
           >
             <i class="material-icons">
               {{
@@ -91,7 +91,11 @@
       </div>
       <div>
         <li>
-          <button class="icon" @click="removeRequestHeader(index)" v-tooltip.bottom="$t('delete')">
+          <button
+            v-tooltip.bottom="$t('delete')"
+            class="icon"
+            @click="removeRequestHeader(index)"
+          >
             <i class="material-icons">delete</i>
           </button>
         </li>
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index f8ff1691d..c70798986 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -11,7 +11,12 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
+      <textarea
+        id="import-curl"
+        autofocus
+        rows="8"
+        :placeholder="$t('enter_curl')"
+      ></textarea>
     </div>
     <div slot="footer">
       <div class="row-wrapper">
diff --git a/components/http/Notes.vue b/components/http/Notes.vue
index b40c6459a..483a71868 100644
--- a/components/http/Notes.vue
+++ b/components/http/Notes.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="$t('notes')" ref="sync" no-legend>
+  <AppSection ref="sync" :label="$t('notes')" no-legend>
     <div v-if="fb.currentUser">
       <FirebaseInputform />
       <FirebaseFeeds />
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 85fb50788..9a205c835 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -1,14 +1,14 @@
 <template>
-  <AppSection label="Parameters" ref="parameters" no-legend>
+  <AppSection ref="parameters" label="Parameters" no-legend>
     <ul v-if="params.length !== 0">
       <li>
         <div class="row-wrapper">
           <label for="paramList">{{ $t("parameter_list") }}</label>
           <div>
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('parameters', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -34,13 +34,13 @@
           :placeholder="$t('parameter_count', { count: index + 1 })"
           :name="'param' + index"
           :value="param.key"
+          autofocus
           @change="
             $store.commit('setKeyParams', {
               index,
               value: $event.target.value,
             })
           "
-          autofocus
         />
       </li>
       <li>
@@ -79,13 +79,6 @@
       <div>
         <li>
           <button
-            class="icon"
-            @click="
-              $store.commit('setActiveParams', {
-                index,
-                value: param.hasOwnProperty('active') ? !param.active : false,
-              })
-            "
             v-tooltip.bottom="{
               content: param.hasOwnProperty('active')
                 ? param.active
@@ -93,6 +86,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            class="icon"
+            @click="
+              $store.commit('setActiveParams', {
+                index,
+                value: param.hasOwnProperty('active') ? !param.active : false,
+              })
+            "
           >
             <i class="material-icons">
               {{
@@ -108,7 +108,11 @@
       </div>
       <div>
         <li>
-          <button class="icon" @click="removeRequestParam(index)" v-tooltip.bottom="$t('delete')">
+          <button
+            v-tooltip.bottom="$t('delete')"
+            class="icon"
+            @click="removeRequestParam(index)"
+          >
             <i class="material-icons">delete</i>
           </button>
         </li>
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 10a96f4e6..04b3fced4 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -6,24 +6,33 @@
           <label for="rawBody">{{ $t("raw_request_body") }}</label>
           <div>
             <button
-              class="icon"
-              ref="prettifyRequest"
-              @click="prettifyRequestBody"
-              v-tooltip="$t('prettify_body')"
               v-if="rawInput && contentType.endsWith('json')"
+              ref="prettifyRequest"
+              v-tooltip="$t('prettify_body')"
+              class="icon"
+              @click="prettifyRequestBody"
             >
               <i class="material-icons">photo_filter</i>
             </button>
             <label for="payload" class="p-0">
-              <button class="icon" @click="$refs.payload.click()" v-tooltip="$t('import_json')">
+              <button
+                v-tooltip="$t('import_json')"
+                class="icon"
+                @click="$refs.payload.click()"
+              >
                 <i class="material-icons">post_add</i>
               </button>
             </label>
-            <input ref="payload" name="payload" type="file" @change="uploadPayload" />
+            <input
+              ref="payload"
+              name="payload"
+              type="file"
+              @change="uploadPayload"
+            />
             <button
+              v-tooltip.bottom="$t('clear')"
               class="icon"
               @click="clearContent('rawParams', $event)"
-              v-tooltip.bottom="$t('clear')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -102,7 +111,7 @@ export default {
       try {
         const jsonObj = JSON.parse(this.rawParamsBody)
         this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
-        let oldIcon = this.$refs.prettifyRequest.innerHTML
+        const oldIcon = this.$refs.prettifyRequest.innerHTML
         this.$refs.prettifyRequest.innerHTML = this.doneButton
         setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
       } catch (e) {
diff --git a/components/http/Response.vue b/components/http/Response.vue
index d2cbc2c71..af3993fdf 100644
--- a/components/http/Response.vue
+++ b/components/http/Response.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="response" :label="$t('response')" ref="response" no-legend>
+  <AppSection id="response" ref="response" :label="$t('response')" no-legend>
     <HttpResponseMeta :response="response" :active="active" />
     <div v-if="response.body && response.body !== $t('loading')">
       <LensesResponseBodyRenderer :response="response" />
@@ -12,7 +12,7 @@ export default {
   props: {
     response: {
       type: Object,
-      default: {},
+      default: () => {},
     },
     active: {
       type: Boolean,
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index 0a7391262..ad6bcc929 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -2,7 +2,9 @@
   <div class="flex flex-col">
     <div class="flex items-center justify-between">
       <label>{{ $t("response") }}</label>
-      <label v-if="active"><i class="animate-spin material-icons">refresh</i></label>
+      <label v-if="active"
+        ><i class="animate-spin material-icons">refresh</i></label
+      >
       <label v-else :class="statusCategory ? statusCategory.className : ''">
         <i class="material-icons">fiber_manual_record</i>
       </label>
@@ -31,7 +33,7 @@ export default {
   props: {
     response: {
       type: Object,
-      default: {},
+      default: () => {},
     },
     active: {
       type: Boolean,
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index d7b536380..4face38f6 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -15,9 +15,9 @@
         <label>{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
           <button
+            v-tooltip.bottom="$t('clear')"
             class="icon"
             @click="clearContent('tokens', $event)"
-            v-tooltip.bottom="$t('clear')"
           >
             <i class="material-icons">clear_all</i>
           </button>
@@ -42,15 +42,19 @@
         <div class="row-wrapper">
           <li>
             <button
+              v-tooltip.bottom="$t('use_token')"
               class="icon"
               @click="useOAuthToken(token.value)"
-              v-tooltip.bottom="$t('use_token')"
             >
               <i class="material-icons">input</i>
             </button>
           </li>
           <li>
-            <button class="icon" @click="removeOAuthToken(index)" v-tooltip.bottom="$t('delete')">
+            <button
+              v-tooltip.bottom="$t('delete')"
+              class="icon"
+              @click="removeOAuthToken(index)"
+            >
               <i class="material-icons">delete</i>
             </button>
           </li>
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index cf89f2c8d..7bbc65d3f 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-col">
-    <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
+    <label
+      >{{ $t("color") }}:
+      {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label
+    >
     <div>
       <!-- text-blue-400 -->
       <!-- text-green-400 -->
@@ -56,16 +59,16 @@ export default {
       ],
     }
   },
+  watch: {
+    active(color) {
+      localStorage.setItem("THEME_COLOR", color)
+    },
+  },
   methods: {
     setActiveColor(color) {
       document.documentElement.setAttribute("data-accent", color)
       this.active = color
     },
   },
-  watch: {
-    active(color) {
-      localStorage.setItem("THEME_COLOR", color)
-    },
-  },
 }
 </script>
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index e06ed1b91..924d63bc4 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -1,18 +1,25 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <div class="outline" v-if="lang == 'json'">
-      <div class="block" v-for="(p, index) in currPath" :key="index">
+    <div v-if="lang == 'json'" class="outline">
+      <div v-for="(p, index) in currPath" :key="index" class="block">
         <div class="label" @click="onBlockClick(index)">
           {{ p }}
         </div>
-        <i v-if="index + 1 !== currPath.length" class="material-icons">chevron_right</i>
-        <div
-          class="siblings"
-          v-if="sibDropDownIndex == index"
-          @mouseleave="clearSibList"
-          :ref="`sibling-${index}`"
+        <i v-if="index + 1 !== currPath.length" class="material-icons"
+          >chevron_right</i
         >
-          <div class="sib" v-for="(sib, i) in currSib" :key="i" @click="goToSib(sib)">
+        <div
+          v-if="sibDropDownIndex == index"
+          :ref="`sibling-${index}`"
+          class="siblings"
+          @mouseleave="clearSibList"
+        >
+          <div
+            v-for="(sib, i) in currSib"
+            :key="i"
+            class="sib"
+            @click="goToSib(sib)"
+          >
             {{ sib.key ? sib.key.value : i }}
           </div>
         </div>
@@ -22,6 +29,220 @@
   </div>
 </template>
 
+<script>
+import ace from "ace-builds"
+import "ace-builds/webpack-resolver"
+import jsonParse from "~/helpers/jsonParse"
+import debounce from "~/helpers/utils/debounce"
+import outline from "~/helpers/outline"
+
+export default {
+  props: {
+    provideJSONOutline: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    lang: {
+      type: String,
+      default: "json",
+    },
+    lint: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    options: {
+      type: Object,
+      default: () => {},
+    },
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
+  data() {
+    return {
+      initialized: false,
+      editor: null,
+      cacheValue: "",
+      outline: outline(),
+      currPath: [],
+      currSib: [],
+      sibDropDownIndex: null,
+    }
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.session.setValue(value, 1)
+        this.cacheValue = value
+        if (this.lint) this.provideLinting(value)
+      }
+    },
+    theme() {
+      this.initialized = false
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+        this.$nextTick().then(() => {
+          this.initialized = true
+        })
+      })
+    },
+    lang(value) {
+      this.editor.getSession().setMode(`ace/mode/${value}`)
+    },
+    options(value) {
+      this.editor.setOptions(value)
+    },
+  },
+
+  mounted() {
+    const editor = ace.edit(this.$refs.editor, {
+      mode: `ace/mode/${this.lang}`,
+      ...this.options,
+    })
+
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true
+      })
+    })
+
+    if (this.value) editor.setValue(this.value, 1)
+
+    this.editor = editor
+    this.cacheValue = this.value
+
+    if (this.lang === "json" && this.provideJSONOutline)
+      this.initOutline(this.value)
+
+    editor.on("change", () => {
+      const content = editor.getValue()
+      this.$emit("input", content)
+      this.cacheValue = content
+
+      if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
+
+      if (this.lint) this.provideLinting(content)
+    })
+
+    if (this.lang === "json" && this.provideJSONOutline) {
+      editor.session.selection.on("changeCursor", () => {
+        const index = editor.session.doc.positionToIndex(
+          editor.selection.getCursor(),
+          0
+        )
+        const path = this.outline.genPath(index)
+        if (path.success) {
+          this.currPath = path.res
+        }
+      })
+      document.addEventListener("touchstart", this.onTouchStart)
+    }
+
+    // Disable linting, if lint prop is false
+    if (this.lint) this.provideLinting(this.value)
+  },
+
+  destroyed() {
+    this.editor.destroy()
+    document.removeEventListener("touchstart", this.onTouchStart)
+  },
+
+  methods: {
+    defineTheme() {
+      if (this.theme) {
+        return this.theme
+      }
+      const strip = (str) =>
+        str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      return strip(
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("--editor-theme")
+      )
+    },
+
+    provideLinting: debounce(function (code) {
+      if (this.lang === "json") {
+        try {
+          jsonParse(code)
+          this.editor.session.setAnnotations([])
+        } catch (e) {
+          const pos = this.editor.session
+            .getDocument()
+            .indexToPosition(e.start, 0)
+          this.editor.session.setAnnotations([
+            {
+              row: pos.row,
+              column: pos.column,
+              text: e.message,
+              type: "error",
+            },
+          ])
+        }
+      }
+    }, 2000),
+    onBlockClick(index) {
+      if (this.sibDropDownIndex === index) {
+        this.clearSibList()
+      } else {
+        this.currSib = this.outline.getSiblings(index)
+        if (this.currSib.length) this.sibDropDownIndex = index
+      }
+    },
+    clearSibList() {
+      this.currSib = []
+      this.sibDropDownIndex = null
+    },
+    goToSib(obj) {
+      this.clearSibList()
+      if (obj.start) {
+        const pos = this.editor.session.doc.indexToPosition(obj.start, 0)
+        if (pos) {
+          this.editor.session.selection.moveCursorTo(pos.row, pos.column, true)
+          this.editor.session.selection.clearSelection()
+          this.editor.scrollToLine(pos.row, false, true, null)
+        }
+      }
+    },
+    initOutline: debounce(function (content) {
+      if (this.lang === "json") {
+        try {
+          this.outline.init(content)
+
+          if (content[0] === "[") this.currPath.push("[]")
+          else this.currPath.push("{}")
+        } catch (e) {
+          console.log("Outline error: ", e)
+        }
+      }
+    }),
+    onTouchStart(e) {
+      if (
+        this.sibDropDownIndex !== null &&
+        e.target.parentElement !==
+          this.$refs[`sibling-${this.sibDropDownIndex}`][0]
+      ) {
+        this.clearSibList()
+      }
+    },
+  },
+}
+</script>
+
 <style lang="scss">
 .show-if-initialized {
   @apply opacity-0;
@@ -90,206 +311,3 @@
   }
 }
 </style>
-
-<script>
-import ace from "ace-builds"
-import "ace-builds/webpack-resolver"
-import jsonParse from "~/helpers/jsonParse"
-import debounce from "~/helpers/utils/debounce"
-import outline from "~/helpers/outline"
-
-export default {
-  props: {
-    provideJSONOutline: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    lang: {
-      type: String,
-      default: "json",
-    },
-    lint: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-    options: {
-      type: Object,
-      default: {},
-    },
-    styles: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      initialized: false,
-      editor: null,
-      cacheValue: "",
-      outline: outline(),
-      currPath: [],
-      currSib: [],
-      sibDropDownIndex: null,
-    }
-  },
-
-  watch: {
-    value(value) {
-      if (value !== this.cacheValue) {
-        this.editor.session.setValue(value, 1)
-        this.cacheValue = value
-        if (this.lint) this.provideLinting(value)
-      }
-    },
-    theme() {
-      this.initialized = false
-      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
-        this.$nextTick().then(() => {
-          this.initialized = true
-        })
-      })
-    },
-    lang(value) {
-      this.editor.getSession().setMode(`ace/mode/${value}`)
-    },
-    options(value) {
-      this.editor.setOptions(value)
-    },
-  },
-
-  mounted() {
-    const editor = ace.edit(this.$refs.editor, {
-      mode: `ace/mode/${this.lang}`,
-      ...this.options,
-    })
-
-    // Set the theme and show the editor only after it's been set to prevent FOUC.
-    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
-      this.$nextTick().then(() => {
-        this.initialized = true
-      })
-    })
-
-    if (this.value) editor.setValue(this.value, 1)
-
-    this.editor = editor
-    this.cacheValue = this.value
-
-    if (this.lang === "json" && this.provideJSONOutline) this.initOutline(this.value)
-
-    editor.on("change", () => {
-      const content = editor.getValue()
-      this.$emit("input", content)
-      this.cacheValue = content
-
-      if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
-
-      if (this.lint) this.provideLinting(content)
-    })
-
-    if (this.lang === "json" && this.provideJSONOutline) {
-      editor.session.selection.on("changeCursor", (e) => {
-        const index = editor.session.doc.positionToIndex(editor.selection.getCursor(), 0)
-        const path = this.outline.genPath(index)
-        if (path.success) {
-          this.currPath = path.res
-        }
-      })
-      document.addEventListener("touchstart", this.onTouchStart)
-    }
-
-    // Disable linting, if lint prop is false
-    if (this.lint) this.provideLinting(this.value)
-  },
-
-  methods: {
-    defineTheme() {
-      if (this.theme) {
-        return this.theme
-      }
-      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
-      return strip(
-        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
-      )
-    },
-
-    provideLinting: debounce(function (code) {
-      if (this.lang === "json") {
-        try {
-          jsonParse(code)
-          this.editor.session.setAnnotations([])
-        } catch (e) {
-          const pos = this.editor.session.getDocument().indexToPosition(e.start, 0)
-          this.editor.session.setAnnotations([
-            {
-              row: pos.row,
-              column: pos.column,
-              text: e.message,
-              type: "error",
-            },
-          ])
-        }
-      }
-    }, 2000),
-    onBlockClick(index) {
-      if (this.sibDropDownIndex == index) {
-        this.clearSibList()
-      } else {
-        this.currSib = this.outline.getSiblings(index)
-        if (this.currSib.length) this.sibDropDownIndex = index
-      }
-    },
-    clearSibList() {
-      this.currSib = []
-      this.sibDropDownIndex = null
-    },
-    goToSib(obj) {
-      this.clearSibList()
-      if (obj.start) {
-        let pos = this.editor.session.doc.indexToPosition(obj.start, 0)
-        if (pos) {
-          this.editor.session.selection.moveCursorTo(pos.row, pos.column, true)
-          this.editor.session.selection.clearSelection()
-          this.editor.scrollToLine(pos.row, false, true, null)
-        }
-      }
-    },
-    initOutline: debounce(function (content) {
-      if (this.lang == "json") {
-        try {
-          this.outline.init(content)
-
-          if (content[0] == "[") this.currPath.push("[]")
-          else this.currPath.push("{}")
-        } catch (e) {
-          console.log("Outline error: ", e)
-        }
-      }
-    }),
-    onTouchStart(e) {
-      if (this.sibDropDownIndex == null) return
-      else {
-        if (e.target.parentElement != this.$refs[`sibling-${this.sibDropDownIndex}`][0]) {
-          this.clearSibList()
-        }
-      }
-    },
-  },
-  destroyed() {
-    this.editor.destroy()
-    document.removeEventListener("touchstart", this.onTouchStart)
-  },
-}
-</script>
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index d3e8f480a..6def418a0 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="autocomplete-wrapper">
     <input
+      ref="acInput"
+      v-model="text"
       type="text"
       :placeholder="placeholder"
-      v-model="text"
-      @input="updateSuggestions"
-      @keyup="updateSuggestions"
-      @click="updateSuggestions"
-      @keydown="handleKeystroke"
-      ref="acInput"
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"
       :autocorrect="spellcheck"
       :class="styles"
+      @input="updateSuggestions"
+      @keyup="updateSuggestions"
+      @click="updateSuggestions"
+      @keydown="handleKeystroke"
     />
     <ul
-      class="suggestions"
       v-if="suggestions.length > 0 && suggestionsVisible"
+      class="suggestions"
       :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
     >
       <li
         v-for="(suggestion, index) in suggestions"
-        @click.prevent="forceSuggestion(suggestion)"
-        :class="{ active: currentSuggestionIndex === index }"
         :key="index"
+        :class="{ active: currentSuggestionIndex === index }"
+        @click.prevent="forceSuggestion(suggestion)"
       >
         {{ suggestion }}
       </li>
@@ -31,6 +31,155 @@
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    spellcheck: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+
+    autocapitalize: {
+      type: String,
+      default: "off",
+      required: false,
+    },
+
+    placeholder: {
+      type: String,
+      default: "",
+      required: false,
+    },
+
+    source: {
+      type: Array,
+      required: true,
+    },
+
+    value: {
+      type: String,
+      default: "",
+      required: false,
+    },
+
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
+  data() {
+    return {
+      text: this.value,
+      selectionStart: 0,
+      suggestionsOffsetLeft: 0,
+      currentSuggestionIndex: -1,
+      suggestionsVisible: false,
+    }
+  },
+
+  computed: {
+    /**
+     * Gets the suggestions list to be displayed under the input box.
+     *
+     * @returns {default.props.source|{type, required}}
+     */
+    suggestions() {
+      const input = this.text.substring(0, this.selectionStart)
+
+      return (
+        this.source
+          .filter(
+            (entry) =>
+              entry.toLowerCase().startsWith(input.toLowerCase()) &&
+              input.toLowerCase() !== entry.toLowerCase()
+          )
+          // Cut off the part that's already been typed.
+          .map((entry) => entry.substring(this.selectionStart))
+          // We only want the top 6 suggestions.
+          .slice(0, 6)
+      )
+    },
+  },
+
+  watch: {
+    text() {
+      this.$emit("input", this.text)
+    },
+  },
+
+  mounted() {
+    this.updateSuggestions({
+      target: this.$refs.acInput,
+    })
+  },
+
+  methods: {
+    updateSuggestions(event) {
+      // Hide suggestions if ESC pressed.
+      if (event.code && event.code === "Escape") {
+        event.preventDefault()
+        this.suggestionsVisible = false
+        this.currentSuggestionIndex = -1
+        return
+      }
+
+      // As suggestions is a reactive property, this implicitly
+      // causes suggestions to update.
+      this.selectionStart = this.$refs.acInput.selectionStart
+      this.suggestionsOffsetLeft = 12 * this.selectionStart
+      this.suggestionsVisible = true
+    },
+
+    forceSuggestion(text) {
+      const input = this.text.substring(0, this.selectionStart)
+      this.text = input + text
+
+      this.selectionStart = this.text.length
+      this.suggestionsVisible = true
+      this.currentSuggestionIndex = -1
+    },
+
+    handleKeystroke(event) {
+      switch (event.code) {
+        case "ArrowUp":
+          event.preventDefault()
+          this.currentSuggestionIndex =
+            this.currentSuggestionIndex - 1 >= 0
+              ? this.currentSuggestionIndex - 1
+              : 0
+          break
+
+        case "ArrowDown":
+          event.preventDefault()
+          this.currentSuggestionIndex =
+            this.currentSuggestionIndex < this.suggestions.length - 1
+              ? this.currentSuggestionIndex + 1
+              : this.suggestions.length - 1
+          break
+
+        case "Tab": {
+          const activeSuggestion =
+            this.suggestions[
+              this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
+            ]
+
+          if (!activeSuggestion) {
+            return
+          }
+
+          event.preventDefault()
+          const input = this.text.substring(0, this.selectionStart)
+          this.text = input + activeSuggestion
+          break
+        }
+      }
+    },
+  },
+}
+</script>
+
 <style scoped lang="scss">
 .autocomplete-wrapper {
   @apply relative;
@@ -78,147 +227,3 @@
   }
 }
 </style>
-
-<script>
-export default {
-  props: {
-    spellcheck: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-
-    autocapitalize: {
-      type: String,
-      default: "off",
-      required: false,
-    },
-
-    placeholder: {
-      type: String,
-      default: "",
-      required: false,
-    },
-
-    source: {
-      type: Array,
-      required: true,
-    },
-
-    value: {
-      type: String,
-      default: "",
-      required: false,
-    },
-
-    styles: {
-      type: String,
-      default: "",
-    },
-  },
-
-  watch: {
-    text() {
-      this.$emit("input", this.text)
-    },
-  },
-
-  data() {
-    return {
-      text: this.value,
-      selectionStart: 0,
-      suggestionsOffsetLeft: 0,
-      currentSuggestionIndex: -1,
-      suggestionsVisible: false,
-    }
-  },
-
-  methods: {
-    updateSuggestions(event) {
-      // Hide suggestions if ESC pressed.
-      if (event.code && event.code === "Escape") {
-        event.preventDefault()
-        this.suggestionsVisible = false
-        this.currentSuggestionIndex = -1
-        return
-      }
-
-      // As suggestions is a reactive property, this implicitly
-      // causes suggestions to update.
-      this.selectionStart = this.$refs.acInput.selectionStart
-      this.suggestionsOffsetLeft = 12 * this.selectionStart
-      this.suggestionsVisible = true
-    },
-
-    forceSuggestion(text) {
-      let input = this.text.substring(0, this.selectionStart)
-      this.text = input + text
-
-      this.selectionStart = this.text.length
-      this.suggestionsVisible = true
-      this.currentSuggestionIndex = -1
-    },
-
-    handleKeystroke(event) {
-      switch (event.code) {
-        case "ArrowUp":
-          event.preventDefault()
-          this.currentSuggestionIndex =
-            this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0
-          break
-
-        case "ArrowDown":
-          event.preventDefault()
-          this.currentSuggestionIndex =
-            this.currentSuggestionIndex < this.suggestions.length - 1
-              ? this.currentSuggestionIndex + 1
-              : this.suggestions.length - 1
-          break
-
-        case "Tab":
-          let activeSuggestion =
-            this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0]
-
-          if (!activeSuggestion) {
-            return
-          }
-
-          event.preventDefault()
-          let input = this.text.substring(0, this.selectionStart)
-          this.text = input + activeSuggestion
-          break
-      }
-    },
-  },
-
-  computed: {
-    /**
-     * Gets the suggestions list to be displayed under the input box.
-     *
-     * @returns {default.props.source|{type, required}}
-     */
-    suggestions() {
-      let input = this.text.substring(0, this.selectionStart)
-
-      return (
-        this.source
-          .filter(
-            (entry) =>
-              entry.toLowerCase().startsWith(input.toLowerCase()) &&
-              input.toLowerCase() !== entry.toLowerCase()
-          )
-          // Cut off the part that's already been typed.
-          .map((entry) => entry.substring(this.selectionStart))
-          // We only want the top 6 suggestions.
-          .slice(0, 6)
-      )
-    },
-  },
-
-  mounted() {
-    this.updateSuggestions({
-      target: this.$refs.acInput,
-    })
-  },
-}
-</script>
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 4cc082341..8e98b34b9 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -3,7 +3,10 @@
     <label>
       <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
-        {{ $colorMode.preference.charAt(0).toUpperCase() + $colorMode.preference.slice(1) }}
+        {{
+          $colorMode.preference.charAt(0).toUpperCase() +
+          $colorMode.preference.slice(1)
+        }}
         <span v-if="$colorMode.preference === 'system'">
           ({{ $colorMode.value }} mode detected)
         </span>
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 891f1259d..f0ea6c9fd 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -33,21 +33,21 @@
 export default {
   props: {
     show: Boolean,
-    title: "",
+    title: { type: String, default: "" },
     yes: {
       type: String,
-      default: function () {
+      default() {
         return this.$t("yes")
       },
     },
     no: {
       type: String,
-      default: function () {
+      default() {
         return this.$t("no")
       },
     },
   },
-  async mounted() {
+  mounted() {
     this._keyListener = function (e) {
       if (e.key === "Escape") {
         e.preventDefault()
@@ -56,6 +56,9 @@ export default {
     }
     document.addEventListener("keydown", this._keyListener.bind(this))
   },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
   methods: {
     hideModal() {
       this.$emit("hide-modal")
@@ -64,8 +67,5 @@ export default {
       this.$emit("resolve")
     },
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
 }
 </script>
diff --git a/components/smart/Intersection.vue b/components/smart/Intersection.vue
index bdf4d1b48..b28909af5 100644
--- a/components/smart/Intersection.vue
+++ b/components/smart/Intersection.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="container">
-    <slot />
+    <slot></slot>
   </div>
 </template>
 <script lang="ts">
diff --git a/components/smart/JsEditor.vue b/components/smart/JsEditor.vue
index fa2808cc7..7009043ca 100644
--- a/components/smart/JsEditor.vue
+++ b/components/smart/JsEditor.vue
@@ -4,25 +4,12 @@
   </div>
 </template>
 
-<style lang="scss">
-.show-if-initialized {
-  @apply opacity-0;
-
-  &.initialized {
-    @apply opacity-100;
-  }
-
-  & > * {
-    @apply transition-none;
-  }
-}
-</style>
-
 <script>
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
+import * as esprima from "esprima"
 import debounce from "~/helpers/utils/debounce"
 import {
   getPreRequestScriptCompletions,
@@ -30,8 +17,6 @@ import {
   performPreRequestLinting,
 } from "~/helpers/tern"
 
-import * as esprima from "esprima"
-
 export default {
   props: {
     value: {
@@ -45,7 +30,7 @@ export default {
     },
     options: {
       type: Object,
-      default: {},
+      default: () => {},
     },
     styles: {
       type: String,
@@ -115,7 +100,13 @@ export default {
     })
 
     const completer = {
-      getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
+      getCompletions: (
+        editor,
+        _session,
+        { row, column },
+        _prefix,
+        callback
+      ) => {
         if (this.completeMode === "pre") {
           getPreRequestScriptCompletions(editor.getValue(), row, column)
             .then((res) => {
@@ -165,14 +156,21 @@ export default {
     this.provideLinting(this.value)
   },
 
+  destroyed() {
+    this.editor.destroy()
+  },
+
   methods: {
     defineTheme() {
       if (this.theme) {
         return this.theme
       }
-      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      const strip = (str) =>
+        str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
       return strip(
-        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("--editor-theme")
       )
     },
 
@@ -195,7 +193,9 @@ export default {
             if (res.errors && res.errors.length > 0) {
               results = results.concat(
                 res.errors.map((err) => {
-                  const pos = this.editor.session.getDocument().indexToPosition(err.index, 0)
+                  const pos = this.editor.session
+                    .getDocument()
+                    .indexToPosition(err.index, 0)
 
                   return {
                     row: pos.row,
@@ -207,7 +207,9 @@ export default {
               )
             }
           } catch (e) {
-            const pos = this.editor.session.getDocument().indexToPosition(e.index, 0)
+            const pos = this.editor.session
+              .getDocument()
+              .indexToPosition(e.index, 0)
             results = results.concat([
               {
                 row: pos.row,
@@ -226,7 +228,9 @@ export default {
             if (res.errors && res.errors.length > 0) {
               results = results.concat(
                 res.errors.map((err) => {
-                  const pos = this.editor.session.getDocument().indexToPosition(err.index, 0)
+                  const pos = this.editor.session
+                    .getDocument()
+                    .indexToPosition(err.index, 0)
 
                   return {
                     row: pos.row,
@@ -238,7 +242,9 @@ export default {
               )
             }
           } catch (e) {
-            const pos = this.editor.session.getDocument().indexToPosition(e.index, 0)
+            const pos = this.editor.session
+              .getDocument()
+              .indexToPosition(e.index, 0)
             results = results.concat([
               {
                 row: pos.row,
@@ -253,9 +259,19 @@ export default {
         })
     }, 2000),
   },
-
-  destroyed() {
-    this.editor.destroy()
-  },
 }
 </script>
+
+<style lang="scss">
+.show-if-initialized {
+  @apply opacity-0;
+
+  &.initialized {
+    @apply opacity-100;
+  }
+
+  & > * {
+    @apply transition-none;
+  }
+}
+</style>
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index e5296dfef..71e7c09f1 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -20,6 +20,16 @@
   </transition>
 </template>
 
+<script>
+export default {
+  computed: {
+    hasFooterSlot() {
+      return !!this.$slots.footer
+    },
+  },
+}
+</script>
+
 <style scoped lang="scss">
 .modal-backdrop {
   @apply fixed;
@@ -118,13 +128,3 @@
   }
 }
 </style>
-
-<script>
-export default {
-  computed: {
-    hasFooterSlot() {
-      return !!this.$slots.footer
-    },
-  },
-}
-</script>
diff --git a/components/smart/Tab.vue b/components/smart/Tab.vue
index 3785daa42..6210a6987 100644
--- a/components/smart/Tab.vue
+++ b/components/smart/Tab.vue
@@ -9,7 +9,7 @@ export default {
   props: {
     label: { type: String, default: "" },
     icon: { type: String, default: "" },
-    id: { required: true },
+    id: { type: String, default: "", required: true },
     selected: {
       type: Boolean,
       default: false,
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index cdfe71857..71db1ad98 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -4,8 +4,8 @@
       <ul>
         <li
           v-for="(tab, index) in tabs"
-          :class="{ 'is-active': tab.isActive }"
           :key="index"
+          :class="{ 'is-active': tab.isActive }"
           :tabindex="0"
           @keyup.enter="selectTab(tab)"
         >
@@ -24,6 +24,36 @@
   </section>
 </template>
 
+<script>
+export default {
+  props: {
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
+  data() {
+    return {
+      tabs: [],
+    }
+  },
+
+  created() {
+    this.tabs = this.$children
+  },
+
+  methods: {
+    selectTab({ id }) {
+      this.tabs.forEach((tab) => {
+        tab.isActive = tab.id === id
+      })
+      this.$emit("tab-changed", id)
+    },
+  },
+}
+</script>
+
 <style scoped lang="scss">
 .tabs-wrapper {
   @apply flex;
@@ -90,35 +120,3 @@
   }
 }
 </style>
-
-<script>
-import Section from "../app/Section.vue"
-export default {
-  components: { Section },
-  props: {
-    styles: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      tabs: [],
-    }
-  },
-
-  created() {
-    this.tabs = this.$children
-  },
-
-  methods: {
-    selectTab({ id }) {
-      this.tabs.forEach((tab) => {
-        tab.isActive = tab.id == id
-      })
-      this.$emit("tab-changed", id)
-    },
-  },
-}
-</script>
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index a1640ac3d..009d3777a 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -1,14 +1,32 @@
 <template>
-  <div @click="toggle()" class="inline-block cursor-pointer">
-    <label class="toggle" :class="{ on: on }" ref="toggle">
+  <div class="inline-block cursor-pointer" @click="toggle()">
+    <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
     <label class="pl-0 align-middle cursor-pointer">
-      <slot />
+      <slot></slot>
     </label>
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    on: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+    toggle() {
+      const containsOnClass = this.$refs.toggle.classList.toggle("on")
+      this.$emit("change", containsOnClass)
+    },
+  },
+}
+</script>
+
 <style scoped lang="scss">
 $useBorder: false;
 $borderColor: var(--fg-light-color);
@@ -63,21 +81,3 @@ $transition: all 0.2s ease-in-out;
   }
 }
 </style>
-
-<script>
-export default {
-  props: {
-    on: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  methods: {
-    toggle() {
-      const containsOnClass = this.$refs.toggle.classList.toggle("on")
-      this.$emit("change", containsOnClass)
-    },
-  },
-}
-</script>
diff --git a/components/smart/UrlField.vue b/components/smart/UrlField.vue
index feee8d8d0..4614c2168 100644
--- a/components/smart/UrlField.vue
+++ b/components/smart/UrlField.vue
@@ -1,31 +1,7 @@
 <template>
-  <div contenteditable class="url-field" ref="editor" spellcheck="false"></div>
+  <div ref="editor" contenteditable class="url-field" spellcheck="false"></div>
 </template>
 
-<style lang="scss">
-.url-field {
-  @apply border-dashed;
-  @apply md:border-l;
-  @apply border-brdColor;
-}
-
-.highlight-VAR {
-  @apply font-bold;
-  @apply text-acColor;
-}
-
-.highlight-TEXT {
-  @apply overflow-auto;
-  @apply break-all;
-
-  height: 22px;
-}
-
-.highlight-TEXT::-webkit-scrollbar {
-  @apply hidden;
-}
-</style>
-
 <script>
 export default {
   props: {
@@ -80,7 +56,11 @@ export default {
       let index = 0
       while ((match = text.substring(index).match(regex))) {
         map.push([index, index + (match.index - 1), "TEXT"])
-        map.push([index + match.index, index + match.index + match[0].length - 1, "VAR"])
+        map.push([
+          index + match.index,
+          index + match.index + match[0].length - 1,
+          "VAR",
+        ])
         index += match.index + match[0].length
 
         if (index >= text.length - 1) break
@@ -101,7 +81,11 @@ export default {
             break
 
           case Node.ELEMENT_NODE:
-            textSegments.splice(textSegments.length, 0, ...this.getTextSegments(node))
+            textSegments.splice(
+              textSegments.length,
+              0,
+              ...this.getTextSegments(node)
+            )
             break
         }
       })
@@ -118,11 +102,17 @@ export default {
       textSegments.forEach(({ text, node }) => {
         const startIndexOfNode = currentIndex
         const endIndexOfNode = startIndexOfNode + text.length
-        if (startIndexOfNode <= absoluteAnchorIndex && absoluteAnchorIndex <= endIndexOfNode) {
+        if (
+          startIndexOfNode <= absoluteAnchorIndex &&
+          absoluteAnchorIndex <= endIndexOfNode
+        ) {
           anchorNode = node
           anchorIndex = absoluteAnchorIndex - startIndexOfNode
         }
-        if (startIndexOfNode <= absoluteFocusIndex && absoluteFocusIndex <= endIndexOfNode) {
+        if (
+          startIndexOfNode <= absoluteFocusIndex &&
+          absoluteFocusIndex <= endIndexOfNode
+        ) {
           focusNode = node
           focusIndex = absoluteFocusIndex - startIndexOfNode
         }
@@ -161,3 +151,27 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.url-field {
+  @apply border-dashed;
+  @apply md:border-l;
+  @apply border-brdColor;
+}
+
+.highlight-VAR {
+  @apply font-bold;
+  @apply text-acColor;
+}
+
+.highlight-TEXT {
+  @apply overflow-auto;
+  @apply break-all;
+
+  height: 22px;
+}
+
+.highlight-TEXT::-webkit-scrollbar {
+  @apply hidden;
+}
+</style>
diff --git a/components/smart/__tests__/AutoComplete.spec.js b/components/smart/__tests__/AutoComplete.spec.js
index 163f45cd6..ce54b3636 100644
--- a/components/smart/__tests__/AutoComplete.spec.js
+++ b/components/smart/__tests__/AutoComplete.spec.js
@@ -1,5 +1,5 @@
-import autocomplete from "../AutoComplete"
 import { mount } from "@vue/test-utils"
+import autocomplete from "../AutoComplete"
 
 const props = {
   placeholder: "",
@@ -9,7 +9,9 @@ const props = {
 }
 
 // ["pp", "pple", "ppliance", "lice"]
-const suggestionStr = props.source.filter((str) => str.startsWith("a")).map((str) => str.slice(1))
+const suggestionStr = props.source
+  .filter((str) => str.startsWith("a"))
+  .map((str) => str.slice(1))
 
 const factory = (props) =>
   mount(autocomplete, {
@@ -118,7 +120,9 @@ describe("autocomplete", () => {
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
   })
 
   test("pressing down arrow when nothing is selected selects the first in the list", async () => {
@@ -134,7 +138,9 @@ describe("autocomplete", () => {
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
   })
 
   test("pressing down arrow moves down the selection list", async () => {
@@ -154,7 +160,9 @@ describe("autocomplete", () => {
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(1).element.classList.contains("active")
+    ).toEqual(true)
   })
 
   test("pressing up arrow moves up the selection list", async () => {
@@ -179,7 +187,9 @@ describe("autocomplete", () => {
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
   })
 
   test("pressing down arrow at the end of the list doesn't update the selection", async () => {
@@ -199,14 +209,18 @@ describe("autocomplete", () => {
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(1).element.classList.contains("active")
+    ).toEqual(true)
 
     await input.trigger("keydown", {
       code: "ArrowDown",
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(1).element.classList.contains("active")
+    ).toEqual(true)
   })
 
   test("pressing up arrow at the top of the list doesn't update the selection", async () => {
@@ -226,14 +240,18 @@ describe("autocomplete", () => {
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
 
     await input.trigger("keydown", {
       code: "ArrowUp",
     })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
   })
 
   test("pressing tab performs the current completion", async () => {
diff --git a/components/smart/__tests__/Tab.spec.js b/components/smart/__tests__/Tab.spec.js
index 8cb8e7dcf..99ecf08a5 100644
--- a/components/smart/__tests__/Tab.spec.js
+++ b/components/smart/__tests__/Tab.spec.js
@@ -1,5 +1,5 @@
-import tab from "../Tab"
 import { mount } from "@vue/test-utils"
+import tab from "../Tab"
 
 const factory = (props, data) => {
   if (data) {
diff --git a/components/smart/__tests__/Tabs.spec.js b/components/smart/__tests__/Tabs.spec.js
index 8c27a7b75..9e58a88f1 100644
--- a/components/smart/__tests__/Tabs.spec.js
+++ b/components/smart/__tests__/Tabs.spec.js
@@ -1,8 +1,7 @@
+import { mount } from "@vue/test-utils"
 import tabs from "../Tabs"
 import tab from "../Tab"
 
-import { mount } from "@vue/test-utils"
-
 const factory = () =>
   mount(tabs, {
     slots: {
@@ -13,7 +12,7 @@ const factory = () =>
       ],
     },
     stubs: {
-      "Tab": tab,
+      Tab: tab,
     },
   })
 
diff --git a/components/smart/__tests__/Toggle.spec.js b/components/smart/__tests__/Toggle.spec.js
index bf31669a9..b4637ac99 100644
--- a/components/smart/__tests__/Toggle.spec.js
+++ b/components/smart/__tests__/Toggle.spec.js
@@ -1,5 +1,5 @@
-import pwToggle from "../Toggle"
 import { mount } from "@vue/test-utils"
+import pwToggle from "../Toggle"
 
 const factory = (props, slot) =>
   mount(pwToggle, {
diff --git a/components/smart/__tests__/UrlField.spec.js b/components/smart/__tests__/UrlField.spec.js
index 2e39b6dc6..93c6514ad 100644
--- a/components/smart/__tests__/UrlField.spec.js
+++ b/components/smart/__tests__/UrlField.spec.js
@@ -1,5 +1,5 @@
-import urlField from "../UrlField"
 import { mount } from "@vue/test-utils"
+import urlField from "../UrlField"
 
 const factory = (props) =>
   mount(urlField, {
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 404315b1f..7697370ed 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -18,8 +18,8 @@
       <ul>
         <li>
           <input
-            type="text"
             v-model="name"
+            type="text"
             :placeholder="$t('my_new_team')"
             @keyup.enter="addNewTeam"
           />
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import * as team_utils from "~/helpers/teams/utils"
+import * as teamUtils from "~/helpers/teams/utils"
 
 export default {
   props: {
@@ -67,9 +67,9 @@ export default {
         return
       }
       // Call to the graphql mutation
-      team_utils
+      teamUtils
         .createTeam(this.$apollo, name)
-        .then((data) => {
+        .then(() => {
           // Result
           this.hideModal()
         })
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 64ddba295..0cb4d858d 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -18,8 +18,8 @@
       <ul>
         <li>
           <input
-            type="text"
             v-model="name"
+            type="text"
             :placeholder="editingTeam.name"
             @keyup.enter="saveTeam"
           />
@@ -60,22 +60,38 @@
               <input
                 :placeholder="$t('permissions')"
                 :name="'value' + index"
-                :value="typeof member.role === 'string' ? member.role : JSON.stringify(member.role)"
+                :value="
+                  typeof member.role === 'string'
+                    ? member.role
+                    : JSON.stringify(member.role)
+                "
                 readonly
               />
               <template slot="popover">
                 <div>
-                  <button class="icon" v-close-popover @click="updateRole(index, 'OWNER')">
+                  <button
+                    v-close-popover
+                    class="icon"
+                    @click="updateRole(index, 'OWNER')"
+                  >
                     OWNER
                   </button>
                 </div>
                 <div>
-                  <button class="icon" v-close-popover @click="updateRole(index, 'EDITOR')">
+                  <button
+                    v-close-popover
+                    class="icon"
+                    @click="updateRole(index, 'EDITOR')"
+                  >
                     EDITOR
                   </button>
                 </div>
                 <div>
-                  <button class="icon" v-close-popover @click="updateRole(index, 'VIEWER')">
+                  <button
+                    v-close-popover
+                    class="icon"
+                    @click="updateRole(index, 'VIEWER')"
+                  >
                     VIEWER
                   </button>
                 </div>
@@ -86,10 +102,10 @@
         <div>
           <li>
             <button
+              id="member"
+              v-tooltip.bottom="$t('delete')"
               class="icon"
               @click="removeExistingTeamMember(member.user.uid)"
-              v-tooltip.bottom="$t('delete')"
-              id="member"
             >
               <i class="material-icons">delete</i>
             </button>
@@ -110,9 +126,9 @@
       >
         <li>
           <input
+            v-model="member.key"
             :placeholder="$t('email')"
             :name="'param' + index"
-            v-model="member.key"
             autofocus
           />
         </li>
@@ -123,23 +139,37 @@
                 :placeholder="$t('permissions')"
                 :name="'value' + index"
                 :value="
-                  typeof member.value === 'string' ? member.value : JSON.stringify(member.value)
+                  typeof member.value === 'string'
+                    ? member.value
+                    : JSON.stringify(member.value)
                 "
                 readonly
               />
               <template slot="popover">
                 <div>
-                  <button class="icon" v-close-popover @click="member.value = 'OWNER'">
+                  <button
+                    v-close-popover
+                    class="icon"
+                    @click="member.value = 'OWNER'"
+                  >
                     OWNER
                   </button>
                 </div>
                 <div>
-                  <button class="icon" v-close-popover @click="member.value = 'EDITOR'">
+                  <button
+                    v-close-popover
+                    class="icon"
+                    @click="member.value = 'EDITOR'"
+                  >
                     EDITOR
                   </button>
                 </div>
                 <div>
-                  <button class="icon" v-close-popover @click="member.value = 'VIEWER'">
+                  <button
+                    v-close-popover
+                    class="icon"
+                    @click="member.value = 'VIEWER'"
+                  >
                     VIEWER
                   </button>
                 </div>
@@ -150,10 +180,10 @@
         <div>
           <li>
             <button
+              id="member"
+              v-tooltip.bottom="$t('delete')"
               class="icon"
               @click="removeTeamMember(index)"
-              v-tooltip.bottom="$t('delete')"
-              id="member"
             >
               <i class="material-icons">delete</i>
             </button>
@@ -186,15 +216,15 @@
 </template>
 
 <script>
-import * as team_utils from "~/helpers/teams/utils"
 import cloneDeep from "lodash/cloneDeep"
+import * as teamUtils from "~/helpers/teams/utils"
 import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"
 
 export default {
   props: {
     show: Boolean,
-    editingTeam: Object,
-    editingteamID: String,
+    editingTeam: { type: Object, default: () => {} },
+    editingteamID: { type: String, default: null },
   },
   data() {
     return {
@@ -205,16 +235,6 @@ export default {
       membersAdapter: new TeamMemberAdapter(null),
     }
   },
-  mounted() {
-    this.membersAdapter.members$.subscribe((list) => {
-      this.members = cloneDeep(list)
-    })
-  },
-  watch: {
-    editingteamID(teamID) {
-      this.membersAdapter.changeTeamID(teamID)
-    },
-  },
   computed: {
     editingTeamCopy() {
       return this.editingTeam
@@ -228,18 +248,28 @@ export default {
       },
     },
   },
+  watch: {
+    editingteamID(teamID) {
+      this.membersAdapter.changeTeamID(teamID)
+    },
+  },
+  mounted() {
+    this.membersAdapter.members$.subscribe((list) => {
+      this.members = cloneDeep(list)
+    })
+  },
   methods: {
     updateRole(id, role) {
       this.members[id].role = role
     },
     addTeamMember() {
-      let value = { key: "", value: "" }
+      const value = { key: "", value: "" }
       this.newMembers.push(value)
     },
     removeExistingTeamMember(userID) {
-      team_utils
+      teamUtils
         .removeTeamMember(this.$apollo, userID, this.editingteamID)
-        .then((data) => {
+        .then(() => {
           // Result
           this.$toast.success(this.$t("user_removed"), {
             icon: "done",
@@ -258,13 +288,20 @@ export default {
       this.newMembers.splice(index, 1)
     },
     validateEmail(emailID) {
-      if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(emailID)) {
+      if (
+        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+          emailID
+        )
+      ) {
         return true
       }
       return false
     },
     saveTeam() {
-      if (this.$data.rename !== null && this.$data.rename.replace(/\s/g, "").length < 6) {
+      if (
+        this.$data.rename !== null &&
+        this.$data.rename.replace(/\s/g, "").length < 6
+      ) {
         this.$toast.error(this.$t("string_length_insufficient"), {
           icon: "error",
         })
@@ -275,14 +312,18 @@ export default {
           this.$toast.error(this.$t("invalid_emailID_format"), {
             icon: "error",
           })
-          return
         }
       })
       this.$data.newMembers.forEach((element) => {
         // Call to the graphql mutation
-        team_utils
-          .addTeamMemberByEmail(this.$apollo, element.value, element.key, this.editingteamID)
-          .then((data) => {
+        teamUtils
+          .addTeamMemberByEmail(
+            this.$apollo,
+            element.value,
+            element.key,
+            this.editingteamID
+          )
+          .then(() => {
             // Result
             this.$toast.success(this.$t("team_saved"), {
               icon: "done",
@@ -299,9 +340,14 @@ export default {
       })
       let messageShown = true
       this.members.forEach((element) => {
-        team_utils
-          .updateTeamMemberRole(this.$apollo, element.user.uid, element.role, this.editingteamID)
-          .then((data) => {
+        teamUtils
+          .updateTeamMemberRole(
+            this.$apollo,
+            element.user.uid,
+            element.role,
+            this.editingteamID
+          )
+          .then(() => {
             // Result
             if (messageShown) {
               this.$toast.success(this.$t("role_updated"), {
@@ -323,16 +369,17 @@ export default {
           })
       })
       if (this.$data.rename !== null) {
-        const newName = this.name === this.$data.rename ? this.name : this.$data.rename
+        const newName =
+          this.name === this.$data.rename ? this.name : this.$data.rename
         if (!/\S/.test(newName))
           return this.$toast.error(this.$t("team_name_empty"), {
             icon: "error",
           })
         // Call to the graphql mutation
         if (this.name !== this.rename)
-          team_utils
+          teamUtils
             .renameTeam(this.$apollo, newName, this.editingteamID)
-            .then((data) => {
+            .then(() => {
               // Result
               this.$toast.success(this.$t("team_saved"), {
                 icon: "done",
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 5a9f8069f..039ec2c8f 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -2,42 +2,45 @@
   <div class="row-wrapper">
     <div>
       <button
+        v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
         class="icon"
         @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
-        v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
       >
         <i class="material-icons">group</i>
         <span>{{ team.name }}</span>
       </button>
     </div>
     <v-popover>
-      <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+      <button v-tooltip.left="$t('more')" class="tooltip-target icon">
         <i class="material-icons">more_vert</i>
       </button>
       <template slot="popover">
         <div v-if="team.myRole === 'OWNER'">
-          <button class="icon" @click="$emit('edit-team')" v-close-popover>
+          <button v-close-popover class="icon" @click="$emit('edit-team')">
             <i class="material-icons">create</i>
             <span>{{ $t("edit") }}</span>
           </button>
         </div>
         <div v-if="team.myRole === 'OWNER'">
-          <button class="icon" @click="deleteTeam" v-close-popover>
+          <button v-close-popover class="icon" @click="deleteTeam">
             <i class="material-icons">delete</i>
             <span>{{ $t("delete") }}</span>
           </button>
         </div>
         <div>
           <button
-            class="icon"
-            @click="exitTeam"
             v-close-popover
+            class="icon"
             :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
+            @click="exitTeam"
           >
             <i class="material-icons">remove</i>
             <div
               v-tooltip.left="{
-                content: team.myRole === 'OWNER' && team.ownersCount == 1 ? $t('disable_exit') : '',
+                content:
+                  team.myRole === 'OWNER' && team.ownersCount == 1
+                    ? $t('disable_exit')
+                    : '',
               }"
             >
               <span>{{ $t("exit") }}</span>
@@ -49,34 +52,21 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-ul {
-  display: flex;
-  flex-direction: column;
-}
-
-ul li {
-  display: flex;
-  padding-left: 16px;
-  border-left: 1px solid var(--brd-color);
-}
-</style>
-
 <script>
-import * as team_utils from "~/helpers/teams/utils"
+import * as teamUtils from "~/helpers/teams/utils"
 
 export default {
   props: {
-    team: Object,
-    teamID: String,
+    team: { type: Object, default: () => {} },
+    teamID: { type: String, default: null },
   },
   methods: {
     deleteTeam() {
       if (!confirm("Are you sure you want to remove this team?")) return
       // Call to the graphql mutation
-      team_utils
+      teamUtils
         .deleteTeam(this.$apollo, this.teamID)
-        .then((data) => {
+        .then(() => {
           // Result
           this.$toast.success(this.$t("new_team_created"), {
             icon: "done",
@@ -92,9 +82,9 @@ export default {
     },
     exitTeam() {
       if (!confirm("Are you sure you want to exit this team?")) return
-      team_utils
+      teamUtils
         .exitTeam(this.$apollo, this.teamID)
-        .then((data) => {
+        .then(() => {
           // Result
           this.$toast.success(this.$t("team_exited"), {
             icon: "done",
@@ -111,3 +101,16 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+ul {
+  display: flex;
+  flex-direction: column;
+}
+
+ul li {
+  display: flex;
+  padding-left: 16px;
+  border-left: 1px solid var(--brd-color);
+}
+</style>
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 4f67ff403..5c422f5c3 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -1,5 +1,11 @@
 <template>
-  <AppSection class="green" icon="history" :label="$t('teams')" ref="teams" no-legend>
+  <AppSection
+    ref="teams"
+    class="green"
+    icon="history"
+    :label="$t('teams')"
+    no-legend
+  >
     <div class="flex flex-col">
       <label>{{ $t("teams") }}</label>
       <div v-if="fb.currentUser"></div>
@@ -15,8 +21,8 @@
     <TeamsEdit
       :team="myTeams[0]"
       :show="showModalEdit"
-      :editingTeam="editingTeam"
-      :editingteamID="editingteamID"
+      :editing-team="editingTeam"
+      :editingteam-i-d="editingteamID"
       @hide-modal="displayModalEdit(false)"
     />
     <div class="row-wrapper">
@@ -27,31 +33,26 @@
         </button>
       </div>
     </div>
-    <p v-if="$apollo.queries.myTeams.loading" class="info">{{ $t("loading") }}</p>
+    <p v-if="$apollo.queries.myTeams.loading" class="info">
+      {{ $t("loading") }}
+    </p>
     <p v-if="myTeams.length === 0" class="info">
       <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
     </p>
     <div v-else class="virtual-list">
       <ul class="flex-col">
         <li v-for="(team, index) in myTeams" :key="`team-${index}`">
-          <TeamsTeam :teamID="team.id" :team="team" @edit-team="editTeam(team, team.id)" />
+          <TeamsTeam
+            :team-i-d="team.id"
+            :team="team"
+            @edit-team="editTeam(team, team.id)"
+          />
         </li>
       </ul>
     </div>
   </AppSection>
 </template>
 
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 241px);
-}
-
-ul {
-  display: flex;
-  flex-direction: column;
-}
-</style>
-
 <script>
 import gql from "graphql-tag"
 import { fb } from "~/helpers/fb"
@@ -102,6 +103,9 @@ export default {
       pollInterval: 10000,
     },
   },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
   methods: {
     displayModalAdd(shouldDisplay) {
       this.showModalAdd = shouldDisplay
@@ -113,7 +117,7 @@ export default {
     },
     editTeam(team, teamID) {
       this.editingTeam = team
-      this.editingteamID = team.id
+      this.editingteamID = teamID
       this.displayModalEdit(true)
     },
     resetSelectedData() {
@@ -121,8 +125,16 @@ export default {
       this.$data.editingteamID = undefined
     },
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
 }
 </script>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 241px);
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/helpers/__tests__/network-ExtDisabled.spec.js b/helpers/__tests__/network-ExtDisabled.spec.js
index cc6d3eff4..a16544003 100644
--- a/helpers/__tests__/network-ExtDisabled.spec.js
+++ b/helpers/__tests__/network-ExtDisabled.spec.js
@@ -1,6 +1,8 @@
 import { cancelRunningRequest, sendNetworkRequest } from "../network"
 
-import AxiosStrategy, { cancelRunningAxiosRequest } from "../strategies/AxiosStrategy"
+import AxiosStrategy, {
+  cancelRunningAxiosRequest,
+} from "../strategies/AxiosStrategy"
 import ExtensionStrategy, {
   cancelRunningExtensionRequest,
   hasExtensionInstalled,
@@ -23,9 +25,9 @@ jest.mock("~/newstore/settings", () => {
   return {
     settingsStore: {
       value: {
-        EXTENSIONS_ENABLED: false
-      }
-    }
+        EXTENSIONS_ENABLED: false,
+      },
+    },
   }
 })
 
@@ -60,7 +62,6 @@ describe("cancelRunningRequest", () => {
 })
 
 describe("sendNetworkRequest", () => {
-
   test("runs only axios request if extension not allowed in settings and extension is installed and clears the progress bar", async () => {
     hasExtensionInstalled.mockReturnValue(true)
 
diff --git a/helpers/__tests__/network-ExtEnabled.spec.js b/helpers/__tests__/network-ExtEnabled.spec.js
index 98f348e1a..ef5944e3d 100644
--- a/helpers/__tests__/network-ExtEnabled.spec.js
+++ b/helpers/__tests__/network-ExtEnabled.spec.js
@@ -1,7 +1,8 @@
-
 import { cancelRunningRequest, sendNetworkRequest } from "../network"
 
-import AxiosStrategy, { cancelRunningAxiosRequest } from "../strategies/AxiosStrategy"
+import AxiosStrategy, {
+  cancelRunningAxiosRequest,
+} from "../strategies/AxiosStrategy"
 import ExtensionStrategy, {
   cancelRunningExtensionRequest,
   hasExtensionInstalled,
@@ -24,9 +25,9 @@ jest.mock("~/newstore/settings", () => {
   return {
     settingsStore: {
       value: {
-        EXTENSIONS_ENABLED: true
-      }
-    }
+        EXTENSIONS_ENABLED: true,
+      },
+    },
   }
 })
 
diff --git a/helpers/__tests__/postwomanTesting.spec.js b/helpers/__tests__/postwomanTesting.spec.js
index 83184b39a..1a19a908d 100644
--- a/helpers/__tests__/postwomanTesting.spec.js
+++ b/helpers/__tests__/postwomanTesting.spec.js
@@ -1,5 +1,4 @@
-import { PASS, FAIL } from "../postwomanTesting"
-import runTestScriptWithVariables from "../postwomanTesting"
+import runTestScriptWithVariables, { PASS, FAIL } from "../postwomanTesting"
 
 function getTestResult(script, index) {
   return runTestScriptWithVariables(script).testResults[index].result
@@ -41,8 +40,12 @@ describe("toBe", () => {
   test("test for negative assertion (.not.toBe)", () => {
     expect(getTestResult("pw.expect(1).not.toBe(1)", 0)).toEqual(FAIL)
     expect(getTestResult("pw.expect(1).not.toBe(2)", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect('world').not.toBe('planet')", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect('world').not.toBe('world')", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect('world').not.toBe('planet')", 0)).toEqual(
+      PASS
+    )
+    expect(getTestResult("pw.expect('world').not.toBe('world')", 0)).toEqual(
+      FAIL
+    )
   })
 })
 
@@ -54,16 +57,29 @@ describe("toHaveProperty", () => {
 
   test("test for positive assertion (.toHaveProperty)", () => {
     expect(
-      getTestResult(`pw.expect(${JSON.stringify(dummyResponse)}).toHaveProperty("id")`, 0)
+      getTestResult(
+        `pw.expect(${JSON.stringify(dummyResponse)}).toHaveProperty("id")`,
+        0
+      )
+    ).toEqual(PASS)
+    expect(
+      getTestResult(`pw.expect(${dummyResponse.id}).toBe(843)`, 0)
     ).toEqual(PASS)
-    expect(getTestResult(`pw.expect(${dummyResponse.id}).toBe(843)`, 0)).toEqual(PASS)
   })
   test("test for negative assertion (.not.toHaveProperty)", () => {
     expect(
-      getTestResult(`pw.expect(${JSON.stringify(dummyResponse)}).not.toHaveProperty("type")`, 0)
+      getTestResult(
+        `pw.expect(${JSON.stringify(
+          dummyResponse
+        )}).not.toHaveProperty("type")`,
+        0
+      )
     ).toEqual(PASS)
     expect(
-      getTestResult(`pw.expect(${JSON.stringify(dummyResponse)}).toHaveProperty("type")`, 0)
+      getTestResult(
+        `pw.expect(${JSON.stringify(dummyResponse)}).toHaveProperty("type")`,
+        0
+      )
     ).toEqual(FAIL)
   })
 })
@@ -77,12 +93,18 @@ describe("toBeLevel2xx", () => {
   })
   test("test for strings", () => {
     expect(getTestResult("pw.expect('200').toBeLevel2xx()", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect('200').not.toBeLevel2xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect('200').not.toBeLevel2xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect('300').toBeLevel2xx()", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect('300').not.toBeLevel2xx()", 0)).toEqual(PASS)
+    expect(getTestResult("pw.expect('300').not.toBeLevel2xx()", 0)).toEqual(
+      PASS
+    )
   })
   test("failed to parse to integer", () => {
-    expect(getTestResult("pw.expect(undefined).toBeLevel2xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect(undefined).toBeLevel2xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect(null).toBeLevel2xx()", 0)).toEqual(FAIL)
     expect(() => {
       runTestScriptWithVariables("pw.expect(Symbol('test')).toBeLevel2xx()")
@@ -99,12 +121,18 @@ describe("toBeLevel3xx()", () => {
   })
   test("test for strings", () => {
     expect(getTestResult("pw.expect('300').toBeLevel3xx()", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect('300').not.toBeLevel3xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect('300').not.toBeLevel3xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect('400').toBeLevel3xx()", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect('400').not.toBeLevel3xx()", 0)).toEqual(PASS)
+    expect(getTestResult("pw.expect('400').not.toBeLevel3xx()", 0)).toEqual(
+      PASS
+    )
   })
   test("failed to parse to integer", () => {
-    expect(getTestResult("pw.expect(undefined).toBeLevel3xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect(undefined).toBeLevel3xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect(null).toBeLevel3xx()", 0)).toEqual(FAIL)
     expect(() => {
       runTestScriptWithVariables("pw.expect(Symbol('test')).toBeLevel3xx()")
@@ -121,12 +149,18 @@ describe("toBeLevel4xx()", () => {
   })
   test("test for strings", () => {
     expect(getTestResult("pw.expect('400').toBeLevel4xx()", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect('400').not.toBeLevel4xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect('400').not.toBeLevel4xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect('500').toBeLevel4xx()", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect('500').not.toBeLevel4xx()", 0)).toEqual(PASS)
+    expect(getTestResult("pw.expect('500').not.toBeLevel4xx()", 0)).toEqual(
+      PASS
+    )
   })
   test("failed to parse to integer", () => {
-    expect(getTestResult("pw.expect(undefined).toBeLevel4xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect(undefined).toBeLevel4xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect(null).toBeLevel4xx()", 0)).toEqual(FAIL)
     expect(() => {
       runTestScriptWithVariables("pw.expect(Symbol('test')).toBeLevel4xx()")
@@ -143,12 +177,18 @@ describe("toBeLevel5xx()", () => {
   })
   test("test for strings", () => {
     expect(getTestResult("pw.expect('500').toBeLevel5xx()", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect('500').not.toBeLevel5xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect('500').not.toBeLevel5xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect('200').toBeLevel5xx()", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect('200').not.toBeLevel5xx()", 0)).toEqual(PASS)
+    expect(getTestResult("pw.expect('200').not.toBeLevel5xx()", 0)).toEqual(
+      PASS
+    )
   })
   test("failed to parse to integer", () => {
-    expect(getTestResult("pw.expect(undefined).toBeLevel5xx()", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect(undefined).toBeLevel5xx()", 0)).toEqual(
+      FAIL
+    )
     expect(getTestResult("pw.expect(null).toBeLevel5xx()", 0)).toEqual(FAIL)
     expect(() => {
       runTestScriptWithVariables("pw.expect(Symbol('test')).toBeLevel5xx()")
@@ -160,40 +200,85 @@ describe("toHaveLength()", () => {
   test("test for strings", () => {
     expect(getTestResult("pw.expect('word').toHaveLength(4)", 0)).toEqual(PASS)
     expect(getTestResult("pw.expect('word').toHaveLength(5)", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect('word').not.toHaveLength(4)", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect('word').not.toHaveLength(5)", 0)).toEqual(PASS)
+    expect(getTestResult("pw.expect('word').not.toHaveLength(4)", 0)).toEqual(
+      FAIL
+    )
+    expect(getTestResult("pw.expect('word').not.toHaveLength(5)", 0)).toEqual(
+      PASS
+    )
   })
   test("test for arrays", () => {
-    const fruits = "['apples', 'bananas', 'oranges', 'grapes', 'strawberries', 'cherries']"
-    expect(getTestResult(`pw.expect(${fruits}).toHaveLength(6)`, 0)).toEqual(PASS)
-    expect(getTestResult(`pw.expect(${fruits}).toHaveLength(7)`, 0)).toEqual(FAIL)
-    expect(getTestResult(`pw.expect(${fruits}).not.toHaveLength(6)`, 0)).toEqual(FAIL)
-    expect(getTestResult(`pw.expect(${fruits}).not.toHaveLength(7)`, 0)).toEqual(PASS)
+    const fruits =
+      "['apples', 'bananas', 'oranges', 'grapes', 'strawberries', 'cherries']"
+    expect(getTestResult(`pw.expect(${fruits}).toHaveLength(6)`, 0)).toEqual(
+      PASS
+    )
+    expect(getTestResult(`pw.expect(${fruits}).toHaveLength(7)`, 0)).toEqual(
+      FAIL
+    )
+    expect(
+      getTestResult(`pw.expect(${fruits}).not.toHaveLength(6)`, 0)
+    ).toEqual(FAIL)
+    expect(
+      getTestResult(`pw.expect(${fruits}).not.toHaveLength(7)`, 0)
+    ).toEqual(PASS)
   })
 })
 
 describe("toBeType()", () => {
   test("test for positive assertion", () => {
-    expect(getTestResult("pw.expect('random').toBeType('string')", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect(true).toBeType('boolean')", 0)).toEqual(PASS)
+    expect(getTestResult("pw.expect('random').toBeType('string')", 0)).toEqual(
+      PASS
+    )
+    expect(getTestResult("pw.expect(true).toBeType('boolean')", 0)).toEqual(
+      PASS
+    )
     expect(getTestResult("pw.expect(5).toBeType('number')", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect(new Date()).toBeType('object')", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect(undefined).toBeType('undefined')", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect(BigInt(123)).toBeType('bigint')", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect(Symbol('test')).toBeType('symbol')", 0)).toEqual(PASS)
-    expect(getTestResult("pw.expect(function() {}).toBeType('function')", 0)).toEqual(PASS)
+    expect(
+      getTestResult("pw.expect(new Date()).toBeType('object')", 0)
+    ).toEqual(PASS)
+    expect(
+      getTestResult("pw.expect(undefined).toBeType('undefined')", 0)
+    ).toEqual(PASS)
+    expect(
+      getTestResult("pw.expect(BigInt(123)).toBeType('bigint')", 0)
+    ).toEqual(PASS)
+    expect(
+      getTestResult("pw.expect(Symbol('test')).toBeType('symbol')", 0)
+    ).toEqual(PASS)
+    expect(
+      getTestResult("pw.expect(function() {}).toBeType('function')", 0)
+    ).toEqual(PASS)
   })
   test("test for negative assertion", () => {
-    expect(getTestResult("pw.expect('random').not.toBeType('string')", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect(true).not.toBeType('boolean')", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect(5).not.toBeType('number')", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect(new Date()).not.toBeType('object')", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect(undefined).not.toBeType('undefined')", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect(BigInt(123)).not.toBeType('bigint')", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect(Symbol('test')).not.toBeType('symbol')", 0)).toEqual(FAIL)
-    expect(getTestResult("pw.expect(function() {}).not.toBeType('function')", 0)).toEqual(FAIL)
+    expect(
+      getTestResult("pw.expect('random').not.toBeType('string')", 0)
+    ).toEqual(FAIL)
+    expect(getTestResult("pw.expect(true).not.toBeType('boolean')", 0)).toEqual(
+      FAIL
+    )
+    expect(getTestResult("pw.expect(5).not.toBeType('number')", 0)).toEqual(
+      FAIL
+    )
+    expect(
+      getTestResult("pw.expect(new Date()).not.toBeType('object')", 0)
+    ).toEqual(FAIL)
+    expect(
+      getTestResult("pw.expect(undefined).not.toBeType('undefined')", 0)
+    ).toEqual(FAIL)
+    expect(
+      getTestResult("pw.expect(BigInt(123)).not.toBeType('bigint')", 0)
+    ).toEqual(FAIL)
+    expect(
+      getTestResult("pw.expect(Symbol('test')).not.toBeType('symbol')", 0)
+    ).toEqual(FAIL)
+    expect(
+      getTestResult("pw.expect(function() {}).not.toBeType('function')", 0)
+    ).toEqual(FAIL)
   })
   test("unexpected type", () => {
-    expect(getTestResult("pw.expect('random').toBeType('unknown')", 0)).toEqual(FAIL)
+    expect(getTestResult("pw.expect('random').toBeType('unknown')", 0)).toEqual(
+      FAIL
+    )
   })
 })
diff --git a/helpers/apollo.ts b/helpers/apollo.ts
index be574f855..3ee9fc7ea 100644
--- a/helpers/apollo.ts
+++ b/helpers/apollo.ts
@@ -1,8 +1,13 @@
-import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client/core"
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache,
+  split,
+} from "@apollo/client/core"
 import { WebSocketLink } from "@apollo/client/link/ws"
 import { setContext } from "@apollo/client/link/context"
-import { fb } from "./fb"
 import { getMainDefinition } from "@apollo/client/utilities"
+import { fb } from "./fb"
 
 let authToken: String | null = null
 
@@ -56,7 +61,10 @@ const wsLink = new WebSocketLink({
 const splitLink = split(
   ({ query }) => {
     const definition = getMainDefinition(query)
-    return definition.kind === "OperationDefinition" && definition.operation === "subscription"
+    return (
+      definition.kind === "OperationDefinition" &&
+      definition.operation === "subscription"
+    )
   },
   wsLink,
   httpLink
diff --git a/helpers/codegen/__tests__/codegen.spec.js b/helpers/codegen/__tests__/codegen.spec.js
index 25c7e4a2d..574aacbce 100644
--- a/helpers/codegen/__tests__/codegen.spec.js
+++ b/helpers/codegen/__tests__/codegen.spec.js
@@ -8,7 +8,7 @@ const TEST_HTTP_PASSWORD = "mockPassword"
 const TEST_BEARER_TOKEN = "abcdefghijklmn"
 const TEST_RAW_REQUEST_BODY = "foo=bar&baz=qux"
 const TEST_RAW_PARAMS_JSON = '{"foo": "bar", "baz": "qux"}'
-const TEST_RAW_PARAMS_XML = `<?xml version=\'1.0\' encoding=\'utf-8\'?>
+const TEST_RAW_PARAMS_XML = `<?xml version='1.0' encoding='utf-8'?>
 <xml>
   <element foo="bar"></element>
 </xml>`
diff --git a/helpers/codegen/generators/c-libcurl.js b/helpers/codegen/generators/c-libcurl.js
index 7c6dbb6f6..1f0cb8d92 100644
--- a/helpers/codegen/generators/c-libcurl.js
+++ b/helpers/codegen/generators/c-libcurl.js
@@ -20,13 +20,20 @@ export const CLibcurlCodegen = {
     const requestString = []
 
     requestString.push("CURL *hnd = curl_easy_init();")
-    requestString.push(`curl_easy_setopt(hnd, CURLOPT_CUSTOMREQUEST, "${method}");`)
-    requestString.push(`curl_easy_setopt(hnd, CURLOPT_URL, "${url}${pathName}${queryString}");`)
+    requestString.push(
+      `curl_easy_setopt(hnd, CURLOPT_CUSTOMREQUEST, "${method}");`
+    )
+    requestString.push(
+      `curl_easy_setopt(hnd, CURLOPT_URL, "${url}${pathName}${queryString}");`
+    )
     requestString.push(`struct curl_slist *headers = NULL;`)
 
     if (headers) {
       headers.forEach(({ key, value }) => {
-        if (key) requestString.push(`headers = curl_slist_append(headers, "${key}: ${value}");`)
+        if (key)
+          requestString.push(
+            `headers = curl_slist_append(headers, "${key}: ${value}");`
+          )
       })
     }
 
@@ -50,10 +57,15 @@ export const CLibcurlCodegen = {
         requestBody = `"${requestBody}"`
       } else requestBody = JSON.stringify(requestBody)
 
-      requestString.push(`headers = curl_slist_append(headers, "Content-Type: ${contentType}");`)
+      requestString.push(
+        `headers = curl_slist_append(headers, "Content-Type: ${contentType}");`
+      )
+      requestString.push("curl_easy_setopt(hnd, CURLOPT_HTTPHEADER, headers);")
+      requestString.push(
+        `curl_easy_setopt(hnd, CURLOPT_POSTFIELDS, ${requestBody});`
+      )
+    } else
       requestString.push("curl_easy_setopt(hnd, CURLOPT_HTTPHEADER, headers);")
-      requestString.push(`curl_easy_setopt(hnd, CURLOPT_POSTFIELDS, ${requestBody});`)
-    } else requestString.push("curl_easy_setopt(hnd, CURLOPT_HTTPHEADER, headers);")
 
     requestString.push(`CURLcode ret = curl_easy_perform(hnd);`)
     return requestString.join("\n")
diff --git a/helpers/codegen/generators/cs-restsharp.js b/helpers/codegen/generators/cs-restsharp.js
index 11052b612..92d3f47f9 100644
--- a/helpers/codegen/generators/cs-restsharp.js
+++ b/helpers/codegen/generators/cs-restsharp.js
@@ -57,12 +57,16 @@ export const CsRestsharpCodegen = {
         `client.Authenticator = new HttpBasicAuthenticator("${httpUser}", "${httpPassword}");\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
-      requestString.push(`request.AddHeader("Authorization", "Bearer ${bearerToken}");\n`)
+      requestString.push(
+        `request.AddHeader("Authorization", "Bearer ${bearerToken}");\n`
+      )
     }
 
     // content type
     if (contentType) {
-      requestString.push(`request.AddHeader("Content-Type", "${contentType}");\n`)
+      requestString.push(
+        `request.AddHeader("Content-Type", "${contentType}");\n`
+      )
     }
 
     // custom headers
diff --git a/helpers/codegen/generators/curl.js b/helpers/codegen/generators/curl.js
index c83069bad..5f6979478 100644
--- a/helpers/codegen/generators/curl.js
+++ b/helpers/codegen/generators/curl.js
@@ -23,7 +23,9 @@ export const CurlCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       requestString.push(
-        `  -H 'Authorization: Basic ${window.btoa(unescape(encodeURIComponent(basic)))}'`
+        `  -H 'Authorization: Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}'`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       requestString.push(`  -H 'Authorization: Bearer ${bearerToken}'`)
diff --git a/helpers/codegen/generators/go-native.js b/helpers/codegen/generators/go-native.js
index df2bde681..477b9b448 100644
--- a/helpers/codegen/generators/go-native.js
+++ b/helpers/codegen/generators/go-native.js
@@ -22,8 +22,8 @@ export const GoNativeCodegen = {
     const requestString = []
     let genHeaders = []
     // initial request setup
-    let requestBody = rawInput ? rawParams : rawRequestBody
-    if (method == "GET") {
+    const requestBody = rawInput ? rawParams : rawRequestBody
+    if (method === "GET") {
       requestString.push(
         `req, err := http.NewRequest("${method}", "${url}${pathName}${queryString}")\n`
       )
@@ -52,7 +52,9 @@ export const GoNativeCodegen = {
         )}")\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
-      genHeaders.push(`req.Header.Set("Authorization", "Bearer ${bearerToken}")\n`)
+      genHeaders.push(
+        `req.Header.Set("Authorization", "Bearer ${bearerToken}")\n`
+      )
     }
     // custom headers
     if (headers) {
@@ -62,7 +64,9 @@ export const GoNativeCodegen = {
     }
     genHeaders = genHeaders.join("").slice(0, -1)
     requestString.push(`${genHeaders}\n`)
-    requestString.push(`if err != nil {\n  log.Fatalf("An Error Occured %v", err)\n}\n\n`)
+    requestString.push(
+      `if err != nil {\n  log.Fatalf("An Error Occured %v", err)\n}\n\n`
+    )
 
     // request boilerplate
     requestString.push(`client := &http.Client{}\n`)
diff --git a/helpers/codegen/generators/java-okhttp.js b/helpers/codegen/generators/java-okhttp.js
index 3252d6936..6061358f2 100644
--- a/helpers/codegen/generators/java-okhttp.js
+++ b/helpers/codegen/generators/java-okhttp.js
@@ -19,7 +19,9 @@ export const JavaOkhttpCodegen = {
   }) => {
     const requestString = []
 
-    requestString.push("OkHttpClient client = new OkHttpClient().newBuilder().build();")
+    requestString.push(
+      "OkHttpClient client = new OkHttpClient().newBuilder().build();"
+    )
 
     if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
       let requestBody = rawInput ? rawParams : rawRequestBody
@@ -28,17 +30,21 @@ export const JavaOkhttpCodegen = {
         requestBody = `"${requestBody}"`
       } else requestBody = JSON.stringify(requestBody)
 
-      requestString.push(`MediaType mediaType = MediaType.parse("${contentType}");`)
-      requestString.push(`RequestBody body = RequestBody.create(mediaType,${requestBody});`)
+      requestString.push(
+        `MediaType mediaType = MediaType.parse("${contentType}");`
+      )
+      requestString.push(
+        `RequestBody body = RequestBody.create(mediaType,${requestBody});`
+      )
     }
 
     requestString.push("Request request = new Request.Builder()")
-    requestString.push(`.url(\"${url}${pathName}${queryString}\")`)
+    requestString.push(`.url("${url}${pathName}${queryString}")`)
 
     if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
-      requestString.push(`.method(\"${method}\", body)`)
+      requestString.push(`.method("${method}", body)`)
     } else {
-      requestString.push(`.method(\"${method}\", null)`)
+      requestString.push(`.method("${method}", null)`)
     }
 
     if (auth === "Basic Auth") {
@@ -49,12 +55,14 @@ export const JavaOkhttpCodegen = {
         )}") \n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
-      requestString.push(`.addHeader("authorization", "Bearer ${bearerToken}" ) \n`)
+      requestString.push(
+        `.addHeader("authorization", "Bearer ${bearerToken}" ) \n`
+      )
     }
 
     if (headers) {
       headers.forEach(({ key, value }) => {
-        if (key) requestString.push(`.addHeader(\"${key}\", \"${value}\")`)
+        if (key) requestString.push(`.addHeader("${key}", "${value}")`)
       })
     }
 
diff --git a/helpers/codegen/generators/java-unirest.js b/helpers/codegen/generators/java-unirest.js
index 19ee32003..d4191513a 100644
--- a/helpers/codegen/generators/java-unirest.js
+++ b/helpers/codegen/generators/java-unirest.js
@@ -37,7 +37,9 @@ export const JavaUnirestCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       requestString.push(
-        `.header("authorization", "Basic ${window.btoa(unescape(encodeURIComponent(basic)))}") \n`
+        `.header("authorization", "Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}") \n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       requestString.push(`.header("authorization", "Bearer ${bearerToken}") \n`)
diff --git a/helpers/codegen/generators/javascript-fetch.js b/helpers/codegen/generators/javascript-fetch.js
index 81271ef30..62f1f3b07 100644
--- a/helpers/codegen/generators/javascript-fetch.js
+++ b/helpers/codegen/generators/javascript-fetch.js
@@ -26,7 +26,9 @@ export const JavascriptFetchCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `    "Authorization": "Basic ${window.btoa(unescape(encodeURIComponent(basic)))}",\n`
+        `    "Authorization": "Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}",\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`    "Authorization": "Bearer ${bearerToken}",\n`)
diff --git a/helpers/codegen/generators/javascript-jquery.js b/helpers/codegen/generators/javascript-jquery.js
index 040aecac3..5401f0bde 100644
--- a/helpers/codegen/generators/javascript-jquery.js
+++ b/helpers/codegen/generators/javascript-jquery.js
@@ -18,9 +18,11 @@ export const JavascriptJqueryCodegen = {
     headers,
   }) => {
     const requestString = []
-    let genHeaders = []
+    const genHeaders = []
 
-    requestString.push(`jQuery.ajax({\n  url: "${url}${pathName}${queryString}"`)
+    requestString.push(
+      `jQuery.ajax({\n  url: "${url}${pathName}${queryString}"`
+    )
     requestString.push(`,\n  method: "${method.toUpperCase()}"`)
     const requestBody = rawInput ? rawParams : rawRequestBody
 
@@ -41,12 +43,16 @@ export const JavascriptJqueryCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `    "Authorization": "Basic ${window.btoa(unescape(encodeURIComponent(basic)))}",\n`
+        `    "Authorization": "Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}",\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`    "Authorization": "Bearer ${bearerToken}",\n`)
     }
-    requestString.push(`,\n  headers: {\n${genHeaders.join("").slice(0, -2)}\n  }\n})`)
+    requestString.push(
+      `,\n  headers: {\n${genHeaders.join("").slice(0, -2)}\n  }\n})`
+    )
     requestString.push(".then(response => {\n")
     requestString.push("    console.log(response);\n")
     requestString.push("})")
diff --git a/helpers/codegen/generators/javascript-xhr.js b/helpers/codegen/generators/javascript-xhr.js
index 8064a92c0..650e9b24c 100644
--- a/helpers/codegen/generators/javascript-xhr.js
+++ b/helpers/codegen/generators/javascript-xhr.js
@@ -28,11 +28,14 @@ export const JavascriptXhrCodegen = {
       `xhr.open('${method}', '${url}${pathName}${queryString}', true, ${user}, ${password})`
     )
     if (auth === "Bearer Token" || auth === "OAuth 2.0") {
-      requestString.push(`xhr.setRequestHeader('Authorization', 'Bearer ${bearerToken}')`)
+      requestString.push(
+        `xhr.setRequestHeader('Authorization', 'Bearer ${bearerToken}')`
+      )
     }
     if (headers) {
       headers.forEach(({ key, value }) => {
-        if (key) requestString.push(`xhr.setRequestHeader('${key}', '${value}')`)
+        if (key)
+          requestString.push(`xhr.setRequestHeader('${key}', '${value}')`)
       })
     }
     if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
@@ -42,7 +45,9 @@ export const JavascriptXhrCodegen = {
       } else if (contentType.includes("x-www-form-urlencoded")) {
         requestBody = `"${requestBody}"`
       }
-      requestString.push(`xhr.setRequestHeader('Content-Type', '${contentType}; charset=utf-8')`)
+      requestString.push(
+        `xhr.setRequestHeader('Content-Type', '${contentType}; charset=utf-8')`
+      )
       requestString.push(`xhr.send(${requestBody})`)
     } else {
       requestString.push("xhr.send()")
diff --git a/helpers/codegen/generators/nodejs-axios.js b/helpers/codegen/generators/nodejs-axios.js
index a880c04c6..0582d42d4 100644
--- a/helpers/codegen/generators/nodejs-axios.js
+++ b/helpers/codegen/generators/nodejs-axios.js
@@ -18,10 +18,12 @@ export const NodejsAxiosCodegen = {
     headers,
   }) => {
     const requestString = []
-    let genHeaders = []
-    let requestBody = rawInput ? rawParams : rawRequestBody
+    const genHeaders = []
+    const requestBody = rawInput ? rawParams : rawRequestBody
 
-    requestString.push(`axios.${method.toLowerCase()}('${url}${pathName}${queryString}'`)
+    requestString.push(
+      `axios.${method.toLowerCase()}('${url}${pathName}${queryString}'`
+    )
     if (requestBody.length !== 0) {
       requestString.push(", ")
     }
@@ -36,12 +38,16 @@ export const NodejsAxiosCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `    "Authorization": "Basic ${window.btoa(unescape(encodeURIComponent(basic)))}",\n`
+        `    "Authorization": "Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}",\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`    "Authorization": "Bearer ${bearerToken}",\n`)
     }
-    requestString.push(`${requestBody},{ \n headers : {${genHeaders.join("").slice(0, -2)}}\n})`)
+    requestString.push(
+      `${requestBody},{ \n headers : {${genHeaders.join("").slice(0, -2)}}\n})`
+    )
     requestString.push(".then(response => {\n")
     requestString.push("    console.log(response);\n")
     requestString.push("})")
diff --git a/helpers/codegen/generators/nodejs-native.js b/helpers/codegen/generators/nodejs-native.js
index 73bf7e143..fba2debdc 100644
--- a/helpers/codegen/generators/nodejs-native.js
+++ b/helpers/codegen/generators/nodejs-native.js
@@ -32,7 +32,9 @@ export const NodejsNativeCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `    "Authorization": "Basic ${window.btoa(unescape(encodeURIComponent(basic)))}",\n`
+        `    "Authorization": "Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}",\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`    "Authorization": "Bearer ${bearerToken}",\n`)
@@ -47,7 +49,9 @@ export const NodejsNativeCodegen = {
         requestBody = `\`${requestBody}\``
       }
       if (contentType) {
-        genHeaders.push(`    "Content-Type": "${contentType}; charset=utf-8",\n`)
+        genHeaders.push(
+          `    "Content-Type": "${contentType}; charset=utf-8",\n`
+        )
       }
     }
 
@@ -57,11 +61,15 @@ export const NodejsNativeCodegen = {
       })
     }
     if (genHeaders.length > 0 || headers.length > 0) {
-      requestString.push(`  headers: {\n${genHeaders.join("").slice(0, -2)}\n  }`)
+      requestString.push(
+        `  headers: {\n${genHeaders.join("").slice(0, -2)}\n  }`
+      )
     }
     requestString.push(`};\n\n`)
 
-    requestString.push(`const request = http.request(url, options, (response) => {\n`)
+    requestString.push(
+      `const request = http.request(url, options, (response) => {\n`
+    )
     requestString.push(`  console.log(response);\n`)
     requestString.push(`});\n\n`)
 
diff --git a/helpers/codegen/generators/nodejs-request.js b/helpers/codegen/generators/nodejs-request.js
index 884dd2929..1c3361921 100644
--- a/helpers/codegen/generators/nodejs-request.js
+++ b/helpers/codegen/generators/nodejs-request.js
@@ -20,7 +20,7 @@ export const NodejsRequestCodegen = {
     headers,
   }) => {
     const requestString = []
-    let genHeaders = []
+    const genHeaders = []
 
     requestString.push(`const request = require('request');\n`)
     requestString.push(`const options = {\n`)
@@ -30,7 +30,9 @@ export const NodejsRequestCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `    "Authorization": "Basic ${window.btoa(unescape(encodeURIComponent(basic)))}",\n`
+        `    "Authorization": "Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}",\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`    "Authorization": "Bearer ${bearerToken}",\n`)
@@ -58,7 +60,9 @@ export const NodejsRequestCodegen = {
         reqBodyType = "body"
       }
       if (contentType) {
-        genHeaders.push(`    "Content-Type": "${contentType}; charset=utf-8",\n`)
+        genHeaders.push(
+          `    "Content-Type": "${contentType}; charset=utf-8",\n`
+        )
       }
       requestString.push(`,\n  ${reqBodyType}: ${requestBody}`)
     }
@@ -69,7 +73,9 @@ export const NodejsRequestCodegen = {
       })
     }
     if (genHeaders.length > 0 || headers.length > 0) {
-      requestString.push(`,\n  headers: {\n${genHeaders.join("").slice(0, -2)}\n  }`)
+      requestString.push(
+        `,\n  headers: {\n${genHeaders.join("").slice(0, -2)}\n  }`
+      )
     }
 
     requestString.push(`\n}`)
diff --git a/helpers/codegen/generators/nodejs-unirest.js b/helpers/codegen/generators/nodejs-unirest.js
index b9c7c3cdc..45b1e1eb5 100644
--- a/helpers/codegen/generators/nodejs-unirest.js
+++ b/helpers/codegen/generators/nodejs-unirest.js
@@ -20,16 +20,20 @@ export const NodejsUnirestCodegen = {
     headers,
   }) => {
     const requestString = []
-    let genHeaders = []
+    const genHeaders = []
 
     requestString.push(`const unirest = require('unirest');\n`)
     requestString.push(`const req = unirest(\n`)
-    requestString.push(`'${method.toLowerCase()}', '${url}${pathName}${queryString}')\n`)
+    requestString.push(
+      `'${method.toLowerCase()}', '${url}${pathName}${queryString}')\n`
+    )
 
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `    "Authorization": "Basic ${window.btoa(unescape(encodeURIComponent(basic)))}",\n`
+        `    "Authorization": "Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}",\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`    "Authorization": "Bearer ${bearerToken}",\n`)
@@ -58,7 +62,9 @@ export const NodejsUnirestCodegen = {
         reqBodyType = "send"
       }
       if (contentType) {
-        genHeaders.push(`    "Content-Type": "${contentType}; charset=utf-8",\n`)
+        genHeaders.push(
+          `    "Content-Type": "${contentType}; charset=utf-8",\n`
+        )
       }
       requestString.push(`.\n  ${reqBodyType}( ${requestBody})`)
     }
@@ -69,7 +75,9 @@ export const NodejsUnirestCodegen = {
       })
     }
     if (genHeaders.length > 0 || headers.length > 0) {
-      requestString.push(`.\n  headers({\n${genHeaders.join("").slice(0, -2)}\n  }`)
+      requestString.push(
+        `.\n  headers({\n${genHeaders.join("").slice(0, -2)}\n  }`
+      )
     }
 
     requestString.push(`\n)`)
diff --git a/helpers/codegen/generators/php-curl.js b/helpers/codegen/generators/php-curl.js
index f9c5960c5..d5d4c5661 100644
--- a/helpers/codegen/generators/php-curl.js
+++ b/helpers/codegen/generators/php-curl.js
@@ -20,7 +20,7 @@ export const PhpCurlCodegen = {
     headers,
   }) => {
     const requestString = []
-    let genHeaders = []
+    const genHeaders = []
 
     requestString.push(`<?php\n`)
     requestString.push(`$curl = curl_init();\n`)
@@ -37,7 +37,9 @@ export const PhpCurlCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `    "Authorization: Basic ${window.btoa(unescape(encodeURIComponent(basic)))}",\n`
+        `    "Authorization: Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}",\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`    "Authorization: Bearer ${bearerToken}",\n`)
@@ -79,7 +81,9 @@ export const PhpCurlCodegen = {
     }
     if (genHeaders.length > 0 || headers.length > 0) {
       requestString.push(
-        `  CURLOPT_HTTPHEADER => array(\n${genHeaders.join("").slice(0, -2)}\n  )\n`
+        `  CURLOPT_HTTPHEADER => array(\n${genHeaders
+          .join("")
+          .slice(0, -2)}\n  )\n`
       )
     }
 
diff --git a/helpers/codegen/generators/powershell-restmethod.js b/helpers/codegen/generators/powershell-restmethod.js
index 79cfa8e97..8693cf450 100644
--- a/helpers/codegen/generators/powershell-restmethod.js
+++ b/helpers/codegen/generators/powershell-restmethod.js
@@ -18,7 +18,8 @@ export const PowershellRestmethodCodegen = {
     headers,
   }) => {
     const methodsWithBody = ["Put", "Post", "Delete"]
-    const formattedMethod = method[0].toUpperCase() + method.substring(1).toLowerCase()
+    const formattedMethod =
+      method[0].toUpperCase() + method.substring(1).toLowerCase()
     const includeBody = methodsWithBody.includes(formattedMethod)
     const requestString = []
     let genHeaders = []
@@ -46,7 +47,9 @@ export const PowershellRestmethodCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `  'Authorization' = 'Basic ${window.btoa(unescape(encodeURIComponent(basic)))}'\n`
+        `  'Authorization' = 'Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}'\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`  'Authorization' = 'Bearer ${bearerToken}'\n`)
diff --git a/helpers/codegen/generators/python-http-client.js b/helpers/codegen/generators/python-http-client.js
index cbe728451..7c7795bfe 100644
--- a/helpers/codegen/generators/python-http-client.js
+++ b/helpers/codegen/generators/python-http-client.js
@@ -28,24 +28,28 @@ export const PythonHttpClientCodegen = {
     headers,
   }) => {
     const requestString = []
-    let genHeaders = []
+    const genHeaders = []
 
     requestString.push(`import http.client\n`)
     requestString.push(`import mimetypes\n`)
 
     const currentUrl = new URL(url)
-    let hostname = currentUrl["hostname"]
-    let port = currentUrl["port"]
+    const hostname = currentUrl.hostname
+    const port = currentUrl.port
     if (!port) {
       requestString.push(`conn = http.client.HTTPSConnection("${hostname}")\n`)
     } else {
-      requestString.push(`conn = http.client.HTTPSConnection("${hostname}", ${port})\n`)
+      requestString.push(
+        `conn = http.client.HTTPSConnection("${hostname}", ${port})\n`
+      )
     }
     // auth headers
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `'Authorization': 'Basic ${window.btoa(unescape(encodeURIComponent(basic)))}'`
+        `'Authorization': 'Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}'`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`'Authorization': 'Bearer ${bearerToken}'`)
@@ -60,7 +64,7 @@ export const PythonHttpClientCodegen = {
 
     // initial request setup
     let requestBody = rawInput ? rawParams : rawRequestBody
-    if (method == "GET") {
+    if (method === "GET") {
       requestString.push(...printHeaders(genHeaders))
       requestString.push(`payload = ''\n`)
     }
@@ -86,7 +90,9 @@ export const PythonHttpClientCodegen = {
         requestString.push(`paylod = '''${requestBody}'''\n`)
       }
     }
-    requestString.push(`conn.request("${method}", "${pathName}${queryString}", payload, headers)\n`)
+    requestString.push(
+      `conn.request("${method}", "${pathName}${queryString}", payload, headers)\n`
+    )
     requestString.push(`res = conn.getresponse()\n`)
     requestString.push(`data = res.read()\n`)
     requestString.push(`print(data.decode("utf-8"))`)
diff --git a/helpers/codegen/generators/python-requests.js b/helpers/codegen/generators/python-requests.js
index 3b5c31734..d5471cbbb 100644
--- a/helpers/codegen/generators/python-requests.js
+++ b/helpers/codegen/generators/python-requests.js
@@ -28,7 +28,7 @@ export const PythonRequestsCodegen = {
     headers,
   }) => {
     const requestString = []
-    let genHeaders = []
+    const genHeaders = []
 
     requestString.push(`import requests\n\n`)
     requestString.push(`url = '${url}${pathName}${queryString}'\n`)
@@ -37,7 +37,9 @@ export const PythonRequestsCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       genHeaders.push(
-        `'Authorization': 'Basic ${window.btoa(unescape(encodeURIComponent(basic)))}'`
+        `'Authorization': 'Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}'`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       genHeaders.push(`'Authorization': 'Bearer ${bearerToken}'`)
@@ -52,7 +54,7 @@ export const PythonRequestsCodegen = {
 
     // initial request setup
     let requestBody = rawInput ? rawParams : rawRequestBody
-    if (method == "GET") {
+    if (method === "GET") {
       requestString.push(...printHeaders(genHeaders))
       requestString.push(`response = requests.request(\n`)
       requestString.push(`  '${method}',\n`)
diff --git a/helpers/codegen/generators/ruby-net-http.js b/helpers/codegen/generators/ruby-net-http.js
index 24ed87977..e5486bd05 100644
--- a/helpers/codegen/generators/ruby-net-http.js
+++ b/helpers/codegen/generators/ruby-net-http.js
@@ -71,7 +71,9 @@ export const RubyNetHttpCodeGen = {
 
     // analyse result
     requestString.push(`unless response.is_a?(Net::HTTPSuccess) then`)
-    requestString.push(`  raise "An error occurred: #{response.code} #{response.message}"`)
+    requestString.push(
+      `  raise "An error occurred: #{response.code} #{response.message}"`
+    )
     requestString.push(`else`)
     requestString.push(`  puts response.body`)
     requestString.push(`end`)
diff --git a/helpers/codegen/generators/salesforce-apex.js b/helpers/codegen/generators/salesforce-apex.js
index 24ad1d1c5..b8e351796 100644
--- a/helpers/codegen/generators/salesforce-apex.js
+++ b/helpers/codegen/generators/salesforce-apex.js
@@ -29,7 +29,9 @@ export const SalesforceApexCodegen = {
     // create request
     requestString.push(`HttpRequest request = new HttpRequest();\n`)
     requestString.push(`request.setMethod('${method}');\n`)
-    requestString.push(`request.setEndpoint('${url}${pathName}${queryString}');\n\n`)
+    requestString.push(
+      `request.setEndpoint('${url}${pathName}${queryString}');\n\n`
+    )
 
     // authentification
     if (auth === "Basic Auth") {
@@ -40,12 +42,16 @@ export const SalesforceApexCodegen = {
         )}');\n`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
-      requestString.push(`request.setHeader('Authorization', 'Bearer ${bearerToken}');\n`)
+      requestString.push(
+        `request.setHeader('Authorization', 'Bearer ${bearerToken}');\n`
+      )
     }
 
     // content type
     if (contentType) {
-      requestString.push(`request.setHeader('Content-Type', '${contentType}');\n`)
+      requestString.push(
+        `request.setHeader('Content-Type', '${contentType}');\n`
+      )
     }
 
     // custom headers
@@ -70,7 +76,9 @@ export const SalesforceApexCodegen = {
     requestString.push(`    HttpResponse response = client.send(request);\n`)
     requestString.push(`    System.debug(response.getBody());\n`)
     requestString.push(`} catch (CalloutException ex) {\n`)
-    requestString.push(`    System.debug('An error occured ' + ex.getMessage());\n`)
+    requestString.push(
+      `    System.debug('An error occured ' + ex.getMessage());\n`
+    )
     requestString.push(`}`)
 
     return requestString.join("")
diff --git a/helpers/codegen/generators/shell-httpie.js b/helpers/codegen/generators/shell-httpie.js
index a7b6eca1b..dc0284935 100644
--- a/helpers/codegen/generators/shell-httpie.js
+++ b/helpers/codegen/generators/shell-httpie.js
@@ -48,7 +48,9 @@ export const ShellHttpieCodegen = {
 
     if (headers) {
       headers.forEach(({ key, value }) => {
-        requestString.push(` $'${key.replace(/'/g, "\\'")}:${value.replace(/'/g, "\\'")}'`)
+        requestString.push(
+          ` $'${key.replace(/'/g, "\\'")}:${value.replace(/'/g, "\\'")}'`
+        )
       })
     }
 
diff --git a/helpers/codegen/generators/shell-wget.js b/helpers/codegen/generators/shell-wget.js
index 756ed1752..8620a6170 100644
--- a/helpers/codegen/generators/shell-wget.js
+++ b/helpers/codegen/generators/shell-wget.js
@@ -23,7 +23,9 @@ export const ShellWgetCodegen = {
     if (auth === "Basic Auth") {
       const basic = `${httpUser}:${httpPassword}`
       requestString.push(
-        `  --header='Authorization: Basic ${window.btoa(unescape(encodeURIComponent(basic)))}'`
+        `  --header='Authorization: Basic ${window.btoa(
+          unescape(encodeURIComponent(basic))
+        )}'`
       )
     } else if (auth === "Bearer Token" || auth === "OAuth 2.0") {
       requestString.push(`  --header='Authorization: Bearer ${bearerToken}'`)
@@ -35,7 +37,9 @@ export const ShellWgetCodegen = {
     }
     if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
       const requestBody = rawInput ? rawParams : rawRequestBody
-      requestString.push(`  --header='Content-Type: ${contentType}; charset=utf-8'`)
+      requestString.push(
+        `  --header='Content-Type: ${contentType}; charset=utf-8'`
+      )
       requestString.push(`  --body-data='${requestBody}'`)
     }
     return requestString.join(" \\\n")
diff --git a/helpers/curlparser.js b/helpers/curlparser.js
index 787957b32..d4fdae12b 100644
--- a/helpers/curlparser.js
+++ b/helpers/curlparser.js
@@ -1,6 +1,6 @@
-import * as cookie from "cookie"
 import * as URL from "url"
 import * as querystring from "querystring"
+import * as cookie from "cookie"
 import parser from "yargs-parser"
 
 /**
@@ -21,7 +21,7 @@ const joinDataArguments = (dataArguments) => {
 }
 
 const parseCurlCommand = (curlCommand) => {
-  let newlineFound = /\\/gi.test(curlCommand)
+  const newlineFound = /\\/gi.test(curlCommand)
   if (newlineFound) {
     // remove '\' and newlines
     curlCommand = curlCommand.replace(/\\/gi, "")
@@ -34,12 +34,12 @@ const parseCurlCommand = (curlCommand) => {
   curlCommand = curlCommand.replace(/ -XPATCH/, " -X PATCH")
   curlCommand = curlCommand.replace(/ -XDELETE/, " -X DELETE")
   curlCommand = curlCommand.trim()
-  let parsedArguments = parser(curlCommand)
+  const parsedArguments = parser(curlCommand)
   let cookieString
   let cookies
   let url = parsedArguments._[1]
   if (!url) {
-    for (let argName in parsedArguments) {
+    for (const argName in parsedArguments) {
       if (typeof parsedArguments[argName] === "string") {
         if (["http", "www."].includes(parsedArguments[argName])) {
           url = parsedArguments[argName]
@@ -62,9 +62,9 @@ const parseCurlCommand = (curlCommand) => {
           // stupid javascript tricks: closure
           cookieString = header
         } else {
-          let colonIndex = header.indexOf(":")
-          let headerName = header.substring(0, colonIndex)
-          let headerValue = header.substring(colonIndex + 1).trim()
+          const colonIndex = header.indexOf(":")
+          const headerName = header.substring(0, colonIndex)
+          const headerValue = header.substring(colonIndex + 1).trim()
           headers[headerName] = headerValue
         }
       })
@@ -109,12 +109,15 @@ const parseCurlCommand = (curlCommand) => {
     }
     // separate out cookie headers into separate data structure
     // note: cookie is case insensitive
-    cookies = cookie.parse(cookieString.replace(/^Cookie: /gi, ""), cookieParseOptions)
+    cookies = cookie.parse(
+      cookieString.replace(/^Cookie: /gi, ""),
+      cookieParseOptions
+    )
   }
   let method
   if (parsedArguments.X === "POST") {
     method = "post"
-  } else if (parsedArguments.X === "PUT" || parsedArguments["T"]) {
+  } else if (parsedArguments.X === "PUT" || parsedArguments.T) {
     method = "put"
   } else if (parsedArguments.X === "PATCH") {
     method = "patch"
@@ -123,29 +126,30 @@ const parseCurlCommand = (curlCommand) => {
   } else if (parsedArguments.X === "OPTIONS") {
     method = "options"
   } else if (
-    (parsedArguments["d"] ||
-      parsedArguments["data"] ||
+    (parsedArguments.d ||
+      parsedArguments.data ||
       parsedArguments["data-ascii"] ||
       parsedArguments["data-binary"] ||
-      parsedArguments["F"] ||
-      parsedArguments["form"]) &&
-    !(parsedArguments["G"] || parsedArguments["get"])
+      parsedArguments.F ||
+      parsedArguments.form) &&
+    !(parsedArguments.G || parsedArguments.get)
   ) {
     method = "post"
-  } else if (parsedArguments["I"] || parsedArguments["head"]) {
+  } else if (parsedArguments.I || parsedArguments.head) {
     method = "head"
   } else {
     method = "get"
   }
 
-  let compressed = !!parsedArguments.compressed
+  const compressed = !!parsedArguments.compressed
   let urlObject = URL.parse(url) // eslint-disable-line
 
   // if GET request with data, convert data to query string
   // NB: the -G flag does not change the http verb. It just moves the data into the url.
-  if (parsedArguments["G"] || parsedArguments["get"]) {
+  if (parsedArguments.G || parsedArguments.get) {
     urlObject.query = urlObject.query ? urlObject.query : ""
-    let option = "d" in parsedArguments ? "d" : "data" in parsedArguments ? "data" : null
+    const option =
+      "d" in parsedArguments ? "d" : "data" in parsedArguments ? "data" : null
     if (option) {
       let urlQueryString = ""
 
@@ -165,7 +169,7 @@ const parseCurlCommand = (curlCommand) => {
       delete parsedArguments[option]
     }
   }
-  let query = querystring.parse(urlObject.query, null, null, {
+  const query = querystring.parse(urlObject.query, null, null, {
     maxKeys: 10000,
   })
 
@@ -175,7 +179,7 @@ const parseCurlCommand = (curlCommand) => {
     urlWithoutQuery: URL.format(urlObject),
   }
   if (compressed) {
-    request["compressed"] = true
+    request.compressed = true
   }
 
   if (Object.keys(query).length > 0) {
@@ -184,7 +188,7 @@ const parseCurlCommand = (curlCommand) => {
   if (headers) {
     request.headers = headers
   }
-  request["method"] = method
+  request.method = method
 
   if (cookies) {
     request.cookies = cookies
@@ -198,24 +202,24 @@ const parseCurlCommand = (curlCommand) => {
   } else if (parsedArguments["data-binary"]) {
     request.data = parsedArguments["data-binary"]
     request.isDataBinary = true
-  } else if (parsedArguments["d"]) {
-    request.data = parsedArguments["d"]
+  } else if (parsedArguments.d) {
+    request.data = parsedArguments.d
   } else if (parsedArguments["data-ascii"]) {
     request.data = parsedArguments["data-ascii"]
   }
 
-  if (parsedArguments["u"]) {
-    request.auth = parsedArguments["u"]
+  if (parsedArguments.u) {
+    request.auth = parsedArguments.u
   }
-  if (parsedArguments["user"]) {
-    request.auth = parsedArguments["user"]
+  if (parsedArguments.user) {
+    request.auth = parsedArguments.user
   }
   if (Array.isArray(request.data)) {
     request.dataArray = request.data
     request.data = joinDataArguments(request.data)
   }
 
-  if (parsedArguments["k"] || parsedArguments["insecure"]) {
+  if (parsedArguments.k || parsedArguments.insecure) {
     request.insecure = true
   }
   return request
diff --git a/helpers/lenses/__tests__/lenses.spec.js b/helpers/lenses/__tests__/lenses.spec.js
index cf536592a..e7d118066 100644
--- a/helpers/lenses/__tests__/lenses.spec.js
+++ b/helpers/lenses/__tests__/lenses.spec.js
@@ -21,7 +21,11 @@ describe("getSuitableLenses", () => {
   })
 
   const contentTypes = {
-    JSON: ["application/json", "application/ld+json", "application/hal+json; charset=utf8"],
+    JSON: [
+      "application/json",
+      "application/ld+json",
+      "application/hal+json; charset=utf8",
+    ],
     Image: [
       "image/gif",
       "image/jpeg; foo=bar",
@@ -32,11 +36,15 @@ describe("getSuitableLenses", () => {
       "image/vnd.microsoft.icon",
     ],
     HTML: ["text/html", "application/xhtml+xml", "text/html; charset=utf-8"],
-    XML: ["text/xml", "application/xml", "application/xhtml+xml; charset=utf-8"],
+    XML: [
+      "text/xml",
+      "application/xml",
+      "application/xhtml+xml; charset=utf-8",
+    ],
   }
 
   lenses
-    .filter(({ lensName }) => lensName != rawLens.lensName)
+    .filter(({ lensName }) => lensName !== rawLens.lensName)
     .forEach((el) => {
       test(`returns ${el.lensName} lens for its content-types`, () => {
         contentTypes[el.lensName].forEach((contentType) => {
diff --git a/helpers/lenses/htmlLens.js b/helpers/lenses/htmlLens.js
index bc428f040..6a70dfd6d 100644
--- a/helpers/lenses/htmlLens.js
+++ b/helpers/lenses/htmlLens.js
@@ -3,7 +3,8 @@ const htmlLens = {
   isSupportedContentType: (contentType) =>
     /\btext\/html|application\/xhtml\+xml\b/i.test(contentType),
   renderer: "htmlres",
-  rendererImport: () => import("~/components/lenses/renderers/HTMLLensRenderer"),
+  rendererImport: () =>
+    import("~/components/lenses/renderers/HTMLLensRenderer"),
 }
 
 export default htmlLens
diff --git a/helpers/lenses/imageLens.js b/helpers/lenses/imageLens.js
index 9868db46b..51be8d59d 100644
--- a/helpers/lenses/imageLens.js
+++ b/helpers/lenses/imageLens.js
@@ -1,9 +1,12 @@
 const imageLens = {
   lensName: "Image",
   isSupportedContentType: (contentType) =>
-    /\bimage\/(?:gif|jpeg|png|bmp|svg\+xml|x-icon|vnd\.microsoft\.icon)\b/i.test(contentType),
+    /\bimage\/(?:gif|jpeg|png|bmp|svg\+xml|x-icon|vnd\.microsoft\.icon)\b/i.test(
+      contentType
+    ),
   renderer: "imageres",
-  rendererImport: () => import("~/components/lenses/renderers/ImageLensRenderer"),
+  rendererImport: () =>
+    import("~/components/lenses/renderers/ImageLensRenderer"),
 }
 
 export default imageLens
diff --git a/helpers/lenses/jsonLens.js b/helpers/lenses/jsonLens.js
index 440a2c5be..d6c4b9742 100644
--- a/helpers/lenses/jsonLens.js
+++ b/helpers/lenses/jsonLens.js
@@ -1,10 +1,11 @@
-import { isJSONContentType } from "../utils/contenttypes";
+import { isJSONContentType } from "../utils/contenttypes"
 
 const jsonLens = {
   lensName: "JSON",
   isSupportedContentType: isJSONContentType,
   renderer: "json",
-  rendererImport: () => import("~/components/lenses/renderers/JSONLensRenderer"),
+  rendererImport: () =>
+    import("~/components/lenses/renderers/JSONLensRenderer"),
 }
 
 export default jsonLens
diff --git a/helpers/migrations.ts b/helpers/migrations.ts
index 5bab6f96d..9415f72d1 100644
--- a/helpers/migrations.ts
+++ b/helpers/migrations.ts
@@ -7,7 +7,9 @@ import { settingsStore, applySetting } from "~/newstore/settings"
 
 export function performMigrations(): void {
   // Migrate old default proxy URL to the new proxy URL (if not set / overridden)
-  if (settingsStore.value.PROXY_URL === "https://hoppscotch.apollosoftware.xyz/") {
+  if (
+    settingsStore.value.PROXY_URL === "https://hoppscotch.apollosoftware.xyz/"
+  ) {
     applySetting("PROXY_URL", "https://proxy.hoppscotch.io/")
   }
 }
diff --git a/helpers/network.js b/helpers/network.js
index a679cfaa6..4ba209b03 100644
--- a/helpers/network.js
+++ b/helpers/network.js
@@ -1,4 +1,6 @@
-import AxiosStrategy, { cancelRunningAxiosRequest } from "./strategies/AxiosStrategy"
+import AxiosStrategy, {
+  cancelRunningAxiosRequest,
+} from "./strategies/AxiosStrategy"
 import ExtensionStrategy, {
   cancelRunningExtensionRequest,
   hasExtensionInstalled,
diff --git a/helpers/oauth.js b/helpers/oauth.js
index bebac822c..f85c314c0 100644
--- a/helpers/oauth.js
+++ b/helpers/oauth.js
@@ -43,7 +43,10 @@ const parseQueryString = (searchQuery) => {
     return {}
   }
   const segments = searchQuery.split("&").map((s) => s.split("="))
-  const queryString = segments.reduce((obj, el) => ({ ...obj, [el[0]]: el[1] }), {})
+  const queryString = segments.reduce(
+    (obj, el) => ({ ...obj, [el[0]]: el[1] }),
+    {}
+  )
   return queryString
 }
 
@@ -145,25 +148,26 @@ const tokenRequest = async ({
 }) => {
   // Check oauth configuration
   if (oidcDiscoveryUrl !== "") {
-    const { authorization_endpoint, token_endpoint } = await getTokenConfiguration(oidcDiscoveryUrl)
-    authUrl = authorization_endpoint
-    accessTokenUrl = token_endpoint
+    const { authorizationEndpoint, tokenEndpoint } =
+      await getTokenConfiguration(oidcDiscoveryUrl)
+    authUrl = authorizationEndpoint
+    accessTokenUrl = tokenEndpoint
   }
 
   // Store oauth information
-  localStorage.setItem("token_endpoint", accessTokenUrl)
+  localStorage.setItem("tokenEndpoint", accessTokenUrl)
   localStorage.setItem("client_id", clientId)
 
   // Create and store a random state value
   const state = generateRandomString()
   localStorage.setItem("pkce_state", state)
 
-  // Create and store a new PKCE code_verifier (the plaintext random secret)
-  const code_verifier = generateRandomString()
-  localStorage.setItem("pkce_code_verifier", code_verifier)
+  // Create and store a new PKCE codeVerifier (the plaintext random secret)
+  const codeVerifier = generateRandomString()
+  localStorage.setItem("pkce_codeVerifier", codeVerifier)
 
   // Hash and base64-urlencode the secret to use as the challenge
-  const code_challenge = await pkceChallengeFromVerifier(code_verifier)
+  const codeChallenge = await pkceChallengeFromVerifier(codeVerifier)
 
   // Build the authorization URL
   const buildUrl = () =>
@@ -171,9 +175,11 @@ const tokenRequest = async ({
       clientId
     )}&state=${encodeURIComponent(state)}&scope=${encodeURIComponent(
       scope
-    )}&redirect_uri=${encodeURIComponent(redirectUri)}&code_challenge=${encodeURIComponent(
-      code_challenge
-    )}&code_challenge_method=S256`
+    )}&redirect_uri=${encodeURIComponent(
+      redirectUri
+    )}&codeChallenge=${encodeURIComponent(
+      codeChallenge
+    )}&codeChallenge_method=S256`
 
   // Redirect to the authorization server
   window.location = buildUrl()
@@ -190,7 +196,7 @@ const tokenRequest = async ({
 
 const oauthRedirect = async () => {
   let tokenResponse = ""
-  let q = parseQueryString(window.location.search.substring(1))
+  const q = parseQueryString(window.location.search.substring(1))
   // Check if the server returned an error string
   if (q.error) {
     alert(`Error returned from authorization server: ${q.error}`)
@@ -198,26 +204,29 @@ const oauthRedirect = async () => {
   // If the server returned an authorization code, attempt to exchange it for an access token
   if (q.code) {
     // Verify state matches what we set at the beginning
-    if (localStorage.getItem("pkce_state") != q.state) {
+    if (localStorage.getItem("pkce_state") !== q.state) {
       alert("Invalid state")
     } else {
       try {
         // Exchange the authorization code for an access token
-        tokenResponse = await sendPostRequest(localStorage.getItem("token_endpoint"), {
-          grant_type: "authorization_code",
-          code: q.code,
-          client_id: localStorage.getItem("client_id"),
-          redirect_uri: redirectUri,
-          code_verifier: localStorage.getItem("pkce_code_verifier"),
-        })
+        tokenResponse = await sendPostRequest(
+          localStorage.getItem("tokenEndpoint"),
+          {
+            grant_type: "authorization_code",
+            code: q.code,
+            client_id: localStorage.getItem("client_id"),
+            redirect_uri: redirectUri,
+            codeVerifier: localStorage.getItem("pkce_codeVerifier"),
+          }
+        )
       } catch (err) {
         console.log(`${error.error}\n\n${error.error_description}`)
       }
     }
     // Clean these up since we don't need them anymore
     localStorage.removeItem("pkce_state")
-    localStorage.removeItem("pkce_code_verifier")
-    localStorage.removeItem("token_endpoint")
+    localStorage.removeItem("pkce_codeVerifier")
+    localStorage.removeItem("tokenEndpoint")
     localStorage.removeItem("client_id")
     return tokenResponse
   }
diff --git a/helpers/outline.js b/helpers/outline.js
index 3ea2ef91e..4ff9f6912 100644
--- a/helpers/outline.js
+++ b/helpers/outline.js
@@ -15,21 +15,21 @@ export default () => {
   }
 
   const linkParents = (node) => {
-    if (node.kind == "Object") {
+    if (node.kind === "Object") {
       if (node.members) {
         node.members.forEach((m) => {
           m.parent = node
           linkParents(m)
         })
       }
-    } else if (node.kind == "Array") {
+    } else if (node.kind === "Array") {
       if (node.values) {
         node.values.forEach((v) => {
           v.parent = node
           linkParents(v)
         })
       }
-    } else if (node.kind == "Member") {
+    } else if (node.kind === "Member") {
       if (node.value) {
         node.value.parent = node
         linkParents(node.value)
@@ -41,20 +41,20 @@ export default () => {
     let output = {}
     path = []
     let current = jsonAST
-    if (current.kind == "Object") {
+    if (current.kind === "Object") {
       path.push({ label: "{}", obj: "root" })
-    } else if (current.kind == "Array") {
+    } else if (current.kind === "Array") {
       path.push({ label: "[]", obj: "root" })
     }
     let over = false
 
     try {
       while (!over) {
-        if (current.kind == "Object") {
+        if (current.kind === "Object") {
           let i = 0
           let found = false
           while (i < current.members.length) {
-            let m = current.members[i]
+            const m = current.members[i]
             if (m.start <= index && m.end >= index) {
               path.push({ label: m.key.value, obj: m })
               current = current.members[i]
@@ -64,12 +64,12 @@ export default () => {
             i++
           }
           if (!found) over = true
-        } else if (current.kind == "Array") {
+        } else if (current.kind === "Array") {
           if (current.values) {
             let i = 0
             let found = false
             while (i < current.values.length) {
-              let m = current.values[i]
+              const m = current.values[i]
               if (m.start <= index && m.end >= index) {
                 path.push({ label: `[${i.toString()}]`, obj: m })
                 current = current.values[i]
@@ -80,17 +80,17 @@ export default () => {
             }
             if (!found) over = true
           } else over = true
-        } else if (current.kind == "Member") {
+        } else if (current.kind === "Member") {
           if (current.value) {
             if (current.value.start <= index && current.value.end >= index) {
               current = current.value
             } else over = true
           } else over = true
         } else if (
-          current.kind == "String" ||
-          current.kind == "Number" ||
-          current.kind == "Boolean" ||
-          current.kind == "Null"
+          current.kind === "String" ||
+          current.kind === "Number" ||
+          current.kind === "Boolean" ||
+          current.kind === "Null"
         ) {
           if (current.start <= index && current.end >= index) {
             path.push({ label: `${current.value}`, obj: current })
@@ -106,15 +106,13 @@ export default () => {
   }
 
   const getSiblings = (index) => {
-    let parent = path[index].obj.parent
+    const parent = path[index].obj.parent
     if (!parent) return []
-    else {
-      if (parent.kind == "Object") {
-        return parent.members
-      } else if (parent.kind == "Array") {
-        return parent.values
-      } else return []
-    }
+    else if (parent.kind === "Object") {
+      return parent.members
+    } else if (parent.kind === "Array") {
+      return parent.values
+    } else return []
   }
 
   return {
diff --git a/helpers/pwa.js b/helpers/pwa.js
index 05eb36bcb..a03561ba6 100644
--- a/helpers/pwa.js
+++ b/helpers/pwa.js
@@ -1,11 +1,14 @@
 export default () => {
-  //*** Determine whether or not the PWA has been installed. ***//
+  //* ** Determine whether or not the PWA has been installed. ***//
 
   // Step 1: Check local storage
   let pwaInstalled = localStorage.getItem("pwaInstalled") === "yes"
 
   // Step 2: Check if the display-mode is standalone. (Only permitted for PWAs.)
-  if (!pwaInstalled && window.matchMedia("(display-mode: standalone)").matches) {
+  if (
+    !pwaInstalled &&
+    window.matchMedia("(display-mode: standalone)").matches
+  ) {
     localStorage.setItem("pwaInstalled", "yes")
     pwaInstalled = true
   }
@@ -16,7 +19,7 @@ export default () => {
     pwaInstalled = true
   }
 
-  //*** If the PWA has not been installed, show the install PWA prompt.. ***//
+  //* ** If the PWA has not been installed, show the install PWA prompt.. ***//
   let deferredPrompt = null
   window.addEventListener("beforeinstallprompt", (event) => {
     deferredPrompt = event
@@ -28,7 +31,7 @@ export default () => {
   })
 
   // When the app is installed, remove install prompts.
-  window.addEventListener("appinstalled", (event) => {
+  window.addEventListener("appinstalled", () => {
     localStorage.setItem("pwaInstalled", "yes")
     pwaInstalled = true
     document.getElementById("installPWA").style.display = "none"
@@ -38,12 +41,14 @@ export default () => {
   return async () => {
     if (deferredPrompt) {
       deferredPrompt.prompt()
-      let outcome = await deferredPrompt.userChoice
+      const outcome = await deferredPrompt.userChoice
 
       if (outcome === "accepted") {
         console.log("Hoppscotch was installed successfully.")
       } else {
-        console.log("Hoppscotch could not be installed. (Installation rejected by user.)")
+        console.log(
+          "Hoppscotch could not be installed. (Installation rejected by user.)"
+        )
       }
       deferredPrompt = null
     }
diff --git a/helpers/requestParams.js b/helpers/requestParams.js
index 8fd13e62f..362c0173b 100644
--- a/helpers/requestParams.js
+++ b/helpers/requestParams.js
@@ -1,12 +1,20 @@
 export function hasPathParams(params) {
   return params
-    .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+    .filter((item) =>
+      Object.prototype.hasOwnProperty.call(item, "active")
+        ? item.active === true
+        : true
+    )
     .some(({ type }) => type === "path")
 }
 
 export function addPathParamsToVariables(params, variables) {
   params
-    .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+    .filter((item) =>
+      Object.prototype.hasOwnProperty.call(item, "active")
+        ? item.active === true
+        : true
+    )
     .filter(({ key }) => !!key)
     .filter(({ type }) => type === "path")
     .forEach(({ key, value }) => (variables[key] = value))
@@ -15,7 +23,11 @@ export function addPathParamsToVariables(params, variables) {
 
 export function getQueryParams(params) {
   return params
-    .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+    .filter((item) =>
+      Object.prototype.hasOwnProperty.call(item, "active")
+        ? item.active === true
+        : true
+    )
     .filter(({ key }) => !!key)
-    .filter(({ type }) => type != "path")
+    .filter(({ type }) => type !== "path")
 }
diff --git a/helpers/strategies/ExtensionStrategy.js b/helpers/strategies/ExtensionStrategy.js
index 538b5ae5c..fb6800d1c 100644
--- a/helpers/strategies/ExtensionStrategy.js
+++ b/helpers/strategies/ExtensionStrategy.js
@@ -5,13 +5,18 @@ export const hasExtensionInstalled = () =>
   typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined"
 
 export const hasChromeExtensionInstalled = () =>
-  hasExtensionInstalled() && /Chrome/i.test(navigator.userAgent) && /Google/i.test(navigator.vendor)
+  hasExtensionInstalled() &&
+  /Chrome/i.test(navigator.userAgent) &&
+  /Google/i.test(navigator.vendor)
 
 export const hasFirefoxExtensionInstalled = () =>
   hasExtensionInstalled() && /Firefox/i.test(navigator.userAgent)
 
 export const cancelRunningExtensionRequest = () => {
-  if (hasExtensionInstalled() && window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest) {
+  if (
+    hasExtensionInstalled() &&
+    window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest
+  ) {
     window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest()
   }
 }
diff --git a/helpers/strategies/__tests__/AxiosStrategy-NoProxy.spec.js b/helpers/strategies/__tests__/AxiosStrategy-NoProxy.spec.js
index 6f9b99fc6..a4948c1b2 100644
--- a/helpers/strategies/__tests__/AxiosStrategy-NoProxy.spec.js
+++ b/helpers/strategies/__tests__/AxiosStrategy-NoProxy.spec.js
@@ -7,9 +7,9 @@ jest.mock("~/newstore/settings", () => {
     __esModule: true,
     settingsStore: {
       value: {
-        PROXY_ENABLED: false
-      }
-    }
+        PROXY_ENABLED: false,
+      },
+    },
   }
 })
 
@@ -18,7 +18,6 @@ axios.mockResolvedValue({})
 
 describe("axiosStrategy", () => {
   describe("No-Proxy Requests", () => {
-
     test("sends request to the actual sender if proxy disabled", async () => {
       await axiosStrategy({ url: "test" })
 
@@ -43,14 +42,14 @@ describe("axiosStrategy", () => {
       await expect(axiosStrategy({})).resolves.toBeDefined()
     })
 
-    test("rejects cancel errors with text 'cancellation'", async () => {
+    test("rejects cancel errors with text 'cancellation'", () => {
       axios.isCancel.mockReturnValueOnce(true)
       axios.mockRejectedValue("err")
 
       expect(axiosStrategy({})).rejects.toBe("cancellation")
     })
 
-    test("rejects non-cancellation errors as-is", async () => {
+    test("rejects non-cancellation errors as-is", () => {
       axios.isCancel.mockReturnValueOnce(false)
       axios.mockRejectedValue("err")
 
diff --git a/helpers/strategies/__tests__/AxiosStrategy-Proxy.spec.js b/helpers/strategies/__tests__/AxiosStrategy-Proxy.spec.js
index bf1848f98..1325ec1b2 100644
--- a/helpers/strategies/__tests__/AxiosStrategy-Proxy.spec.js
+++ b/helpers/strategies/__tests__/AxiosStrategy-Proxy.spec.js
@@ -1,5 +1,8 @@
 import axios from "axios"
-import axiosStrategy, { testables, cancelRunningAxiosRequest } from "../AxiosStrategy"
+import axiosStrategy, {
+  testables,
+  cancelRunningAxiosRequest,
+} from "../AxiosStrategy"
 
 jest.mock("../../utils/b64", () => ({
   __esModule: true,
@@ -11,9 +14,9 @@ jest.mock("~/newstore/settings", () => {
     settingsStore: {
       value: {
         PROXY_ENABLED: true,
-        PROXY_URL: "test"
-      }
-    }
+        PROXY_URL: "test",
+      },
+    },
   }
 })
 
@@ -28,7 +31,6 @@ describe("cancelRunningAxiosRequest", () => {
 
 describe("axiosStrategy", () => {
   describe("Proxy Requests", () => {
-
     test("sends POST request to proxy if proxy is enabled", async () => {
       let passedURL
 
diff --git a/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js b/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js
index b6a203580..a7d11f85b 100644
--- a/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js
+++ b/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js
@@ -1,4 +1,3 @@
-
 import extensionStrategy, {
   hasExtensionInstalled,
   hasChromeExtensionInstalled,
@@ -17,9 +16,9 @@ jest.mock("~/newstore/settings", () => {
     settingsStore: {
       value: {
         EXTENSIONS_ENABLED: true,
-        PROXY_ENABLED: false
-      }
-    }
+        PROXY_ENABLED: false,
+      },
+    },
   }
 })
 
@@ -140,7 +139,6 @@ describe("extensionStrategy", () => {
   })
 
   describe("Non-Proxy Requests", () => {
-
     test("ask extension to send request", async () => {
       global.__POSTWOMAN_EXTENSION_HOOK__ = {
         sendRequest: sendReqFunc,
@@ -162,7 +160,7 @@ describe("extensionStrategy", () => {
         sendRequest: sendReqFunc,
       }
 
-      sendReqFunc.mockImplementation(({ method, url }) => {
+      sendReqFunc.mockImplementation(({ url }) => {
         passedUrl = url
 
         return Promise.resolve({
diff --git a/helpers/strategies/__tests__/ExtensionStrategy-Proxy.spec.js b/helpers/strategies/__tests__/ExtensionStrategy-Proxy.spec.js
index 062afcdaf..b52a23881 100644
--- a/helpers/strategies/__tests__/ExtensionStrategy-Proxy.spec.js
+++ b/helpers/strategies/__tests__/ExtensionStrategy-Proxy.spec.js
@@ -17,9 +17,9 @@ jest.mock("~/newstore/settings", () => {
       value: {
         EXTENSIONS_ENABLED: true,
         PROXY_ENABLED: true,
-        PROXY_URL: "test"
-      }
-    }
+        PROXY_URL: "test",
+      },
+    },
   }
 })
 
@@ -140,7 +140,6 @@ describe("extensionStrategy", () => {
   })
 
   describe("Proxy Requests", () => {
-
     test("asks extension to send request", async () => {
       global.__POSTWOMAN_EXTENSION_HOOK__ = {
         sendRequest: sendReqFunc,
diff --git a/helpers/syntax/gqlQueryLangMode.js b/helpers/syntax/gqlQueryLangMode.js
index 233561054..29939e420 100644
--- a/helpers/syntax/gqlQueryLangMode.js
+++ b/helpers/syntax/gqlQueryLangMode.js
@@ -6,7 +6,9 @@ export function defineGQLLanguageMode(ace) {
     (aceRequire, exports) => {
       const oop = aceRequire("ace/lib/oop")
 
-      const TextHighlightRules = aceRequire("ace/mode/text_highlight_rules").TextHighlightRules
+      const TextHighlightRules = aceRequire(
+        "ace/mode/text_highlight_rules"
+      ).TextHighlightRules
 
       const GQLQueryTextHighlightRules = function () {
         const keywords =
@@ -35,7 +37,7 @@ export function defineGQLLanguageMode(ace) {
             },
             {
               token: "paren.lparen",
-              regex: /[\[({]/,
+              regex: /[[({]/,
               next: "start",
             },
             {
@@ -74,7 +76,7 @@ export function defineGQLLanguageMode(ace) {
             },
             {
               token: "constant.numeric",
-              regex: /\d+\.?\d*[eE]?[\+\-]?\d*/,
+              regex: /\d+\.?\d*[eE]?[+-]?\d*/,
             },
             {
               token: "variable",
diff --git a/helpers/teams/BackendUserInfo.ts b/helpers/teams/BackendUserInfo.ts
index 8392e6f59..9610f4865 100644
--- a/helpers/teams/BackendUserInfo.ts
+++ b/helpers/teams/BackendUserInfo.ts
@@ -1,7 +1,7 @@
-import { fb } from "../fb"
 import { BehaviorSubject } from "rxjs"
-import { apolloClient } from "../apollo"
 import gql from "graphql-tag"
+import { fb } from "../fb"
+import { apolloClient } from "../apollo"
 
 /*
  * This file deals with interfacing data provided by the
diff --git a/helpers/teams/TeamCollectionAdapter.ts b/helpers/teams/TeamCollectionAdapter.ts
index 64697e793..d0c7d262a 100644
--- a/helpers/teams/TeamCollectionAdapter.ts
+++ b/helpers/teams/TeamCollectionAdapter.ts
@@ -1,11 +1,15 @@
 import { BehaviorSubject } from "rxjs"
-import { TeamCollection } from "./TeamCollection"
-import { TeamRequest } from "./TeamRequest"
-import { apolloClient } from "~/helpers/apollo"
-import { rootCollectionsOfTeam, getCollectionChildren, getCollectionRequests } from "./utils"
 import { gql } from "graphql-tag"
 import pull from "lodash/pull"
 import remove from "lodash/remove"
+import { TeamCollection } from "./TeamCollection"
+import { TeamRequest } from "./TeamRequest"
+import {
+  rootCollectionsOfTeam,
+  getCollectionChildren,
+  getCollectionRequests,
+} from "./utils"
+import { apolloClient } from "~/helpers/apollo"
 
 /*
  * NOTE: These functions deal with REFERENCES to objects and mutates them, for a simpler implementation.
@@ -31,7 +35,7 @@ function findParentOfColl(
 ): TeamCollection | null {
   for (const coll of tree) {
     // If the root is parent, return null
-    if (coll.id === collID) return currentParent ? currentParent : null
+    if (coll.id === collID) return currentParent || null
 
     // Else run it in children
     if (coll.children) {
@@ -51,7 +55,10 @@ function findParentOfColl(
  *
  * @returns REFERENCE to the collection or null if not found
  */
-function findCollInTree(tree: TeamCollection[], targetID: string): TeamCollection | null {
+function findCollInTree(
+  tree: TeamCollection[],
+  targetID: string
+): TeamCollection | null {
   for (const coll of tree) {
     // If the direct child matched, then return that
     if (coll.id === targetID) return coll
@@ -75,7 +82,10 @@ function findCollInTree(tree: TeamCollection[], targetID: string): TeamCollectio
  *
  * @returns REFERENCE to the collection or null if request not found
  */
-function findCollWithReqIDInTree(tree: TeamCollection[], reqID: string): TeamCollection | null {
+function findCollWithReqIDInTree(
+  tree: TeamCollection[],
+  reqID: string
+): TeamCollection | null {
   for (const coll of tree) {
     // Check in root collections (if expanded)
     if (coll.requests) {
@@ -101,7 +111,10 @@ function findCollWithReqIDInTree(tree: TeamCollection[], reqID: string): TeamCol
  *
  * @returns REFERENCE to the request or null if request not found
  */
-function findReqInTree(tree: TeamCollection[], reqID: string): TeamRequest | null {
+function findReqInTree(
+  tree: TeamCollection[],
+  reqID: string
+): TeamRequest | null {
   for (const coll of tree) {
     // Check in root collections (if expanded)
     if (coll.requests) {
@@ -251,7 +264,10 @@ export default class TeamCollectionAdapter {
    * @param {TeamCollection} collection - The collection to add to the tree
    * @param {string | null} parentCollectionID - The parent of the new collection, pass null if this collection is in root
    */
-  private addCollection(collection: TeamCollection, parentCollectionID: string | null) {
+  private addCollection(
+    collection: TeamCollection,
+    parentCollectionID: string | null
+  ) {
     const tree = this.collections$.value
 
     if (!parentCollectionID) {
@@ -276,7 +292,9 @@ export default class TeamCollectionAdapter {
    *
    * @param {Partial<TeamCollection> & Pick<TeamCollection, "id">} collectionUpdate - Object defining the fields that need to be updated (ID is required to find the target)
    */
-  private updateCollection(collectionUpdate: Partial<TeamCollection> & Pick<TeamCollection, "id">) {
+  private updateCollection(
+    collectionUpdate: Partial<TeamCollection> & Pick<TeamCollection, "id">
+  ) {
     const tree = this.collections$.value
 
     updateCollInTree(tree, collectionUpdate)
@@ -342,7 +360,9 @@ export default class TeamCollectionAdapter {
    *
    * @param {Partial<TeamRequest> & Pick<TeamRequest, 'id'>} requestUpdate - Object defining all the fields to update in request (ID of the request is required)
    */
-  private updateRequest(requestUpdate: Partial<TeamRequest> & Pick<TeamRequest, "id">) {
+  private updateRequest(
+    requestUpdate: Partial<TeamRequest> & Pick<TeamRequest, "id">
+  ) {
     const tree = this.collections$.value
 
     // Find request, if not present, don't update
@@ -526,7 +546,7 @@ export default class TeamCollectionAdapter {
     ).map<TeamRequest>((el) => {
       return {
         id: el.id,
-        collectionID: collectionID,
+        collectionID,
         title: el.title,
         request: JSON.parse(el.request),
       }
diff --git a/helpers/teams/TeamMemberAdapter.ts b/helpers/teams/TeamMemberAdapter.ts
index 1030623a2..356088855 100644
--- a/helpers/teams/TeamMemberAdapter.ts
+++ b/helpers/teams/TeamMemberAdapter.ts
@@ -74,7 +74,7 @@ export default class TeamMemberAdapter {
           cursor,
         },
       })
-      
+
       debugger
 
       result.push(...response.data.team.members)
diff --git a/helpers/templating.js b/helpers/templating.js
index fae480969..19bbac273 100644
--- a/helpers/templating.js
+++ b/helpers/templating.js
@@ -3,5 +3,8 @@ export default function parseTemplateString(string, variables) {
     return string
   }
   const searchTerm = /<<([^>]*)>>/g // "<<myVariable>>"
-  return decodeURI(encodeURI(string)).replace(searchTerm, (match, p1) => variables[p1] || "")
+  return decodeURI(encodeURI(string)).replace(
+    searchTerm,
+    (_, p1) => variables[p1] || ""
+  )
 }
diff --git a/helpers/tern.js b/helpers/tern.js
index e8e1a27ae..c2c32a4d6 100644
--- a/helpers/tern.js
+++ b/helpers/tern.js
@@ -1,12 +1,11 @@
 import tern from "tern"
 
+import { registerTernLinter } from "./ternlint"
 import ECMA_DEF from "~/helpers/terndoc/ecma.json"
 import PW_PRE_DEF from "~/helpers/terndoc/pw-pre.json"
 import PW_TEST_DEF from "~/helpers/terndoc/pw-test.json"
 import PW_EXTRAS_DEF from "~/helpers/terndoc/pw-extras.json"
 
-import { registerTernLinter } from "./ternlint"
-
 const server = new tern.Server({
   defs: [ECMA_DEF, PW_EXTRAS_DEF],
   plugins: {
diff --git a/helpers/utils/__tests__/b64.spec.js b/helpers/utils/__tests__/b64.spec.js
index fc75d5bd3..59bdcbb0f 100644
--- a/helpers/utils/__tests__/b64.spec.js
+++ b/helpers/utils/__tests__/b64.spec.js
@@ -5,7 +5,9 @@ describe("decodeB64StringToArrayBuffer", () => {
   test("decodes content correctly", () => {
     const decoder = new TextDecoder("utf-8")
     expect(
-      decoder.decode(decodeB64StringToArrayBuffer("aG9wcHNjb3RjaCBpcyBhd2Vzb21lIQ=="))
+      decoder.decode(
+        decodeB64StringToArrayBuffer("aG9wcHNjb3RjaCBpcyBhd2Vzb21lIQ==")
+      )
     ).toMatch("hoppscotch is awesome!")
   })
 
diff --git a/helpers/utils/__tests__/contenttypes.spec.js b/helpers/utils/__tests__/contenttypes.spec.js
index 236f03077..fac40fa42 100644
--- a/helpers/utils/__tests__/contenttypes.spec.js
+++ b/helpers/utils/__tests__/contenttypes.spec.js
@@ -10,7 +10,9 @@ describe("isJSONContentType", () => {
 
   test("returns true for JSON types with charset specified", () => {
     expect(isJSONContentType("application/json; charset=utf-8")).toBe(true)
-    expect(isJSONContentType("application/vnd.api+json; charset=utf-8")).toBe(true)
+    expect(isJSONContentType("application/vnd.api+json; charset=utf-8")).toBe(
+      true
+    )
     expect(isJSONContentType("application/hal+json; charset=utf-8")).toBe(true)
     expect(isJSONContentType("application/ld+json; charset=utf-8")).toBe(true)
   })
@@ -25,7 +27,9 @@ describe("isJSONContentType", () => {
   test("returns false for non-JSON content types with charset", () => {
     expect(isJSONContentType("application/xml; charset=utf-8")).toBe(false)
     expect(isJSONContentType("text/html; charset=utf-8")).toBe(false)
-    expect(isJSONContentType("application/x-www-form-urlencoded; charset=utf-8")).toBe(false)
+    expect(
+      isJSONContentType("application/x-www-form-urlencoded; charset=utf-8")
+    ).toBe(false)
     expect(isJSONContentType("foo/jsoninword; charset=utf-8")).toBe(false)
   })
 
diff --git a/helpers/utils/b64.js b/helpers/utils/b64.js
index 51869b6d2..942b003c4 100644
--- a/helpers/utils/b64.js
+++ b/helpers/utils/b64.js
@@ -3,16 +3,17 @@ export const decodeB64StringToArrayBuffer = (input) => {
   const ab = new ArrayBuffer(bytes)
   const uarray = new Uint8Array(ab)
 
-  const keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
+  const keyStr =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
 
   let chr1, chr2, chr3
   let enc1, enc2, enc3, enc4
   let j = 0
 
-  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")
+  input = input.replace(/[^A-Za-z0-9+/=]/g, "")
 
   for (let i = 0; i < bytes; i += 3) {
-    //get the 3 octets in 4 ASCII chars
+    // get the 3 octets in 4 ASCII chars
     enc1 = keyStr.indexOf(input.charAt(j++))
     enc2 = keyStr.indexOf(input.charAt(j++))
     enc3 = keyStr.indexOf(input.charAt(j++))
@@ -23,8 +24,8 @@ export const decodeB64StringToArrayBuffer = (input) => {
     chr3 = ((enc3 & 3) << 6) | enc4
 
     uarray[i] = chr1
-    if (enc3 != 64) uarray[i + 1] = chr2
-    if (enc4 != 64) uarray[i + 2] = chr3
+    if (enc3 !== 64) uarray[i + 1] = chr2
+    if (enc4 !== 64) uarray[i + 2] = chr3
   }
 
   return ab
diff --git a/helpers/utils/uri.js b/helpers/utils/uri.js
index d16cd0fb1..b5a8f3ef6 100644
--- a/helpers/utils/uri.js
+++ b/helpers/utils/uri.js
@@ -1,11 +1,13 @@
 export function parseUrlAndPath(value) {
-  let result = {}
+  const result = {}
   try {
-    let url = new URL(value)
+    const url = new URL(value)
     result.url = url.origin
     result.path = url.pathname
   } catch (error) {
-    let uriRegex = value.match(/^((http[s]?:\/\/)?(<<[^\/]+>>)?[^\/]*|)(\/?.*)$/)
+    const uriRegex = value.match(
+      /^((http[s]?:\/\/)?(<<[^/]+>>)?[^/]*|)(\/?.*)$/
+    )
     result.url = uriRegex[1]
     result.path = uriRegex[4]
   }
diff --git a/helpers/utils/valid.js b/helpers/utils/valid.js
index b9ce017e3..fbb718f50 100644
--- a/helpers/utils/valid.js
+++ b/helpers/utils/valid.js
@@ -1,5 +1,6 @@
 const [wsRegexIP, wsRegexHostname] = generateREForProtocol("^(wss?:\\/\\/)?")
-const [sseRegexIP, sseRegexHostname] = generateREForProtocol("^(https?:\\/\\/)?")
+const [sseRegexIP, sseRegexHostname] =
+  generateREForProtocol("^(https?:\\/\\/)?")
 const [socketioRegexIP, socketioRegexHostname] = generateREForProtocol(
   "^((wss?:\\/\\/)|(https?:\\/\\/))?"
 )