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,