Transition to eslint-config-airbnb-with-typescript

- Migrate to newer `eslint-config-airbnb-with-typescript` from
  `eslint-config-airbnb`.
- Add also `rushstack/eslint-patch` as per instructed by
  `eslint-config-airbnb-with-typescript` docs.
- Update codebase to align with new linting standards.
- Add script to configure VS Code for effective linting for project
  developers, move it to `scripts` directory along with clean npm
  install script for better organization.

src/presentation/components/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div id="app">
-      <div class="app__wrapper">
-        <TheHeader class="app__row" />
-        <TheSearchBar class="app__row" />
-        <TheScriptArea class="app__row" />
-        <TheCodeButtons class="app__row app__code-buttons" />
-        <TheFooter />
-      </div>
-   </div>
+    <div class="app__wrapper">
+      <TheHeader class="app__row" />
+      <TheSearchBar class="app__row" />
+      <TheScriptArea class="app__row" />
+      <TheCodeButtons class="app__row app__code-buttons" />
+      <TheFooter />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -1,8 +1,14 @@
 <template>
-  <button class="button" @click="onClicked">
+  <button
+    class="button"
+    type="button"
+    @click="onClicked"
+  >
     <font-awesome-icon
       class="button__icon"
-      :icon="[iconPrefix, iconName]" size="2x"  />
+      :icon="[iconPrefix, iconName]"
+      size="2x"
+    />
     <div class="button__text">{{text}}</div>
   </button>
 </template>

src/presentation/components/Code/CodeButtons/Instructions/Code.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="code-wrapper">
     <span class="dollar">$</span>
-    <code><slot></slot></code>
+    <code><slot /></code>
     <font-awesome-icon
       class="copy-button"
       :icon="['fas', 'copy']"

src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue

@@ -7,8 +7,8 @@
     <p>
       <strong>1. The easy alternative</strong>. Run your script without any manual steps by
       <a :href="this.macOsDownloadUrl">downloading desktop version</a> of {{ this.appName }} on the
-       {{ this.osName }} system you wish to configure, and then click on the Run button. This is
-       recommended for most users.
+      {{ this.osName }} system you wish to configure, and then click on the Run button. This is
+      recommended for most users.
     </p>
     <hr />
     <p>

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -4,19 +4,21 @@
       v-if="this.canRun"
       text="Run"
       v-on:click="executeCode"
-      icon-prefix="fas" icon-name="play">
-    </IconButton>
+      icon-prefix="fas"
+      icon-name="play"
+    />
     <IconButton
       :text="this.isDesktopVersion ? 'Save' : 'Download'"
       v-on:click="saveCode"
       icon-prefix="fas"
-      :icon-name="this.isDesktopVersion ? 'save' : 'file-download'">
-    </IconButton>
+      :icon-name="this.isDesktopVersion ? 'save' : 'file-download'"
+    />
     <IconButton
       text="Copy"
       v-on:click="copyCode"
-      icon-prefix="fas" icon-name="copy">
-    </IconButton>
+      icon-prefix="fas"
+      icon-name="copy"
+    />
     <Dialog v-if="this.hasInstructions" ref="instructionsDialog">
       <InstructionList :data="this.instructions" />
     </Dialog>

src/presentation/components/Code/TheCodeArea.vue

@@ -5,7 +5,7 @@
     <div
       :id="editorId"
       class="code-area"
-    ></div>
+    />
   </Responsive>
 </template>
 

src/presentation/components/Scripts/Menu/MenuOptionListItem.vue

@@ -1,7 +1,10 @@
 <template>
   <span> <!-- Parent wrapper allows adding content inside with CSS without making it clickable -->
     <span
-      v-bind:class="{ 'disabled': !enabled, 'enabled': enabled}"
+      v-bind:class="{
+        disabled: !enabled,
+        enabled: enabled,
+      }"
       v-non-collapsing
       @click="enabled && onClicked()">{{label}}</span>
   </span>

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -4,32 +4,39 @@
       label="None"
       :enabled="this.currentSelection !== SelectionType.None"
       @click="selectType(SelectionType.None)"
