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