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': {
-        'node': true,
-        'browser': true,
-        'es6': true,
+    env: {
+        node: true,
+        browser: true,
+        es6: true,
     },
-    'parserOptions': {
-        'parser': '@typescript-eslint/parser',
-        'ecmaVersion': 6,
-        'project': './tsconfig.json',
+    parserOptions: {
+        parser: '@typescript-eslint/parser',
+        ecmaVersion: 6,
+        project: './tsconfig.json',
     },
-    'plugins': [
-        '@typescript-eslint',
-        'import',
-    ],
-    'ignorePatterns': ['*.svg', '*.scss'],
-    'extends': [
+    plugins: ['@typescript-eslint', 'import', 'eslint-plugin-header'],
+    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': {
-                'directory': './tsconfig.json'
-            }
+            typescript: {
+                directory: './tsconfig.json',
+            },
         },
     },
 };

cvat-ui/.gitignore

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

cvat-ui/.header-tpl.ts

+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT

cvat-ui/.prettierrc.json

+{
+    "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

 {
     "name": "cvat-ui",
-  "version": "1.9.10",
+    "version": "1.9.11",
     "description": "CVAT single-page application",
     "main": "src/index.tsx",
     "scripts": {
@@ -28,15 +28,20 @@
         "css-loader": "^3.2.0",
         "eslint": "^6.8.0",
         "eslint-config-airbnb-typescript": "^7.0.0",
+        "eslint-config-prettier": "^6.12.0",
         "eslint-import-resolver-typescript": "^2.0.0",
+        "eslint-plugin-header": "^3.1.0",
         "eslint-plugin-import": "^2.18.2",
         "eslint-plugin-jsx-a11y": "^6.2.3",
         "eslint-plugin-react": "^7.17.0",
         "eslint-plugin-react-hooks": "^1.7.0",
         "html-webpack-plugin": "^3.2.0",
+        "husky": "^4.3.0",
+        "lint-staged": "^10.4.0",
         "node-sass": "^4.13.0",
         "postcss-loader": "^3.0.0",
         "postcss-preset-env": "^6.7.0",
+        "prettier": "2.1.2",
         "react-svg-loader": "^3.0.3",
         "sass-loader": "^8.0.0",
         "style-loader": "^1.0.0",
@@ -49,12 +54,12 @@
     },
     "dependencies": {
         "@types/platform": "^1.3.2",
-    "@types/react": "^16.9.49",
+        "@types/react": "^16.9.2",
         "@types/react-color": "^3.0.2",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-redux": "^7.1.9",
-    "@types/react-router": "^5.1.8",
-    "@types/react-router-dom": "^5.1.5",
+        "@types/react-dom": "^16.9.0",
+        "@types/react-redux": "^7.1.2",
+        "@types/react-router": "^5.0.5",
+        "@types/react-router-dom": "^5.1.0",
         "@types/react-share": "^3.0.1",
         "@types/redux-logger": "^3.0.7",
         "antd": "^3.26.17",
@@ -63,14 +68,14 @@
         "cvat-core": "file:../cvat-core",
         "dotenv-webpack": "^1.7.0",
         "error-stack-parser": "^2.0.6",
-    "moment": "^2.28.0",
+        "moment": "^2.24.0",
         "platform": "^1.3.6",
         "prop-types": "^15.7.2",
         "react": "^16.9.0",
         "react-color": "^2.18.1",
         "react-dom": "^16.9.0",
         "react-hotkeys": "^2.0.0",
-    "react-redux": "^7.2.1",
+        "react-redux": "^7.1.1",
         "react-router": "^5.1.0",
         "react-router-dom": "^5.1.0",
         "react-share": "^3.0.1",
@@ -78,5 +83,17 @@
         "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

-import React from 'react';
-import { getApplicationKeyMap } from 'react-hotkeys';
+// Copyright (C) 2020 Intel Corporation
+//
+// 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: {
-            visibleShortcutsHelp: visible,
-        },
+        shortcuts: { 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[] => (
-        data.map((item: string, id: number): JSX.Element => (
+    const splitToRows = (data: string[]): JSX.Element[] =>
+        data.map(
+            (item: string, id: number): JSX.Element => (
                 // eslint-disable-next-line react/no-array-index-key
                 <span key={id}>
                     {item}
                     <br />
                 </span>
-        ))
+            ),
         );
 
-    const columns = [{
+    const columns = [
+        {
             title: 'Name',
             dataIndex: 'name',
             key: 'name',
-    }, {
+        },
+        {
             title: 'Shortcut',
             dataIndex: 'shortcut',
             key: 'shortcut',
             render: splitToRows,
-    }, {
+        },
+        {
             title: 'Action',
             dataIndex: 'action',
             key: 'action',
             render: splitToRows,
-    }, {
+        },
+        {
             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(
-    mapStateToProps,
-    mapDispatchToProps,
-)(ShorcutsDialog);
+export default connect(mapStateToProps, mapDispatchToProps)(ShorcutsDialog);