Eslint-Prettier integration & pre commit hook (#2272)

* Eslint prettier integrations and precommit hook on fly

* CHANGELOG update and package.json version patch

cvat-ui/.eslintrc.js

@@ -3,29 +3,29 @@
 // SPDX-License-Identifier: MIT
 
 module.exports = {
-    'env': {
+    env: {
-        'node': true,
+        node: true,
-        'browser': true,
+        browser: true,
-        'es6': true,
+        es6: true,
     },
-    'parserOptions': {
+    parserOptions: {
-        'parser': '@typescript-eslint/parser',
+        parser: '@typescript-eslint/parser',
-        'ecmaVersion': 6,
+        ecmaVersion: 6,
-        'project': './tsconfig.json',
+        project: './tsconfig.json',
     },
-    'plugins': [
+    plugins: ['@typescript-eslint', 'import', 'eslint-plugin-header'],
-        '@typescript-eslint',
+    ignorePatterns: ['*.svg', '*.scss'],
-        'import',
+    extends: [
-    ],
-    'ignorePatterns': ['*.svg', '*.scss'],
-    'extends': [
         'plugin:@typescript-eslint/recommended',
         'airbnb-typescript',
         'plugin:import/errors',
         'plugin:import/warnings',
         'plugin:import/typescript',
+        'prettier',
+        'prettier/@typescript-eslint',
+        'prettier/react',
     ],
-    'rules': {
+    rules: {
         '@typescript-eslint/indent': ['warn', 4],
         'react/jsx-indent': ['warn', 4],
         'react/jsx-indent-props': ['warn', 4],
@@ -34,16 +34,17 @@ module.exports = {
         'arrow-parens': ['error', 'always'],
         '@typescript-eslint/no-explicit-any': [0],
         '@typescript-eslint/explicit-function-return-type': ['warn', { allowExpressions: true }],
-        'no-restricted-syntax': [0, {'selector': 'ForOfStatement'}],
+        'no-restricted-syntax': [0, { selector: 'ForOfStatement' }],
         'no-plusplus': [0],
         'lines-between-class-members': 0,
         'react/no-did-update-set-state': 0, // https://github.com/airbnb/javascript/issues/1875
+        'header/header': [2, '.header-tpl.ts'],
     },
-    'settings': {
+    settings: {
         'import/resolver': {
-            'typescript': {
+            typescript: {
-                'directory': './tsconfig.json'
+                directory: './tsconfig.json',
-            }
+            },
         },
     },
 };

cvat-ui/.gitignore

@@ -4,4 +4,5 @@
 /dist
 /build
 /yarn.lock
+.eslintcache
 

cvat-ui/.header-tpl.ts

@@ -0,0 +1,3 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT

cvat-ui/.prettierrc.json

@@ -0,0 +1,19 @@
+{
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": true,
+    "printWidth": 120,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "useTabs": false,
+    "vueIndentScriptAndStyle": false
+}

cvat-ui/package.json

@@ -1,82 +1,99 @@
 {
-  "name": "cvat-ui",
+    "name": "cvat-ui",
-  "version": "1.9.10",
+    "version": "1.9.11",
-  "description": "CVAT single-page application",
+    "description": "CVAT single-page application",
-  "main": "src/index.tsx",
+    "main": "src/index.tsx",
-  "scripts": {
+    "scripts": {
-    "build": "webpack --config ./webpack.config.js",
+        "build": "webpack --config ./webpack.config.js",
-    "start": "REACT_APP_API_URL=http://localhost:7000 webpack-dev-server --config ./webpack.config.js --mode=development",
+        "start": "REACT_APP_API_URL=http://localhost:7000 webpack-dev-server --config ./webpack.config.js --mode=development",
-    "type-check": "tsc --noEmit",
+        "type-check": "tsc --noEmit",
-    "type-check:watch": "npm run type-check -- --watch",
+        "type-check:watch": "npm run type-check -- --watch",
-    "lint": "eslint './src/**/*.{ts,tsx}'",
+        "lint": "eslint './src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix"
+        "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix"
-  },
+    },
-  "author": "Intel",
+    "author": "Intel",
-  "license": "MIT",
+    "license": "MIT",
-  "devDependencies": {
+    "devDependencies": {
-    "@babel/core": "^7.6.0",
+        "@babel/core": "^7.6.0",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
+        "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/preset-env": "^7.6.0",
+        "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
+        "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.6.0",
+        "@babel/preset-typescript": "^7.6.0",
-    "@typescript-eslint/eslint-plugin": "^2.19.2",
+        "@typescript-eslint/eslint-plugin": "^2.19.2",
-    "@typescript-eslint/parser": "^2.19.2",
+        "@typescript-eslint/parser": "^2.19.2",
-    "babel-loader": "^8.0.6",
+        "babel-loader": "^8.0.6",
-    "babel-plugin-import": "^1.12.2",
+        "babel-plugin-import": "^1.12.2",
-    "copy-webpack-plugin": "^5.1.2",
+        "copy-webpack-plugin": "^5.1.2",
-    "css-loader": "^3.2.0",
+        "css-loader": "^3.2.0",
-    "eslint": "^6.8.0",
+        "eslint": "^6.8.0",
-    "eslint-config-airbnb-typescript": "^7.0.0",
+        "eslint-config-airbnb-typescript": "^7.0.0",
-    "eslint-import-resolver-typescript": "^2.0.0",
+        "eslint-config-prettier": "^6.12.0",
-    "eslint-plugin-import": "^2.18.2",
+        "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+        "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-react": "^7.17.0",
+        "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-react-hooks": "^1.7.0",
+        "eslint-plugin-jsx-a11y": "^6.2.3",
-    "html-webpack-plugin": "^3.2.0",
+        "eslint-plugin-react": "^7.17.0",
-    "node-sass": "^4.13.0",
+        "eslint-plugin-react-hooks": "^1.7.0",
-    "postcss-loader": "^3.0.0",
+        "html-webpack-plugin": "^3.2.0",
-    "postcss-preset-env": "^6.7.0",
+        "husky": "^4.3.0",
-    "react-svg-loader": "^3.0.3",
+        "lint-staged": "^10.4.0",
-    "sass-loader": "^8.0.0",
+        "node-sass": "^4.13.0",
-    "style-loader": "^1.0.0",
+        "postcss-loader": "^3.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
+        "postcss-preset-env": "^6.7.0",
-    "typescript": "^3.7.3",
+        "prettier": "2.1.2",
-    "webpack": "^4.44.2",
+        "react-svg-loader": "^3.0.3",
-    "webpack-cli": "^3.3.8",
+        "sass-loader": "^8.0.0",
-    "webpack-dev-server": "^3.8.0",
+        "style-loader": "^1.0.0",
-    "worker-loader": "^2.0.0"
+        "tsconfig-paths-webpack-plugin": "^3.2.0",
-  },
+        "typescript": "^3.7.3",
-  "dependencies": {
+        "webpack": "^4.44.2",
-    "@types/platform": "^1.3.2",
+        "webpack-cli": "^3.3.8",
-    "@types/react": "^16.9.49",
+        "webpack-dev-server": "^3.8.0",
-    "@types/react-color": "^3.0.2",
+        "worker-loader": "^2.0.0"
-    "@types/react-dom": "^16.9.8",
+    },
-    "@types/react-redux": "^7.1.9",
+    "dependencies": {
-    "@types/react-router": "^5.1.8",
+        "@types/platform": "^1.3.2",
-    "@types/react-router-dom": "^5.1.5",
+        "@types/react": "^16.9.2",
-    "@types/react-share": "^3.0.1",
+        "@types/react-color": "^3.0.2",
-    "@types/redux-logger": "^3.0.7",
+        "@types/react-dom": "^16.9.0",
-    "antd": "^3.26.17",
+        "@types/react-redux": "^7.1.2",
-    "copy-to-clipboard": "^3.2.0",
+        "@types/react-router": "^5.0.5",
-    "cvat-canvas": "file:../cvat-canvas",
+        "@types/react-router-dom": "^5.1.0",
-    "cvat-core": "file:../cvat-core",
+        "@types/react-share": "^3.0.1",
-    "dotenv-webpack": "^1.7.0",
+        "@types/redux-logger": "^3.0.7",
-    "error-stack-parser": "^2.0.6",
+        "antd": "^3.26.17",
-    "moment": "^2.28.0",
+        "copy-to-clipboard": "^3.2.0",
-    "platform": "^1.3.6",
+        "cvat-canvas": "file:../cvat-canvas",
-    "prop-types": "^15.7.2",
+        "cvat-core": "file:../cvat-core",
-    "react": "^16.9.0",
+        "dotenv-webpack": "^1.7.0",
-    "react-color": "^2.18.1",
+        "error-stack-parser": "^2.0.6",
-    "react-dom": "^16.9.0",
+        "moment": "^2.24.0",
-    "react-hotkeys": "^2.0.0",
+        "platform": "^1.3.6",
-    "react-redux": "^7.2.1",
+        "prop-types": "^15.7.2",
-    "react-router": "^5.1.0",
+        "react": "^16.9.0",
-    "react-router-dom": "^5.1.0",
+        "react-color": "^2.18.1",
-    "react-share": "^3.0.1",
+        "react-dom": "^16.9.0",
-    "redux": "^4.0.4",
+        "react-hotkeys": "^2.0.0",
-    "redux-devtools-extension": "^2.13.8",
+        "react-redux": "^7.1.1",
-    "redux-logger": "^3.0.6",
+        "react-router": "^5.1.0",
-    "redux-thunk": "^2.3.0"
+        "react-router-dom": "^5.1.0",
-  }
+        "react-share": "^3.0.1",
+        "redux": "^4.0.4",
+        "redux-devtools-extension": "^2.13.8",
+        "redux-logger": "^3.0.6",
+        "redux-thunk": "^2.3.0"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "lint-staged": {
+        "*.{html,css,scss,json,md}": "prettier --write",
+        "*.{js,ts,tsx}": [
+            "eslint --fix",
+            "prettier --write"
+        ]
+    }
 }

cvat-ui/src/components/shortcuts-dialog/shortcuts-dialog.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
+// Copyright (C) 2020 Intel Corporation
-import { getApplicationKeyMap } from 'react-hotkeys';
+//
+// SPDX-License-Identifier: MIT
+
+import { shortcutsActions } from 'actions/shortcuts-actions';
 import Modal from 'antd/lib/modal';
 import Table from 'antd/lib/table';
+import React from 'react';
+import { getApplicationKeyMap } from 'react-hotkeys';
 import { connect } from 'react-redux';
-
-import { shortcutsActions } from 'actions/shortcuts-actions';
 import { CombinedState } from 'reducers/interfaces';
 
 interface StateToProps {
@@ -17,9 +20,7 @@ interface DispatchToProps {
 
 function mapStateToProps(state: CombinedState): StateToProps {
     const {
-        shortcuts: {
+        shortcuts: { visibleShortcutsHelp: visible },
-            visibleShortcutsHelp: visible,
-        },
     } = state;
 
     return {
@@ -39,35 +40,41 @@ function ShorcutsDialog(props: StateToProps & DispatchToProps): JSX.Element | nu
     const { visible, switchShortcutsDialog } = props;
     const keyMap = getApplicationKeyMap();
 
-    const splitToRows = (data: string[]): JSX.Element[] => (
+    const splitToRows = (data: string[]): JSX.Element[] =>
-        data.map((item: string, id: number): JSX.Element => (
+        data.map(
-            // eslint-disable-next-line react/no-array-index-key
+            (item: string, id: number): JSX.Element => (
-            <span key={id}>
+                // eslint-disable-next-line react/no-array-index-key
-                {item}
+                <span key={id}>
-                <br />
+                    {item}
-            </span>
+                    <br />
-        ))
+                </span>
-    );
+            ),
+        );
 
-    const columns = [{
+    const columns = [
-        title: 'Name',
+        {
-        dataIndex: 'name',
+            title: 'Name',
-        key: 'name',
+            dataIndex: 'name',
-    }, {
+            key: 'name',
-        title: 'Shortcut',
+        },
-        dataIndex: 'shortcut',
+        {
-        key: 'shortcut',
+            title: 'Shortcut',
-        render: splitToRows,
+            dataIndex: 'shortcut',
-    }, {
+            key: 'shortcut',
-        title: 'Action',
+            render: splitToRows,
-        dataIndex: 'action',
+        },
-        key: 'action',
+        {
-        render: splitToRows,
+            title: 'Action',
-    }, {
+            dataIndex: 'action',
-        title: 'Description',
+            key: 'action',
-        dataIndex: 'description',
+            render: splitToRows,
-        key: 'description',
+        },
-    }];
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+        },
+    ];
 
     const dataSource = Object.keys(keyMap).map((key: string, id: number) => ({
         key: id,
@@ -92,7 +99,4 @@ function ShorcutsDialog(props: StateToProps & DispatchToProps): JSX.Element | nu
     );
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(ShorcutsDialog);
-    mapStateToProps,
-    mapDispatchToProps,
-)(ShorcutsDialog);