Refactor code to comply with ESLint rules

Major refactoring using ESLint with rules from AirBnb and Vue.

Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.

Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.

Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).

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

@@ -1,15 +1,15 @@
 <template>
-    <div
-        class="handle"
-        :style="{ cursor: cursorCssValue }"
-        @mousedown="startResize">
-        <div class="line" />
-        <font-awesome-icon
-            class="icon"
-            :icon="['fas', 'arrows-alt-h']" 
-        />
-        <div class="line" />
-    </div>
+  <div
+    class="handle"
+    :style="{ cursor: cursorCssValue }"
+    @mousedown="startResize">
+    <div class="line" />
+    <font-awesome-icon
+        class="icon"
+        :icon="['fas', 'arrows-alt-h']"
+    />
+    <div class="line" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -17,27 +17,30 @@ import { Component, Vue } from 'vue-property-decorator';
 
 @Component
 export default class Handle extends Vue {
-    public readonly cursorCssValue = 'ew-resize';
-    private initialX: number = undefined;
+  public readonly cursorCssValue = 'ew-resize';
 
-    public startResize(event: MouseEvent): void {
-        this.initialX = event.clientX;
-        document.body.style.setProperty('cursor', this.cursorCssValue);
-        document.addEventListener('mousemove', this.resize);
-        window.addEventListener('mouseup', this.stopResize);
-        event.stopPropagation();
-        event.preventDefault();
-    }
-    public resize(event: MouseEvent): void {
-        const displacementX = event.clientX - this.initialX;
-        this.$emit('resized', displacementX);
-        this.initialX = event.clientX;
-    }
-    public stopResize(): void {
-        document.body.style.removeProperty('cursor');
-        document.removeEventListener('mousemove', this.resize);
-        window.removeEventListener('mouseup', this.stopResize);
-    }
+  private initialX: number = undefined;
+
+  public startResize(event: MouseEvent): void {
+    this.initialX = event.clientX;
+    document.body.style.setProperty('cursor', this.cursorCssValue);
+    document.addEventListener('mousemove', this.resize);
+    window.addEventListener('mouseup', this.stopResize);
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  public resize(event: MouseEvent): void {
+    const displacementX = event.clientX - this.initialX;
+    this.$emit('resized', displacementX);
+    this.initialX = event.clientX;
+  }
+
+  public stopResize(): void {
+    document.body.style.removeProperty('cursor');
+    document.removeEventListener('mousemove', this.resize);
+    window.removeEventListener('mouseup', this.stopResize);
+  }
 }
 
 </script>
@@ -49,27 +52,27 @@ $color          : $color-primary-dark;
 $color-hover    : $color-primary;
 
 .handle {
-    user-select: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    &:hover {
-        .line {
-            background: $color-hover;
-        }
-        .image {
-            color: $color-hover;
-        }
-    }
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &:hover {
     .line {
-        flex: 1;
-        background: $color;
-        width: 3px;
+      background: $color-hover;
     }
-    .icon {
-        color: $color;
+    .image {
+      color: $color-hover;
     }
-    margin-right: 5px;
-    margin-left: 5px;
+  }
+  .line {
+    flex: 1;
+    background: $color;
+    width: 3px;
+  }
+  .icon {
+    color: $color;
+  }
+  margin-right: 5px;
+  margin-left: 5px;
 }
 </style>

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

@@ -1,18 +1,18 @@
 <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="first" ref="firstElement">
-            <slot name="first"></slot>
-        </div>
-        <Handle class="handle" @resized="onResize($event)" />
-        <div class="second">
-            <slot name="second"></slot>
-        </div>
+  <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>
     </div>
+    <Handle class="handle" @resized="onResize($event)" />
+    <div class="second">
+      <slot name="second"></slot>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -25,17 +25,20 @@ import Handle from './Handle.vue';
   },
 })
 export default class HorizontalResizeSlider extends Vue {
-    @Prop() public verticalMargin: string;
-    @Prop() public firstMinWidth: string;
-    @Prop() public firstInitialWidth: string;
-    @Prop() public secondMinWidth: string;
+  @Prop() public verticalMargin: string;
 
-    private get left(): HTMLElement { return this.$refs.firstElement as HTMLElement; }
+  @Prop() public firstMinWidth: string;
 
-    public onResize(displacementX: number): void {
-        const leftWidth = this.left.offsetWidth + displacementX;
-        this.left.style.width = `${leftWidth}px`;
-    }
+  @Prop() public firstInitialWidth: string;
+
+  @Prop() public secondMinWidth: string;
+
+  private get left(): HTMLElement { return this.$refs.firstElement as HTMLElement; }
+
+  public onResize(displacementX: number): void {
+    const leftWidth = this.left.offsetWidth + displacementX;
+    this.left.style.width = `${leftWidth}px`;
+  }
 }
 </script>
 
@@ -43,27 +46,27 @@ export default class HorizontalResizeSlider extends Vue {
 @use "@/presentation/assets/styles/main" as *;
 
 .slider {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
+  .first {
+    min-width: var(--first-min-width);
+    width: var(--first-initial-width);
+  }
+  .second {
+    flex: 1;
+    min-width: var(--second-min-width);
+  }
+  @media screen and (max-width: $media-vertical-view-breakpoint) {
+    flex-direction: column;
     .first {
-        min-width: var(--first-min-width);
-        width: var(--first-initial-width);
+      width: auto !important;
     }
     .second {
-        flex: 1;
-        min-width: var(--second-min-width);
+      margin-top: var(--vertical-margin);
     }
-    @media screen and (max-width: $media-vertical-view-breakpoint) {
-        flex-direction: column;
-        .first {
-            width: auto !important;
-        }
-        .second {
-            margin-top: var(--vertical-margin);
-        }
-        .handle {
-            display: none;
-        }
+    .handle {
+      display: none;
     }
+  }
 }
 </style>