Configured codacy && eslint instead of tslint (#631)

* Codacy setup for cvat-canvas, eslint instead of tslint

* Added vscode config

* Added codacy config

* Added eslint config

* Changed config

* Changed codacy

* Return root eslint file

* Disable tslint manually

* Remove custom disable

* Reset codacy config

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "python.pythonPath": ".env/bin/python",
+    "eslint.enable": true,
+    "eslint.validate": [
+        "javascript",
+        "typescript"
+    ],
+    "eslint.workingDirectories": [
+        {
+            "directory":  "./cvat-core",
+            "changeProcessCWD": true
+        },
+        {
+            "directory":  "./cvat-canvas",
+            "changeProcessCWD": true
+        },
+        {
+            "directory":  ".",
+            "changeProcessCWD": true
+        }
+    ]
+}

cvat-canvas/.eslintrc.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2019 Intel Corporation
+ * SPDX-License-Identifier: MIT
+*/
+
+module.exports = {
+    'env': {
+        'node': true,
+        'browser': true,
+        'es6': true,
+    },
+    'parserOptions': {
+        'parser': '@typescript-eslint/parser',
+        'ecmaVersion': 6,
+    },
+    'plugins': [
+        '@typescript-eslint',
+        'import',
+    ],
+    'extends': [
+        'plugin:@typescript-eslint/recommended',
+        'airbnb-typescript/base',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:import/typescript',
+    ],
+    'rules': {
+        '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/indent': ['warn', 4],
+        'no-plusplus': 0,
+        'no-restricted-syntax': [
+            0,
+            {
+                'selector': 'ForOfStatement'
+            }
+        ],
+        'no-continue': 0,
+        'func-names': 0,
+        'no-console': 0, // this rule deprecates console.log, console.warn etc. because 'it is not good in production code'
+        'lines-between-class-members': 0,
+        'import/prefer-default-export': 0, // works incorrect with interfaces
+    },
+    'settings': {
+        'import/resolver': {
+            'node': {
+                'extensions': ['.ts', '.js', '.json'],
+            },
+        },
+    },
+};

cvat-canvas/package.json

@@ -24,9 +24,11 @@
     "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.13.0",
     "babel-loader": "^8.0.6",
+    "eslint": "^6.1.0",
+    "eslint-config-airbnb-typescript": "^4.0.1",
+    "eslint-config-typescript-recommended": "^1.4.17",
+    "eslint-plugin-import": "^2.18.2",
     "nodemon": "^1.19.1",
-    "tslint": "^5.18.0",
-    "tslint-config-airbnb": "^5.11.1",
     "typescript": "^3.5.3",
     "webpack": "^4.36.1",
     "webpack-cli": "^3.3.6",

cvat-canvas/src/canvas.ts

@@ -64,7 +64,7 @@ class CanvasImpl implements Canvas {
     }
 
     public draw(enabled: boolean = false, shapeType: string = '',
-                numberOfPoints: number = 0, initialState: any = null): any {
+        numberOfPoints: number = 0, initialState: any = null): any {
         return this.model.draw(enabled, shapeType, numberOfPoints, initialState);
     }
 

cvat-canvas/src/canvasModel.ts

@@ -3,6 +3,9 @@
 * SPDX-License-Identifier: MIT
 */
 