-      v-tooltip=" 'Deselect all selected scripts.<br/>' +
-                  '💡 Good start to dive deeper into tweaks and select only what you want.'"
-      />
+      v-tooltip="
+        'Deselect all selected scripts.<br/>'
+          + '💡 Good start to dive deeper into tweaks and select only what you want.'
+      "
+    />
     <MenuOptionListItem
       label="Standard"
       :enabled="this.currentSelection !== SelectionType.Standard"
       @click="selectType(SelectionType.Standard)"
-      v-tooltip=" '🛡️ Balanced for privacy and functionality.<br/>' +
-                  'OS and applications will function normally.<br/>' +
-                  '💡 Recommended for everyone'"
-      />
+      v-tooltip="
+        '🛡️ Balanced for privacy and functionality.<br/>'
+          + 'OS and applications will function normally.<br/>'
+          + '💡 Recommended for everyone'"
+    />
     <MenuOptionListItem
       label="Strict"
       :enabled="this.currentSelection !== SelectionType.Strict"
       @click="selectType(SelectionType.Strict)"
-      v-tooltip=" '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>' +
-        + '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>'
-        + '💡 Recommended for daily users that prefers more privacy over non-essential functions'"
-      />
+      v-tooltip="
+        '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>'
+          + '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>'
+          + '💡 Recommended for daily users that prefers more privacy over non-essential functions'
+      "
+    />
     <MenuOptionListItem
-        label="All"
-        :enabled="this.currentSelection !== SelectionType.All"
-        @click="selectType(SelectionType.All)"
-        v-tooltip=" '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
+      label="All"
+      :enabled="this.currentSelection !== SelectionType.All"
+      @click="selectType(SelectionType.All)"
+      v-tooltip="
+        '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
           + '🛑 Not designed for daily users, it will break important functionalities.<br/>'
-          + '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'"
+          + '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'
+      "
     />
   </MenuOptionList>
 </template>

src/presentation/components/Scripts/Menu/TheOsChanger.vue

@@ -1,11 +1,12 @@
 <template>
   <MenuOptionList>
     <MenuOptionListItem
-      v-for="os in this.allOses" :key="os.name"
+      v-for="os in this.allOses"
+      :key="os.name"
       :enabled="currentOs !== os.os"
       @click="changeOs(os.os)"
       :label="os.name"
-      />
+    />
   </MenuOptionList>
 </template>
 

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="container">
     <TheSelector class="item" />
-    <TheOsChanger class="item"  />
+    <TheOsChanger class="item" />
     <TheViewChanger
       class="item"
       v-on:viewChanged="$emit('viewChanged', $event)"

src/presentation/components/Scripts/Menu/View/TheViewChanger.vue

@@ -3,7 +3,8 @@
     label="View"
     class="part">
     <MenuOptionListItem
-      v-for="view in this.viewOptions" :key="view.type"
+      v-for="view in this.viewOptions"
+      :key="view.type"
       :label="view.displayName"
       :enabled="currentView !== view.type"
       @click="setView(view.type)"

src/presentation/components/Scripts/Slider/Handle.vue

@@ -5,8 +5,8 @@
     @mousedown="startResize">
     <div class="line" />
     <font-awesome-icon
-        class="icon"
-        :icon="['fas', 'arrows-alt-h']"
+      class="icon"
+      :icon="['fas', 'arrows-alt-h']"
     />
     <div class="line" />
   </div>

src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue

@@ -1,16 +1,19 @@
 <template>
-  <div class="slider" v-bind:style="{
-    '--vertical-margin': this.verticalMargin,
-    '--first-min-width': this.firstMinWidth,
-    '--first-initial-width': this.firstInitialWidth,
-    '--second-min-width': this.secondMinWidth,
-    }">
+  <div
+    class="slider"
+    v-bind:style="{
+      '--vertical-margin': this.verticalMargin,
+      '--first-min-width': this.firstMinWidth,
+      '--first-initial-width': this.firstInitialWidth,
+      '--second-min-width': this.secondMinWidth,
+    }"
+  >
     <div class="first" ref="firstElement">
