Fixed eslint

Author: akoidan

.eslintrc.json

@@ -35,7 +35,7 @@
     "multiline-ternary": 0,
     "new-cap": 0, // babel/new-cap
     "array-element-newline": [1, "consistent"],
-    "comma-dangle": [1, "always-multiline"],
+    "comma-dangle": 0, // using typescript-eslint/comma-dangle
     "function-call-argument-newline": [1, "consistent"],
     "max-len": [1, { "code": 120, "ignorePattern": "http?s:\/\/", "ignoreTrailingComments": true}], // override 80 that is too low
     "padded-blocks": [1, "never"],
@@ -68,13 +68,23 @@
         "enforceConst": true
       }
     ],
+    "@typescript-eslint/comma-dangle": [1, "always-multiline"],
+    "@typescript-eslint/method-signature-style": [1, "method"],
+    "@typescript-eslint/init-declarations": 0, // let a ; try {a = funct()} catch (e) throw e; if a.sdfsd . In this example we can't have instant init
+    "@typescript-eslint/prefer-readonly-parameter-types": 0, // too many issues, we can't mofidy arguments, we can' use type like number[], because rule @typescript-eslint/array-type
+    "@typescript-eslint/naming-convention": [1,
+      {
+        "selector": "property",
+        "format": ["PascalCase", "camelCase"] // PascalCase for Vue-property-decorator components: {AppAlert}
+      }
+    ],
     "babel/object-curly-spacing": 1,
     "babel/quotes": 1,
     "babel/semi": 1,
     "babel/no-unused-expressions": 1,
     "babel/valid-typeof": 1,
     "babel/new-cap": 1,
-    "babel/camelcase": 1,
+    "babel/camelcase": 0, // use typescript-eslint/naming-convention
     "babel/no-invalid-this": 1,
     "import/no-named-as-default": 1, //is not part of default sert
     "import/no-unresolved": 0,
@@ -154,21 +164,22 @@
     ],
     "vuetify/grid-unknown-attributes": 1,
     "vuetify/no-legacy-grid": 0,
