husky

hippo4j-ui-new/.eslintignore

@@ -0,0 +1,5 @@
+/.git
+/.vscode
+node_modules
+build
+public

hippo4j-ui-new/.eslintrc.js

@@ -1,31 +1,29 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true,
+    es2021: true,
     node: true,
   },
-  extends: ["airbnb", "prettier"],
+  root: true,
-  parser: "babel-eslint",
+  extends: ['eslint:recommended', 'react-app', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended'],
+  overrides: [],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },
   },
-  plugins: ["react"],
+  plugins: ['react', '@typescript-eslint'],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    eqeqeq: 2,
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-alert': 2,
-    "react/prefer-stateless-function": 0, // 关闭react默认的props-type验证
+    'no-undef': 2,
-    "react/prop-types": [0],
+    'no-use-before-define': 2,
-    "react/jsx-closing-bracket-location": "off",
+    'react-hooks/exhaustive-deps': 2,
-    "consistent-return": "off",
+    '@typescript-eslint/no-explicit-any': 0,
-    // 关闭使用解构赋值的检测
+    '@typescript-eslint/no-non-null-assertion': 0,
-    "react/destructuring-assignment": [0, "always"],
+    '@typescript-eslint/no-var-requires': 0,
-    // 解决require报错问题
-    "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
-    "react/jsx-wrap-multilines": "off",
-    "global-require": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
   },
 };

hippo4j-ui-new/.husky

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "pre-commit";
+npx lint-staged;

hippo4j-ui-new/.prettierignore

@@ -0,0 +1,4 @@
+ /.git
+/.vscode
+node_modules
+build

hippo4j-ui-new/.prettierrc.js

@@ -1,39 +1,33 @@
-module.exports = {
+module.exports = {
-    // 使能每一种语言默认格式化规则
+  // 1.一行代码的最大字符数，默认是80(printWidth: <int>)
-    '[html]': {
+  printWidth: 120,
-      'editor.defaultFormatter': 'esbenp.prettier-vscode'
+  // 2.tab宽度为2空格(tabWidth: <int>)
-    },
+  tabWidth: 2,
-    '[css]': {
+  // 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)
-      'editor.defaultFormatter': 'esbenp.prettier-vscode'
+  useTabs: false,
-    },
+  // 4.结尾是否添加分号，false的情况下只会在一些导致ASI错误的其工况下在开头加分号，我选择无分号结尾的风格(semi: <bool>)
-    '[less]': {
+  semi: true,
-      'editor.defaultFormatter': 'esbenp.prettier-vscode'
+  // 5.使用单引号(singleQuote: <bool>)
-    },
+  singleQuote: true,
-    '[javascript]': {
+  // 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
-      'editor.defaultFormatter': 'esbenp.prettier-vscode'
+  quoteProps: 'as-needed',
-    },
+  // 7.在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）
-    printWidth: 120,
+  jsxSingleQuote: false,
-    trailingComma: 'none',
+  // 8.尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）
-    jsxBracketSameLine: true,
+  trailingComma: 'es5',
-    /*  prettier的配置 */
+  // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
-    printWidth: 100, // 超过最大值换行
+  bracketSpacing: true,
-    tabWidth: 2, // 缩进字节数
+  // 10.jsx标签多行属性写法时，尖括号是否另起一行(jsxBracketSameLine: <bool>)
-    useTabs: false, // 缩进不使用tab，使用空格
+  jsxBracketSameLine: false,
-    semi: true, // 句尾添加分号
+  // 11.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
-    singleQuote: true, // 使用单引号代替双引号
+  arrowParens: 'avoid',
-    proseWrap: 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+  // 12.range是format执行的范围，可以选执行一个文件的一部分，默认的设置是整个文件（rangeStart: <int>  rangeEnd: <int>）
-    arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
+  rangeStart: 0,
-    bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+  rangeEnd: Infinity,
-    //'prettier.disableLanguages': ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
+  // 18. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
-    endOfLine: 'auto', // 结尾是 \n \r \n\r auto
+  vueIndentScriptAndStyle: false,
-    // eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
+  // 19.    endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
-    'prettier.htmlWhitespaceSensitivity': 'ignore',
+  endOfLine: 'auto',
-    'prettier.ignorePath': '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
+  // 20.embeddedLanguageFormatting: "off",默认是auto,控制被引号包裹的代码是否进行格式化
-    jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
+  embeddedLanguageFormatting: 'off',
-    jsxSingleQuote: false // 在jsx中使用单引号代替双引号
+};
-    //parser: 'babylon', // 格式化的解析器，默认是babylon
-    //requireConfig: false, // Require a 'prettierconfig' to format prettier
-    //stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
-    //trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
-    //tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验
-  };

hippo4j-ui-new/package-lock.json

@@ -23,6 +23,8 @@
       },
       "devDependencies": {
         "@craco/craco": "^7.1.0",
+        "@typescript-eslint/eslint-plugin": "^5.59.2",
+        "@typescript-eslint/parser": "^5.59.2",
         "babel-eslint": "^10.1.0",
         "craco-css-modules": "^1.0.5",
         "craco-less": "^2.0.0",
@@ -31,8 +33,9 @@
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.32.2",
-        "husky": "^8.0.3",
+        "husky": "^8.0.0",
         "less-loader": "^11.1.0",
         "lint-staged": "^13.2.2",
         "prettier": "^2.8.8"
@@ -7071,6 +7074,27 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.28.0",
+        "prettier": ">=2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.32.2",
       "resolved": "https://registry.npmmirror.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
@@ -7564,6 +7588,12 @@
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -13687,6 +13717,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -22415,6 +22457,15 @@
         }
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.32.2",
       "resolved": "https://registry.npmmirror.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
@@ -22717,6 +22768,12 @@
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -27265,6 +27322,15 @@
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

hippo4j-ui-new/package.json

@@ -21,11 +21,8 @@
     "build": "craco build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint --ext .js src",
+    "lint": "eslint -c .eslintrc.js src --ext .ts,.tsx,.js,.jsx --fix",
-    "lint:fix": "eslint --fix --ext .js src",
+    "prepare": "husky install"
-    "lint-staged": "lint-staged",
-    "lint-staged:js": "eslint --ext .js src",
-    "format": "prettier --write ./src/**/**/**/*.js"
   },
   "eslintConfig": {
     "extends": [
@@ -47,6 +44,8 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "babel-eslint": "^10.1.0",
     "craco-css-modules": "^1.0.5",
     "craco-less": "^2.0.0",
@@ -55,11 +54,17 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
-    "husky": "^8.0.3",
+    "husky": "^8.0.0",
     "less-loader": "^11.1.0",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8"
   },
-  "cracoConfig": "./build/craco.config.js"
+  "cracoConfig": "./build/craco.config.js",
+  "lint-staged": {
+    "src/**/*.{ts,tsx,js,jsx}": [
+      "eslint -c .eslintrc.js --fix"
+    ]
+  }
 }

hippo4j-ui-new/src/index.tsx

@@ -2,14 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
-
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
 
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-

hippo4j-ui-new/src/react-app-env.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />
-declare module '*.less'
+declare module '*.less';