-      <slot name="first"></slot>
+      <slot name="first" />
     </div>
     <Handle class="handle" @resized="onResize($event)" />
     <div class="second">
-      <slot name="second"></slot>
+      <slot name="second" />
     </div>
   </div>
 </template>

src/presentation/components/Scripts/TheScriptArea.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="scripts">
     <TheScriptsMenu v-on:viewChanged="currentView = $event" />
-    <HorizontalResizeSlider class="row"
-      verticalMargin="15px" firstInitialWidth="55%"
-      firstMinWidth="20%" secondMinWidth="20%">
+    <HorizontalResizeSlider
+      class="row"
+      verticalMargin="15px"
+      firstInitialWidth="55%"
+      firstMinWidth="20%"
+      secondMinWidth="20%"
+    >
       <template v-slot:first>
         <TheScriptsView :currentView="currentView" />
       </template>

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -9,21 +9,24 @@
           <span v-if="width >= 750">big</span>
       </div>
     -->
-    <div v-if="categoryIds != null && categoryIds.length > 0"  class="cards">
+    <div
+      v-if="categoryIds != null && categoryIds.length > 0"
+      class="cards"
+    >
       <CardListItem
         class="card"
         v-bind:class="{
           'small-screen': width <= 500,
           'medium-screen': width > 500 && width < 750,
-          'big-screen': width >= 750
+          'big-screen': width >= 750,
         }"
         v-for="categoryId of categoryIds"
         :data-category="categoryId"
         v-bind:key="categoryId"
         :categoryId="categoryId"
         :activeCategoryId="activeCategoryId"
-        v-on:selected="onSelected(categoryId, $event)">
-      </CardListItem>
+        v-on:selected="onSelected(categoryId, $event)"
+      />
     </div>
     <div v-else class="error">Something went bad 😢</div>
   </Responsive>

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -1,44 +1,48 @@
 <template>
-  <div class="card"
+  <div
+    class="card"
     v-on:click="onSelected(!isExpanded)"
     v-bind:class="{
       'is-collapsed': !isExpanded,
       'is-inactive': activeCategoryId && activeCategoryId != categoryId,
-      'is-expanded': isExpanded
+      'is-expanded': isExpanded,
     }"
     ref="cardElement">
-      <div class="card__inner">
-        <!-- Title -->
-        <span
-          class="card__inner__title"
-          v-if="cardTitle && cardTitle.length > 0">
-          <span>{{cardTitle}}</span>
-        </span>
-        <span v-else>Oh no 😢</span>
-        <!-- Expand icon -->
+    <div class="card__inner">
+      <!-- Title -->
+      <span
+        class="card__inner__title"
+        v-if="cardTitle && cardTitle.length > 0">
+        <span>{{cardTitle}}</span>
+      </span>
+      <span v-else>Oh no 😢</span>
+      <!-- Expand icon -->
+      <font-awesome-icon
+        class="card__inner__expand-icon"
+        :icon="['far', isExpanded ? 'folder-open' : 'folder']"
+      />
+      <!-- Indeterminate and full states -->
+      <div class="card__inner__state-icons">
         <font-awesome-icon
-          class="card__inner__expand-icon"
-          :icon="['far', isExpanded ? 'folder-open' : 'folder']"
+          :icon="['fa', 'battery-half']"
+          v-if="isAnyChildSelected && !areAllChildrenSelected"
+        />
+        <font-awesome-icon
+          :icon="['fa', 'battery-full']"
+          v-if="areAllChildrenSelected"
+        />
+      </div>
+    </div>
+    <div class="card__expander" v-on:click.stop>
+      <div class="card__expander__content">
+        <ScriptsTree :categoryId="categoryId" />
+      </div>
+      <div class="card__expander__close-button">
+        <font-awesome-icon
+          :icon="['fas', 'times']"
+          v-on:click="onSelected(false)"
         />
