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/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>