+// Disable till full implementation
+/* eslint class-methods-use-this: "off" */
+
 import { MasterImpl } from './master';
 
 export interface Size {
@@ -202,7 +205,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public draw(enabled: boolean, shapeType: string,
-                numberOfPoints: number, initialState: any): any {
+        numberOfPoints: number, initialState: any): any {
         return {
             enabled,
             initialState,

cvat-canvas/src/canvasView.ts

@@ -3,6 +3,9 @@
 * SPDX-License-Identifier: MIT
 */
 
+// Disable till full implementation
+/* eslint class-methods-use-this: "off" */
+
 import * as SVG from 'svg.js';
 
 // tslint:disable-next-line: ordered-imports
@@ -32,7 +35,7 @@ function translateToSVG(svg: SVGSVGElement, points: number[]): number[] {
     return output;
 }
 
-function darker(color: string, percentage: number) {
+function darker(color: string, percentage: number): string {
     const R = Math.round(parseInt(color.slice(1, 3), 16) * (1 - percentage / 100));
     const G = Math.round(parseInt(color.slice(3, 5), 16) * (1 - percentage / 100));
     const B = Math.round(parseInt(color.slice(5, 7), 16) * (1 - percentage / 100));
@@ -283,7 +286,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         return this.canvas;
     }
 
-    private addObjects(ctm: SVGMatrix, objects: any[], geometry: Geometry) {
+    private addObjects(ctm: SVGMatrix, objects: any[], geometry: Geometry): void {
         for (const object of objects) {
             if (object.objectType === 'tag') {
                 this.addTag(object, geometry);
@@ -309,8 +312,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                             }
 
                             return `${acc}${val},`;
-                        },
+                        }, '',
-                        '' ,
                     );
 
                     if (object.shapeType === 'polygon') {
@@ -329,12 +331,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.activate(geometry);
     }
 
-    private activate(geometry: Geometry) {
+    private activate(geometry: Geometry): void {
         for (const shape of this.svgShapes) {
             const self = this;
-            (shape as any).draggable().on('dragstart', () => {
+            (shape as any).draggable().on('dragstart', (): void => {
                 console.log('hello');
-            }).on('dragend', () => {
+            }).on('dragend', (): void => {
                 console.log('hello');
             });
 
@@ -352,7 +354,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                             'stroke-width': self.BASE_STROKE_WIDTH / (3 * geometry.scale),
                         });
 
-                    circle.node.addEventListener('mouseenter', () => {
+                    circle.node.addEventListener('mouseenter', (): void => {
                         circle.attr({
                             'stroke-width': circle.attr('stroke-width') * 2,
                         });
@@ -360,7 +362,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         circle.addClass('cvat_canvas_selected_point');
                     });
 
-                    circle.node.addEventListener('mouseleave', () => {
+                    circle.node.addEventListener('mouseleave', (): void => {
                         circle.attr({
                             'stroke-width': circle.attr('stroke-width') / 2,
                         });
@@ -382,54 +384,55 @@ export class CanvasViewImpl implements CanvasView, Listener {
         const [xtl, ytl, xbr, ybr] = points;
 
         return this.adoptedContent.rect().size(xbr - xtl, ybr - ytl).attr({
-            client_id: state.clientID,
+            clientID: state.clientID,
             'color-rendering': 'optimizeQuality',
             fill: state.color,
             'shape-rendering': 'geometricprecision',
             stroke: darker(state.color, 50),
             'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale,
-            z_order: state.zOrder,
+            zOrder: state.zOrder,
-        }).move(xtl, ytl).addClass('cvat_canvas_shape');
+        }).move(xtl, ytl)
+            .addClass('cvat_canvas_shape');
     }
 
     private addPolygon(points: string, state: any, geometry: Geometry): SVG.Polygon {
         return this.adoptedContent.polygon(points).attr({
-            client_id: state.clientID,
+            clientID: state.clientID,
             'color-rendering': 'optimizeQuality',
             fill: state.color,
             'shape-rendering': 'geometricprecision',
             stroke: darker(state.color, 50),
             'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale,
-            z_order: state.zOrder,
+            zOrder: state.zOrder,
         }).addClass('cvat_canvas_shape');
     }
 
     private addPolyline(points: string, state: any, geometry: Geometry): SVG.PolyLine {
         return this.adoptedContent.polyline(points).attr({
-            client_id: state.clientID,
+            clientID: state.clientID,
             'color-rendering': 'optimizeQuality',
             fill: state.color,
             'shape-rendering': 'geometricprecision',
             stroke: darker(state.color, 50),
             'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale,
-            z_order: state.zOrder,
+            zOrder: state.zOrder,
         }).addClass('cvat_canvas_shape');
     }
 
     private addPoints(points: string, state: any, geometry: Geometry): SVG.Polygon {
         return this.adoptedContent.polygon(points).attr({
-            client_id: state.clientID,
+            clientID: state.clientID,
             'color-rendering': 'optimizeQuality',
             fill: state.color,
             opacity: 0,
             'shape-rendering': 'geometricprecision',
             stroke: darker(state.color, 50),
             'stroke-width': this.BASE_STROKE_WIDTH / geometry.scale,
-            z_order: state.zOrder,
+            zOrder: state.zOrder,
         }).addClass('cvat_canvas_shape');
     }
 
     private addTag(state: any, geometry: Geometry): void {
-        // TODO:
+        console.log(state, geometry);
     }
 }

cvat-canvas/tslint.config.js

@@ -1,34 +0,0 @@
-/*
-* Copyright (C) 2019 Intel Corporation
-* SPDX-License-Identifier: MIT
-*/
-
-/* eslint-disable */
-
-module.exports = {
-    defaultSeverity: 'error',
-    extends: [
-        'tslint:recommended',
-        'tslint-config-airbnb'
-    ],
-    jsRules: {},
-    rulesDirectory: [],
-    rules: {
-        'ter-indent': ['warn', 4],
-        // TypeScript guildline prevents interfaces names started with I
-        // https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#names
-        'interface-name': false,
-        'no-console': false,
-        // Arrow functions doesn't use closure context, but sometimes we need it
-        // At the same time typescript non-arrow functions are forbidden in TS
-        // So, we forced to disable this rule
-        'no-this-assignment': false,
-        // Just a strange rule
-        'no-shadowed-variable': false,
-        // Don't prevent ++ and -- operations (the same like in eslint)
-        'no-increment-decrement': false,
-    },
-    linterOptions: {
-        include: ['src/*.ts']
-    }
-}