-        <!-- Indeterminate and full states -->
-        <div class="card__inner__state-icons">
-          <font-awesome-icon
-            :icon="['fa', 'battery-half']"
-            v-if="isAnyChildSelected && !areAllChildrenSelected"
-          />
-          <font-awesome-icon
-            :icon="['fa', 'battery-full']"
-            v-if="areAllChildrenSelected"
-          />
-        </div>
       </div>
-      <div class="card__expander" v-on:click.stop>
-        <div class="card__expander__content">
-          <ScriptsTree :categoryId="categoryId"></ScriptsTree>
-        </div>
-        <div class="card__expander__close-button">
-          <font-awesome-icon :icon="['fas', 'times']"  v-on:click="onSelected(false)"/>
-        </div>
     </div>
   </div>
 </template>
@@ -82,7 +86,7 @@ export default class CardListItem extends StatefulVue {
   }
 
   @Watch('activeCategoryId')
-  public async onActiveCategoryChanged(value: |number) {
+  public async onActiveCategoryChanged(value?: number) {
     this.isExpanded = value === this.categoryId;
   }
 
@@ -96,7 +100,7 @@ export default class CardListItem extends StatefulVue {
   }
 
   @Watch('categoryId')
-  public async updateState(value: |number) {
+  public async updateState(value?: number) {
     const context = await this.getCurrentContext();
     const category = !value ? undefined : context.state.collection.findCategory(value);
     this.cardTitle = category ? category.name : undefined;

src/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue

@@ -7,8 +7,7 @@
         :filterPredicate="filterPredicate"
         :filterText="filterText"
         v-on:nodeSelected="toggleNodeSelection($event)"
-        >
-      </SelectableTree>
+      />
     </span>
     <span v-else>Nooo 😢</span>
   </span>

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Documentation/Documentable.vue

@@ -13,10 +13,15 @@
     <div
       v-if="docs && docs.length > 0 && isExpanded"
       class="docs"
-      v-bind:class="{ 'docs-expanded': isExpanded, 'docs-collapsed': !isExpanded }" >
+      v-bind:class="{ 'docs-expanded': isExpanded, 'docs-collapsed': !isExpanded }"
+    >
       <DocumentationText
-        :docs="docs" class="text"
-        v-bind:class="{ 'expanded': isExpanded, 'collapsed': !isExpanded }" />
+        :docs="docs"
+        class="text"
+        v-bind:class="{
+          expanded: isExpanded,
+          collapsed: !isExpanded,
+        }" />
     </div>
   </div>
 </template>

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Documentation/DocumentationText.vue

@@ -3,8 +3,7 @@
     class="documentation-text"
     v-html="renderedText"
     v-on:click.stop
-    >
-  </div>
+  />
 </template>
 
 <script lang="ts">

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue

@@ -23,7 +23,7 @@ import Documentable from './Documentation/Documentable.vue';
   },
 })
 export default class Node extends Vue {
-    @Prop() public data: INode;
+  @Prop() public data: INode;
 }
 </script>
 

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="checkbox-switch" >
-    <input type="checkbox" class="input-checkbox"
+  <div class="checkbox-switch">
+    <input
+      type="checkbox"
+      class="input-checkbox"
       v-model="isReverted"
       @change="onRevertToggled()"
       v-on:click.stop>

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/SelectableTree.vue

@@ -1,13 +1,14 @@
 <template>
   <span>
     <span v-if="initialLiquorTreeNodes != null && initialLiquorTreeNodes.length > 0">
-      <tree :options="liquorTreeOptions"
+      <tree
+        :options="liquorTreeOptions"
         :data="initialLiquorTreeNodes"
         v-on:node:checked="nodeSelected($event)"
         v-on:node:unchecked="nodeSelected($event)"
         ref="treeElement"
       >
-        <span class="tree-text" slot-scope="{ node }" >
+        <span class="tree-text" slot-scope="{ node }">
           <Node :data="convertExistingToNode(node)" />
         </span>
       </tree>