-    "vuetify/no-deprecated-classes": 1
+    "vuetify/no-deprecated-classes": 1,
+    "class-methods-use-this": 0,
+    "@typescript-eslint/no-unnecessary-condition": 0 // too many times we want to make sure that variable that is not null is present or not. Let's say window.RTPConnection is declaread as non-nullable but we still check it in runtime
   },
   "overrides": [
     {
       "files": ["*.vue", "*.d.ts"],
       "rules": {
-        "import/no-default-export": 0,
-        "class-methods-use-this": 0
+        "import/no-default-export": 0
+
       }
     },
     {
       "files": ["*.vue"],
       "rules": {
         "@typescript-eslint/prefer-readonly": 0, // can be used in template
-        "class-methods-use-this": 0,
         "import/unambiguous": 0 // vue SFC can miss script tags
       }
     }

cypress/integration/index.ts

@@ -1,4 +1,4 @@
-declare namespace Cypress {
+declare namespace Cypress { // eslint-disable-line @typescript-eslint/no-unused-vars
   interface cy {
 
     /**

cypress/integration/pages/branches.ts

@@ -28,7 +28,7 @@ describe("Branches page", (): void => {
     cy.visit("/branches");
     cy.get("[data-cy=hamburger-icon]").click();
     cy.contains("Home").click();
-    cy.url().should("eq", `${Cypress.config().baseUrl}/`);
+    cy.url().should("eq", `${String(Cypress.config().baseUrl)}/`);
     cy.get("[data-cy=hamburger-icon]").click();
     cy.contains("Branches").click();
     cy.assertCalledTimes("get-branches", 1);

cypress/integration/unit/xhr.ts

@@ -97,7 +97,8 @@ describe("Xhr", (): void => {
           url: "/test",
         });
         cy.get("@test-get").should((req: JQuery) => {
-          // @ts-ignore next-line
+          // @ts-expect-error
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           expect(req.request.headers).to.include({"app-version": "app-v1"});
         });
       });
@@ -120,7 +121,8 @@ describe("Xhr", (): void => {
         url: "/test",
       });
       cy.get("@test-get").should((req: JQuery) => {
-        // @ts-ignore next-line
+        // @ts-expect-error
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         expect(req.request.body).to.be.deep.eq({aa: 1});
       });
     });

src/components/App.vue

@@ -15,17 +15,17 @@
 <script lang="ts">
 import {AlertsState, alertsModule} from "@/store/modules/alerts";
 import {Component, Vue} from "vue-property-decorator";
-import {AlertModel} from "@/types/model";
+import type {AlertModel} from "@/types/model";
 import AppAlert from "@/components/ui/AppAlert.vue";
 
 @Component({
   components: {AppAlert},
 })
 export default class App extends Vue {
   @AlertsState
-  public alerts!: AlertModel[];
+  public readonly alerts!: AlertModel[];
 
-  private close(alert: AlertModel): void {
+  private close(alert: Readonly<AlertModel>): void {
     alertsModule.removeAlert(alert);
   }
 }

src/components/pages/RepoBranchesPage.vue

@@ -26,9 +26,9 @@
 <script lang="ts">
 import {Component, Vue} from "vue-property-decorator";
 import {GithubState, githubModule} from "@/store/modules/github";
-import {Branch} from "@/types/model";
-import ResourceLoader from "@/components/ui/ResourceLoader.vue";
+import type {Branch} from "@/types/model";
 import {ResolveHandler} from "@/utils/decorators";
+import ResourceLoader from "@/components/ui/ResourceLoader.vue";
 
 /**
  * Represent list of github repositories

src/components/pages/RepoCommitPage.vue

@@ -25,9 +25,10 @@
 
 <script lang="ts">
 import {Component, Prop, Vue} from "vue-property-decorator";
-import {CommitResponse} from "@/types/gitCommit";
-import ResourceLoader from "@/components/ui/ResourceLoader.vue";
+import type {CommitResponse} from "@/types/gitCommit";
 import {ResolveHandler} from "@/utils/decorators";
+import ResourceLoader from "@/components/ui/ResourceLoader.vue";
+
 @Component({
   components: {ResourceLoader},
 })

src/components/ui/AppAlert.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import {Component, Emit, Prop, Vue} from "vue-property-decorator";
-import {AlertModel} from "@/types/model";
+import type {AlertModel} from "@/types/model";
 
 @Component
 export default class AppAlert extends Vue {

src/components/ui/ResourceLoader.vue

@@ -13,7 +13,7 @@
 </template>
 <script lang="ts">
 import {Component, Prop, Vue} from "vue-property-decorator";
-import {AlertModel} from "@/types/model";
+import type {AlertModel} from "@/types/model";
 import AppAlert from "@/components/ui/AppAlert.vue";
 import {HandleLoading} from "vuex-module-decorators-state";
 
@@ -49,21 +49,21 @@ import {HandleLoading} from "vuex-module-decorators-state";
   components: {AppAlert},
 })
 export default class ResourceLoader extends Vue {
-  public serverError: AlertModel|null = null;
-
-  public loading: boolean = false;
-
   @Prop({
     default: "Loading",
   })
   public readonly loadingTitle!: string;
 
+  public serverError: AlertModel|null = null;
+
+  public loading: boolean = false;
+
   @HandleLoading({
     errPropNameOrCB: "serverError",
     loadingPropName: "loading",
   })
   private async created(): Promise<void> {
-    await new Promise((resolve: Function, reject: Function) => {
+    await new Promise((resolve: () => void, reject: () => void) => {
       this.$emit("load", {
         reject,
         resolve,

src/components/ui/SubmitForm.vue

@@ -21,9 +21,8 @@
 </template>
 <script lang="ts">
 import {Component, Emit, Prop, Ref, Vue} from "vue-property-decorator";
-import {AlertModel} from "@/types/model";
+import type {AlertModel} from "@/types/model";
 import AppAlert from "@/components/ui/AppAlert.vue";
-import {ResolveHandler} from "@/utils/decorators";
 import {HandleLoading} from "vuex-module-decorators-state";
 
 /**
@@ -59,12 +58,6 @@ import {HandleLoading} from "vuex-module-decorators-state";
   components: {AppAlert},
 })
 export default class SubmitForm extends Vue {
-  public serverError: AlertModel|null = null;
-
-  public loading: boolean = false;
-
-  public valid: boolean = false;
-
   @Prop()
   public readonly value!: boolean;
 
@@ -74,6 +67,12 @@ export default class SubmitForm extends Vue {
   @Ref()
   private readonly form!: HTMLFormElement;
 
+  public serverError: AlertModel|null = null;
+
+  public loading: boolean = false;
+
+  public valid: boolean = false;
+
   @Emit()
   public input(valid: boolean): boolean {
     this.valid = valid;
@@ -84,12 +83,13 @@ export default class SubmitForm extends Vue {
     errPropNameOrCB: "serverError",
     loadingPropName: "loading",
   })
-  private async handleClick(event: Event): Promise<void> {
+  private async handleClick(event: Readonly<Event>): Promise<void> {
     event.preventDefault();
-    if (!this.form.validate()) {
+    // TODO eslint rule
+    if (!this.form.validate()) { // eslint-disable-line @typescript-eslint/no-unsafe-call
       return;
     }
-    await new Promise((resolve: Function, reject: Function) => {
+    await new Promise((resolve: () => void, reject: () => void) => {
       this.$emit("submit", {
         reject,
         resolve,

src/main.ts

@@ -2,15 +2,17 @@
 import "@/assets/sass/globals.sass";
 import "@/utils/classComponentHooks"; // eslint-disable-line import/no-unassigned-import
 import "@/utils/mixins"; // eslint-disable-line import/no-unassigned-import
+import type {CreateElement, VNode} from "vue";
 import {api, xhr} from "@/utils/singletons";
 import {ApiConsts} from "@/utils/consts"; // eslint-disable-line import/no-namespace
 import App from "@/components/App.vue";
-import Vue from "vue";
+// TODO https://github.com/typescript-eslint/typescript-eslint/issues/2315
+import Vue from "vue"; // eslint-disable-line no-duplicate-imports
 import {router} from "@/utils/router";
 import {store} from "@/store/store";
 import {vuetify} from "@/utils/vuetify"; // eslint-disable-line import/max-dependencies
 
-Vue.prototype.$api = api;
+Vue.prototype.$api = api; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
 
 window.consts = ApiConsts;
 window.router = router;
@@ -19,7 +21,7 @@ window.api = api;
 window.xhr = xhr;
 
 const vue: Vue = new Vue({
-  render: (createElement: Function): typeof Vue.prototype.$createElement => createElement(App),
+  render: (createElement: CreateElement): VNode => createElement(App),
   router,
   store,
   vuetify,

src/store/modules/alerts.ts

@@ -1,8 +1,8 @@
 import {Action, Module, Mutation, VuexModule, getModule} from "vuex-module-decorators";
-import {AlertModel, AlertType} from "@/types/model";
+import type {AlertModel, AlertType} from "@/types/model";
 import {getUniqueId, sleep} from "@/utils/helpers";
 import {ApiConsts} from "@/utils/consts";
-import {IAlertsState} from "@/types/store";
+import type {IAlertsState} from "@/types/store";
 import {stateDecoratorFactory} from "vuex-module-decorators-state";
 import {store} from "@/store/store";
 
@@ -19,18 +19,18 @@ class AlertsModule extends VuexModule implements IAlertsState {
   public alerts: AlertModel[] = [];
 
   @Mutation
-  public addAlert(growlModel: AlertModel): void {
+  public addAlert(growlModel: Readonly<AlertModel>): void {
     this.alerts.push(growlModel);
   }
 
   @Mutation
-  public removeAlert(growlModel: AlertModel): void {
+  public removeAlert(growlModel: Readonly<AlertModel>): void {
     const index = this.alerts.indexOf(growlModel, 0);
     this.alerts.splice(index, 1);
   }
 
   @Action({rawError: true})
-  public async showAlert({text, type}: { text: string; type: AlertType}): Promise<void> {
+  public async showAlert({text, type}: {readonly text: string; type: Readonly<AlertType>}): Promise<void> {
     const alert: AlertModel = {
       id: getUniqueId(),
       text,

src/store/modules/github.ts

@@ -1,6 +1,6 @@
 import {Module, Mutation, VuexModule, getModule} from "vuex-module-decorators";
-import {Branch} from "@/types/model";
-import {IGithubState} from "@/types/store";
+import type {Branch} from "@/types/model";
+import type {IGithubState} from "@/types/store";
 import {stateDecoratorFactory} from "vuex-module-decorators-state";
 import {store} from "@/store/store";
 

src/store/store.ts

@@ -1,5 +1,5 @@
 import Vuex, {Store} from "vuex";
-import {IRootState} from "@/types/store";
+import type {IRootState} from "@/types/store";
 import Vue from "vue";
 
 Vue.use(Vuex);

src/types/gitCommit.ts

@@ -1,4 +1,4 @@
-/* eslint babel/camelcase: 0 */
+/* eslint @typescript-eslint/naming-convention: 0 */
 
 interface Author {
   name: string;

src/types/global.d.ts

@@ -1,11 +1,11 @@
-import {Api} from "@/utils/api";
-import {Consts} from "@/types/model";
-import {IRootState} from "@/types/store";
-import {Logger} from "lines-logger";
-import {Store} from "vuex";
-import Vue from "vue";
-import VueRouter from "vue-router";
-import {Xhr} from "@/utils/xhr";
+import type {Api} from "@/utils/api";
+import type {Consts} from "@/types/model";
+import type {IRootState} from "@/types/store";
+import type {Logger} from "lines-logger";
+import type {Store} from "vuex";
+import type Vue from "vue";
+import type VueRouter from "vue-router";
+import type {Xhr} from "@/utils/xhr";
 
 declare module "vue/types/vue" {
 

src/types/model.ts

@@ -16,14 +16,17 @@ interface AlertModel {
 }
 
 interface Consts {
+  /* eslint-disable @typescript-eslint/naming-convention */
   IS_DEBUG: boolean;
   APP_VERSION?: string;
   API_URL: string;
   HELP_URL: string;
   ROUTER_HISTORY_MODE: "hash" | "history";
   DISPLAY_ALERTS_MS: number;
   MAX_ERROR_NUMBER: number;
+  /* eslint-enable @typescript-eslint/naming-convention */
 }
+
 interface RequestOptions<T> {
   url: string;
   method: "GET" | "POST";

src/types/store.ts

@@ -1,4 +1,4 @@
-import {AlertModel, Branch} from "@/types/model";
+import type {AlertModel, Branch} from "@/types/model";
 
 interface IGithubState {
   branches: Branch[]|null;

src/utils/api.ts

@@ -1,7 +1,7 @@
-import {Branch} from "@/types/model";
-import {CommitResponse} from "@/types/gitCommit";
-import {Logger} from "lines-logger";
-import {Xhr} from "@/utils/xhr";
+import type {Branch} from "@/types/model";
+import type {CommitResponse} from "@/types/gitCommit";
+import type {Logger} from "lines-logger";
+import type {Xhr} from "@/utils/xhr";
 
 
 export class Api {