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/Code/CodeButtons/Code.vue

@@ -1,14 +1,14 @@
 <template>
-    <span class="code-wrapper">
-        <span class="dollar">$</span>
-        <code><slot></slot></code>
-        <font-awesome-icon
-            class="copy-button"
-            :icon="['fas', 'copy']"
-            @click="copyCode"
-            v-tooltip.top-center="'Copy'"
-        />
-    </span>
+  <span class="code-wrapper">
+    <span class="dollar">$</span>
+    <code><slot></slot></code>
+    <font-awesome-icon
+      class="copy-button"
+      :icon="['fas', 'copy']"
+      @click="copyCode"
+      v-tooltip.top-center="'Copy'"
+    />
+  </span>
 </template>
 
 <script lang="ts">
@@ -28,27 +28,27 @@ export default class Code extends Vue {
 @use "@/presentation/assets/styles/main" as *;
 
 .code-wrapper {
-    white-space: nowrap;
-    justify-content: space-between;
-    font-family: $font-normal;
-    background-color: $color-primary-darker;
-    color: $color-on-primary;
-    padding-left: 0.3rem;
-    padding-right: 0.3rem;
-    .dollar {
-        margin-right: 0.5rem;
-        font-size: 0.8rem;
-        user-select: none;
-    }
-    .copy-button {
-        margin-left: 1rem;
-        cursor: pointer;
-        &:hover {
-            color: $color-primary;
-        }
-    }
-    code {
-        font-size: 1.2rem;
+  white-space: nowrap;
+  justify-content: space-between;
+  font-family: $font-normal;
+  background-color: $color-primary-darker;
+  color: $color-on-primary;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  .dollar {
+    margin-right: 0.5rem;
+    font-size: 0.8rem;
+    user-select: none;
+  }
+  .copy-button {
+    margin-left: 1rem;
+    cursor: pointer;
+    &:hover {
+        color: $color-primary;
     }
+  }
+  code {
+    font-size: 1.2rem;
+  }
 }
 </style>

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

@@ -1,25 +1,26 @@
 <template>
-    <button class="button" @click="onClicked">
-        <font-awesome-icon
-        class="button__icon"
-        :icon="[iconPrefix, iconName]" size="2x"  />
-        <div class="button__text">{{text}}</div>
-    </button>
+  <button class="button" @click="onClicked">
+    <font-awesome-icon
+      class="button__icon"
+      :icon="[iconPrefix, iconName]" size="2x"  />
+    <div class="button__text">{{text}}</div>
+  </button>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
+import {
+  Component, Prop, Emit, Vue,
+} from 'vue-property-decorator';
 
 @Component
 export default class IconButton extends Vue {
   @Prop() public text!: number;
+
   @Prop() public iconPrefix!: string;
+
   @Prop() public iconName!: string;
 
-  @Emit('click')
-  public onClicked() {
-      return;
-  }
+  @Emit('click') public onClicked() { /* do nothing except firing event */ }
 }
 </script>
 
@@ -27,41 +28,40 @@ export default class IconButton extends Vue {
 @use "@/presentation/assets/styles/main" as *;
 
 .button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-    background-color: $color-secondary;
-    color: $color-on-secondary;
+  background-color: $color-secondary;
+  color: $color-on-secondary;
 
-    border: none;
-    padding:20px;
-    transition-duration: 0.4s;
-    overflow: hidden;
-    box-shadow: 0 3px 9px $color-primary-darkest;
-    border-radius: 4px;
+  border: none;
+  padding:20px;
+  transition-duration: 0.4s;
+  overflow: hidden;
+  box-shadow: 0 3px 9px $color-primary-darkest;
+  border-radius: 4px;
 
-    cursor: pointer;
-    width: 10%;
-    min-width: 90px;
-    &:hover {
-        background: $color-surface;
-        box-shadow: 0px 2px 10px 5px $color-secondary;
-    }
-    &:hover>&__text {
-        display: block;
-    }
-    &:hover>&__icon {
-        display: none;
-    }
-    &__text {
-        display: none;
-        font-family: $font-artistic;
-        font-size: 1.5em;
-        color: $color-primary;
-        font-weight: 500;
-        line-height: 1.1;
-    }
+  cursor: pointer;
+  width: 10%;
+  min-width: 90px;
+  &:hover {
+    background: $color-surface;
+    box-shadow: 0px 2px 10px 5px $color-secondary;
   }
-
+  &:hover>&__text {
+    display: block;
+  }
+  &:hover>&__icon {
+    display: none;
+  }
+  &__text {
+    display: none;
+    font-family: $font-artistic;
+    font-size: 1.5em;
+    color: $color-primary;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+}
 </style>

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

@@ -1,98 +1,106 @@
 <template>
-    <div class="instructions">
-        <p>
-            Since you're using online version of {{ this.appName }}, you will need to do additional steps after downloading the file to execute your script on macOS:
-        </p>
-        <p>
-            <ol>
-                <li>
-                    <span>Download the file</span>
-                    <font-awesome-icon
-                        class="explanation"
-                        :icon="['fas', 'info-circle']"
-                        v-tooltip.top-center="'You should be prompted to save the script file now, otherwise try to download it again'"
-                    />
-                </li>
-                <li>
-                    <span>Open terminal</span>
-                    <font-awesome-icon
-                        class="explanation"
-                        :icon="['fas', 'info-circle']"
-                        v-tooltip.top-center="'Type Terminal into Spotlight or open from the Applications -> Utilities folder'"
-                    />
-                </li>
-                <li>
-                    <span>Navigate to the folder where you downloaded the file e.g.:</span>
-                    <div>
-                        <Code>cd ~/Downloads</Code>
-                        <font-awesome-icon
-                            class="explanation"
-                            :icon="['fas', 'info-circle']"
-                            v-tooltip.top-center="
-                                'Press on Enter/Return key after running the command.<br/>' +
-                                'If the file is not downloaded on Downloads folder, change `Downloads` to path where the file is downloaded.<br/>' +
-                                '• `cd` will change the current folder.<br/>' + 
-                                '• `~` is the user home directory.'"
-                        />
-                    </div>
-                </li>
-                <li>
-                    <span>Give the file execute permissions:</span>
-                    <div>
-                        <Code>chmod +x {{ this.fileName }}</Code>
-                        <font-awesome-icon
-                            class="explanation"
-                            :icon="['fas', 'info-circle']"
-                            v-tooltip.top-center="
-                                'Press on Enter/Return key after running the command.<br/>' + 
-                                'It will make the file executable.'"
-                        />
-                    </div>
-                </li>
-                <li>
-                    <span>Execute the file:</span>
-                    <div>
-                        <Code>./{{ this.fileName }}</Code>
-                        <font-awesome-icon
-                            class="explanation"
-                            :icon="['fas', 'info-circle']"
-                            v-tooltip.top-center="'Alternatively you can double click on the file'"
-                        />
-                    </div>
-                </li>
-                <li>
-                    <span>If asked, enter your administrator password</span>
-                    <font-awesome-icon
-                        class="explanation"
-                        :icon="['fas', 'info-circle']"
-                        v-tooltip.top-center="
-                            'Press on Enter/Return key after typing your password<br/>' +
-                            'Your password will not be shown by default.<br/>' +
-                            'Administor privileges are required to configure OS.'"
-                    />
-                </li>
-            </ol>
-        </p>
-        <p>
-            Or download the <a :href="this.macOsDownloadUrl">offline version</a> to run your scripts directly to skip these steps.
-        </p>
-    </div>
+  <div class="instructions">
+    <p>
+      Since you're using online version of {{ this.appName }}, you will need to do additional
+      steps after downloading the file to execute your script on macOS:
+    </p>
+    <p>
+      <ol>
+        <li>
+          <span>Download the file</span>
+          <font-awesome-icon
+            class="explanation"
+            :icon="['fas', 'info-circle']"
+            v-tooltip.top-center="
+              'You should be prompted to save the script file now'
+              + ', otherwise try to download it again'"
+          />
+        </li>
+        <li>
+          <span>Open terminal</span>
+          <font-awesome-icon
+            class="explanation"
+            :icon="['fas', 'info-circle']"
+            v-tooltip.top-center="
+              'Type Terminal into Spotlight or open from the Applications -> Utilities folder'"
+          />
+        </li>
+        <li>
+          <span>Navigate to the folder where you downloaded the file e.g.:</span>
+          <div>
+            <Code>cd ~/Downloads</Code>
+            <font-awesome-icon
+              class="explanation"
+              :icon="['fas', 'info-circle']"
+              v-tooltip.top-center="
+                'Press on Enter/Return key after running the command.<br/>'
+                + 'If the file is not downloaded on Downloads folder, change'
+                + '`Downloads` to path where the file is downloaded.<br/>'
+                + '• `cd` will change the current folder.<br/>'
+                + '• `~` is the user home directory.'"
+            />
+          </div>
+        </li>
+        <li>
+          <span>Give the file execute permissions:</span>
+          <div>
+            <Code>chmod +x {{ this.fileName }}</Code>
+            <font-awesome-icon
+              class="explanation"
+              :icon="['fas', 'info-circle']"
+              v-tooltip.top-center="
+                  'Press on Enter/Return key after running the command.<br/>' +
+                  'It will make the file executable.'"
+            />
+          </div>
+        </li>
+        <li>
+          <span>Execute the file:</span>
+          <div>
+            <Code>./{{ this.fileName }}</Code>
+            <font-awesome-icon
+              class="explanation"
+              :icon="['fas', 'info-circle']"
+              v-tooltip.top-center="'Alternatively you can double click on the file'"
+            />
+          </div>
+        </li>
+        <li>
+          <span>If asked, enter your administrator password</span>
+          <font-awesome-icon
+              class="explanation"
+              :icon="['fas', 'info-circle']"
+              v-tooltip.top-center="
+                  'Press on Enter/Return key after typing your password<br/>' +
+                  'Your password will not be shown by default.<br/>' +
+                  'Administor privileges are required to configure OS.'"
+          />
+        </li>
+      </ol>
+    </p>
+    <p>
+      Or download the <a :href="this.macOsDownloadUrl">offline version</a> to run your scripts
+      directly to skip these steps.
+    </p>
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import Code from './Code.vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { ApplicationFactory } from '@/application/ApplicationFactory';
+import Code from './Code.vue';
 
 @Component({
-    components: {
-        Code,
-    },
+  components: {
+    Code,
+  },
 })
 export default class MacOsInstructions extends Vue {
   @Prop() public fileName: string;
+
   public appName = '';
+
   public macOsDownloadUrl = '';
 
   public async created() {

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

@@ -1,26 +1,26 @@
 <template>
-    <div class="container" v-if="hasCode">
-        <IconButton
-            v-if="this.canRun"
-            text="Run"
-            v-on:click="executeCode"
-            icon-prefix="fas" icon-name="play">
-        </IconButton>
-        <IconButton
-            :text="this.isDesktopVersion ? 'Save' : 'Download'"
-            v-on:click="saveCode"
-            icon-prefix="fas" 
-            :icon-name="this.isDesktopVersion ? 'save' : 'file-download'">
-        </IconButton>
-        <IconButton
-            text="Copy"
-            v-on:click="copyCode"
-            icon-prefix="fas" icon-name="copy">
-        </IconButton>
-        <Dialog v-if="this.isMacOsCollection" ref="instructionsDialog">
-          <MacOsInstructions :fileName="this.fileName" />
-        </Dialog>
-    </div>
+  <div class="container" v-if="hasCode">
+    <IconButton
+      v-if="this.canRun"
+      text="Run"
+      v-on:click="executeCode"
+      icon-prefix="fas" icon-name="play">
+    </IconButton>
+    <IconButton
+      :text="this.isDesktopVersion ? 'Save' : 'Download'"
+      v-on:click="saveCode"
+      icon-prefix="fas"
+      :icon-name="this.isDesktopVersion ? 'save' : 'file-download'">
+    </IconButton>
+    <IconButton
+      text="Copy"
+      v-on:click="copyCode"
+      icon-prefix="fas" icon-name="copy">
+    </IconButton>
+    <Dialog v-if="this.isMacOsCollection" ref="instructionsDialog">
+      <MacOsInstructions :fileName="this.fileName" />
+    </Dialog>
+  </div>
 </template>
 
 <script lang="ts">
@@ -29,8 +29,6 @@ import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
 import { Clipboard } from '@/infrastructure/Clipboard';
 import Dialog from '@/presentation/components/Shared/Dialog.vue';
-import IconButton from './IconButton.vue';
-import MacOsInstructions from './MacOsInstructions.vue';
 import { Environment } from '@/application/Environment/Environment';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
@@ -39,6 +37,8 @@ import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { CodeRunner } from '@/infrastructure/CodeRunner';
 import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
+import MacOsInstructions from './MacOsInstructions.vue';
+import IconButton from './IconButton.vue';
 
 @Component({
   components: {
@@ -49,39 +49,47 @@ import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationC
 })
 export default class TheCodeButtons extends StatefulVue {
   public readonly isDesktopVersion = Environment.CurrentEnvironment.isDesktop;
+
   public canRun = false;
+
   public hasCode = false;
+
   public isMacOsCollection = false;
+
   public fileName = '';
 
   public async copyCode() {
     const code = await this.getCurrentCode();
     Clipboard.copyText(code.current);
   }
+
   public async saveCode() {
     const context = await this.getCurrentContext();
     saveCode(this.fileName, context.state);
     if (this.isMacOsCollection) {
-      (this.$refs.instructionsDialog as any).show();
+      (this.$refs.instructionsDialog as Dialog).show();
     }
   }
+
   public async executeCode() {
     const context = await this.getCurrentContext();
     await executeCode(context);
   }
 
   protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
-    this.canRun = this.isDesktopVersion && newState.collection.os === Environment.CurrentEnvironment.os;
-    this.isMacOsCollection = newState.collection.os === OperatingSystem.macOS;
+    const isNewOs = (test: OperatingSystem) => newState.collection.os === test;
+    this.canRun = this.isDesktopVersion && isNewOs(Environment.CurrentEnvironment.os);
+    this.isMacOsCollection = isNewOs(OperatingSystem.macOS);
     this.fileName = buildFileName(newState.collection.scripting);
     this.react(newState.code);
   }
 
   private async getCurrentCode(): Promise<IApplicationCode> {
     const context = await this.getCurrentContext();
-    const code = context.state.code;
+    const { code } = context.state;
     return code;
   }
+
   private async react(code: IApplicationCode) {
     this.hasCode = code.current && code.current.length > 0;
     this.events.unsubscribeAll();
@@ -118,9 +126,9 @@ function buildFileName(scripting: IScriptingDefinition) {
 async function executeCode(context: IReadOnlyApplicationContext) {
   const runner = new CodeRunner();
   await runner.runCode(
-    /*code*/ context.state.code.current,
-    /*appName*/ context.app.info.name,
-    /*fileExtension*/ context.state.collection.scripting.fileExtension,
+    /* code: */ context.state.code.current,
+    /* appName: */ context.app.info.name,
+    /* fileExtension: */ context.state.collection.scripting.fileExtension,
   );
 }
 
@@ -128,9 +136,9 @@ async function executeCode(context: IReadOnlyApplicationContext) {
 
 <style scoped lang="scss">
 .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 .container > * + * {
   margin-left: 30px;

src/presentation/components/Code/TheCodeArea.vue

@@ -31,6 +31,7 @@ export default class TheCodeArea extends StatefulVue {
   public readonly editorId = 'codeEditor';
 
   private editor!: ace.Ace.Editor;
+
   private currentMarkerId?: number;
 
   @Prop() private theme!: string;
@@ -38,6 +39,7 @@ export default class TheCodeArea extends StatefulVue {
   public destroyed() {
     this.destroyEditor();
   }
+
   public sizeChanged() {
     if (this.editor) {
       this.editor.resize();
@@ -46,9 +48,14 @@ export default class TheCodeArea extends StatefulVue {
 
   protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
     this.destroyEditor();
-    this.editor = initializeEditor(this.theme, this.editorId, newState.collection.scripting.language);
+    this.editor = initializeEditor(
+      this.theme,
+      this.editorId,
+      newState.collection.scripting.language,
+    );
     const appCode = newState.code;
-    this.editor.setValue(appCode.current || getDefaultCode(newState.collection.scripting.language), 1);
+    const innerCode = appCode.current || getDefaultCode(newState.collection.scripting.language);
+    this.editor.setValue(innerCode, 1);
     this.events.unsubscribeAll();
     this.events.register(appCode.changed.on((code) => this.updateCode(code)));
   }
@@ -68,28 +75,34 @@ export default class TheCodeArea extends StatefulVue {
       this.reactToChanges(event, event.changedScripts);
     }
   }
+
   private reactToChanges(event: ICodeChangedEvent, scripts: ReadonlyArray<IScript>) {
-      const positions = scripts
-        .map((script) => event.getScriptPositionInCode(script));
-      const start = Math.min(
-        ...positions.map((position) => position.startLine),
-      );
-      const end = Math.max(
-        ...positions.map((position) => position.endLine),
-      );
-      this.scrollToLine(end + 2);
-      this.highlight(start, end);
+    const positions = scripts
+      .map((script) => event.getScriptPositionInCode(script));
+    const start = Math.min(
+      ...positions.map((position) => position.startLine),
+    );
+    const end = Math.max(
+      ...positions.map((position) => position.endLine),
+    );
+    this.scrollToLine(end + 2);
+    this.highlight(start, end);
   }
+
   private highlight(startRow: number, endRow: number) {
     const AceRange = ace.require('ace/range').Range;
     this.currentMarkerId = this.editor.session.addMarker(
-        new AceRange(startRow, 0, endRow, 0), 'code-area__highlight', 'fullLine',
+      new AceRange(startRow, 0, endRow, 0),
+      'code-area__highlight',
+      'fullLine',
     );
   }
+
   private scrollToLine(row: number) {
     const column = this.editor.session.getLine(row).length;
     this.editor.gotoLine(row, column, true);
   }
+
   private removeCurrentHighlighting() {
     if (!this.currentMarkerId) {
       return;
@@ -97,6 +110,7 @@ export default class TheCodeArea extends StatefulVue {
     this.editor.session.removeMarker(this.currentMarkerId);
     this.currentMarkerId = undefined;
   }
+
   private destroyEditor() {
     if (this.editor) {
       this.editor.destroy();
@@ -105,7 +119,11 @@ export default class TheCodeArea extends StatefulVue {
   }
 }
 
-function initializeEditor(theme: string, editorId: string, language: ScriptingLanguage): ace.Ace.Editor {
+function initializeEditor(
+  theme: string,
+  editorId: string,
+  language: ScriptingLanguage,
+): ace.Ace.Editor {
   theme = theme || 'github';
   const editor = ace.edit(editorId);
   const lang = getLanguage(language);
@@ -120,7 +138,7 @@ function initializeEditor(theme: string, editorId: string, language: ScriptingLa
 
 function getLanguage(language: ScriptingLanguage) {
   switch (language) {
-    case ScriptingLanguage.batchfile:   return 'batchfile';
+    case ScriptingLanguage.batchfile: return 'batchfile';
     case ScriptingLanguage.shellscript: return 'sh';
     default:
       throw new Error('unknown language');

src/presentation/components/Code/ace-importer.ts

@@ -10,8 +10,8 @@ import 'ace-builds/src-noconflict/theme-xcode';
 import 'ace-builds/src-noconflict/mode-batchfile';
 import 'ace-builds/src-noconflict/mode-sh';
 
-ace.config.setModuleUrl('ace/mode/html_worker', new URL('ace-builds/src-noconflict/worker-html.js', import.meta.url).toString())
-ace.config.setModuleUrl('ace/mode/javascript_worker', new URL('ace-builds/src-noconflict/worker-javascript.js', import.meta.url).toString())
-ace.config.setModuleUrl('ace/mode/json_worker', new URL('ace-builds/src-noconflict/worker-json.js', import.meta.url).toString())
+ace.config.setModuleUrl('ace/mode/html_worker', new URL('ace-builds/src-noconflict/worker-html.js', import.meta.url).toString());
+ace.config.setModuleUrl('ace/mode/javascript_worker', new URL('ace-builds/src-noconflict/worker-javascript.js', import.meta.url).toString());
+ace.config.setModuleUrl('ace/mode/json_worker', new URL('ace-builds/src-noconflict/worker-json.js', import.meta.url).toString());
 
 export default ace;