@@ -86,7 +87,7 @@ export default class SelectableTree extends Vue { // Stateless to make it easier
   }
 
   @Watch('filterText', { immediate: true })
-  public async updateFilterText(filterText: |string) {
+  public async updateFilterText(filterText?: string) {
     const api = await this.getLiquorTreeApi();
     if (!filterText) {
       api.clearFilter();
@@ -111,7 +112,7 @@ export default class SelectableTree extends Vue { // Stateless to make it easier
   private async getLiquorTreeApi(): Promise<ILiquorTree> {
     const accessor = (): ILiquorTree => {
       const uiElement = this.$refs.treeElement;
-      type TreeElement = typeof uiElement & {tree: ILiquorTree};
+      type TreeElement = typeof uiElement & { tree: ILiquorTree };
       return uiElement ? (uiElement as TreeElement).tree : undefined;
     };
     const treeElement = await tryUntilDefined(accessor, 5, 20); // Wait for it to render

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="scripts">
     <div v-if="!isSearching">
-      <CardList v-if="currentView === ViewType.Cards"/>
+      <CardList v-if="currentView === ViewType.Cards" />
       <div class="tree" v-else-if="currentView === ViewType.Tree">
         <ScriptsTree />
       </div>
@@ -9,18 +9,18 @@
     <div v-else> <!-- Searching -->
       <div class="search">
         <div class="search__query">
-          <div>Searching for "{{this.searchQuery | threeDotsTrim}}"</div>
+          <div>Searching for "{{this.searchQuery | threeDotsTrim }}"</div>
           <div class="search__query__close-button">
             <font-awesome-icon
               :icon="['fas', 'times']"
-              v-on:click="clearSearchQuery()"/>
+              v-on:click="clearSearchQuery()" />
           </div>
         </div>
         <div v-if="!searchHasMatches" class="search-no-matches">
-          <div>Sorry, no matches for "{{this.searchQuery | threeDotsTrim}}" 😞</div>
+          <div>Sorry, no matches for "{{this.searchQuery | threeDotsTrim }}" 😞</div>
           <div>
             Feel free to extend the scripts
-            <a :href="repositoryUrl" target="_blank" class="child github" >here</a> ✨
+            <a :href="repositoryUrl" target="_blank" class="child github">here</a> ✨
           </div>
         </div>
       </div>

src/presentation/components/Shared/Dialog.vue

@@ -5,10 +5,13 @@
     height="auto">
     <div class="dialog">
       <div class="dialog__content">
-        <slot></slot>
+        <slot />
       </div>
       <div class="dialog__close-button">
-        <font-awesome-icon :icon="['fas', 'times']"  @click="$modal.hide(name)"/>
+        <font-awesome-icon
+          :icon="['fas', 'times']"
+          @click="$modal.hide(name)"
+        />
       </div>
     </div>
   </modal>

src/presentation/components/Shared/Responsive.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="containerElement" class="container">
-    <slot ref="containerElement"></slot>
+    <slot ref="containerElement" />
   </div>
 </template>
 

src/presentation/components/TheFooter/DownloadUrlList.vue

@@ -3,10 +3,10 @@
     class="container"
     v-bind:class="{
       'container-unsupported': !hasCurrentOsDesktopVersion,
-      'container-supported': hasCurrentOsDesktopVersion
+      'container-supported': hasCurrentOsDesktopVersion,
     }">
     <span class="description">
-      <font-awesome-icon class="description__icon" :icon="['fas', 'desktop']"  />
+      <font-awesome-icon class="description__icon" :icon="['fas', 'desktop']" />
       <span class="description__text">For desktop:</span>
     </span>
     <span class="urls">

src/presentation/components/TheFooter/DownloadUrlListItem.vue

@@ -1,9 +1,10 @@
 <template>
   <span class="url">
-    <a :href="downloadUrl"
-        v-bind:class="{
-        'url__active': hasCurrentOsDesktopVersion && isCurrentOs,
-        'url__inactive': hasCurrentOsDesktopVersion && !isCurrentOs,
+    <a
+      :href="downloadUrl"
+      v-bind:class="{
+        url__active: hasCurrentOsDesktopVersion && isCurrentOs,
+        url__inactive: hasCurrentOsDesktopVersion && !isCurrentOs,
       }">{{ operatingSystemName }}</a>
   </span>
 </template>

src/presentation/components/TheFooter/PrivacyPolicy.vue

@@ -17,14 +17,18 @@
     </div>
     <div class="line">
       <div class="line__emoji">🤖</div>
-      <div>All transparent: Deployed automatically from the master branch
-      of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.</div>
+      <div>
+        All transparent: Deployed automatically from the master branch
+        of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.
+      </div>
     </div>
     <div v-if="!isDesktop" class="line">
       <div class="line__emoji">📈</div>
-      <div>Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
-      are collected by AWS but they cannot be traced to you or your behavior.
-      You can download the offline version if you don't want any CDN data collection.</div>
+      <div>
+        Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
+        are collected by AWS but they cannot be traced to you or your behavior.
+        You can download the offline version if you don't want any CDN data collection.
+      </div>
     </div>
     <div class="line">
       <div class="line__emoji">🎉</div>

src/presentation/components/TheFooter/TheFooter.vue

@@ -3,7 +3,7 @@
     <div class="footer">
       <div class="footer__section">
         <span v-if="isDesktop" class="footer__section__item">
-          <font-awesome-icon class="icon" :icon="['fas', 'globe']"  />
+          <font-awesome-icon class="icon" :icon="['fas', 'globe']" />
           <span>
             Online version at <a :href="homepageUrl" target="_blank">{{ homepageUrl }}</a>
           </span>
@@ -15,30 +15,30 @@
       <div class="footer__section">
         <div class="footer__section__item">
           <a :href="feedbackUrl" target="_blank">
-            <font-awesome-icon class="icon" :icon="['far', 'smile']"  />
+            <font-awesome-icon class="icon" :icon="['far', 'smile']" />
             <span>Feedback</span>
           </a>
         </div>
         <div class="footer__section__item">
           <a :href="repositoryUrl" target="_blank">
-            <font-awesome-icon class="icon" :icon="['fab', 'github']"  />
+            <font-awesome-icon class="icon" :icon="['fab', 'github']" />
             <span>Source Code</span>
           </a>
         </div>
         <div class="footer__section__item">
           <a :href="releaseUrl" target="_blank">
-            <font-awesome-icon class="icon" :icon="['fas', 'tag']"  />
+            <font-awesome-icon class="icon" :icon="['fas', 'tag']" />
             <span>v{{ version }}</span>
           </a>
         </div>
         <div class="footer__section__item">
-          <font-awesome-icon class="icon" :icon="['fas', 'user-secret']"  />
+          <font-awesome-icon class="icon" :icon="['fas', 'user-secret']" />
           <a @click="$refs.privacyDialog.show()">Privacy</a>
         </div>
       </div>
     </div>
     <Dialog ref="privacyDialog">
-        <PrivacyPolicy />
+      <PrivacyPolicy />
     </Dialog>
   </div>
 </template>

src/presentation/components/TheHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="container">
-    <h1 class="child title" >{{ title }}</h1>
+    <h1 class="child title">{{ title }}</h1>
     <h2 class="child subtitle">Now you have the choice</h2>
   </div>
 </template>

src/presentation/components/TheSearchBar.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="search" v-non-collapsing>
-    <input type="search" class="search-term"
+    <input
+      type="search"
+      class="search-term"
       :placeholder="searchPlaceHolder"
-      v-model="searchQuery" >
+      v-model="searchQuery"
+    >
     <div class="icon-wrapper">
       <font-awesome-icon :icon="['fas', 'search']" />
     </div>
@@ -26,7 +29,7 @@ export default class TheSearchBar extends StatefulVue {
   public searchQuery = '';
 
   @Watch('searchQuery')
-  public async updateFilter(newFilter: |string) {
+  public async updateFilter(newFilter?: string) {
     const context = await this.getCurrentContext();
     const { filter } = context.state;
     if (!newFilter) {