feat: install prettier to format code and add react-dev-inspector to locate code in the IDE faster (#44)

* feat: add react-dev-inspector to locate code in the IDE faster

* feat: install prettier to format code

---------

Co-authored-by: yangqianjuan <[email protected]>

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "search-node-modules.path": "web/node_modules"
+}

web/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+.umi
+.umi-production

web/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
+}

web/.umirc.ts

@@ -16,7 +16,7 @@ export default defineConfig({
   history: {
     type: 'browser',
   },
-  plugins: ['@umijs/plugins/dist/dva'],
+  plugins: ['@react-dev-inspector/umi4-plugin','@umijs/plugins/dist/dva',],
   dva: {},
   // proxy: {
   //   '/v1': {

web/package.json

@@ -1,37 +1,42 @@
-{
-  "private": true,
-  "author": "zhaofengchao <[email protected]>",
-  "scripts": {
-    "dev": "cross-env PORT=9000 umi dev",
-    "build": "umi build",
-    "postinstall": "umi setup",
-    "setup": "umi setup",
-    "start": "npm run dev"
-  },
-  "dependencies": {
-    "@ant-design/icons": "^5.2.6",
-    "@ant-design/pro-components": "^2.6.46",
-    "@ant-design/pro-layout": "^7.17.16",
-    "antd": "^5.12.7",
-    "axios": "^1.6.3",
-    "classnames": "^2.5.1",
-    "i18next": "^23.7.16",
-    "js-base64": "^3.7.5",
-    "jsencrypt": "^3.3.2",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "react-i18next": "^14.0.0",
-    "react-infinite-scroll-component": "^6.1.0",
-    "umi": "^4.0.90",
-    "umi-request": "^1.4.0"
-  },
-  "devDependencies": {
-    "@types/lodash": "^4.14.202",
-    "@types/react": "^18.0.33",
-    "@types/react-dom": "^18.0.11",
-    "@umijs/plugins": "^4.1.0",
-    "cross-env": "^7.0.3",
-    "typescript": "^5.0.3",
-    "umi-plugin-icons": "^0.1.1"
-  }
-}
+{
+  "private": true,
+  "author": "zhaofengchao <[email protected]>",
+  "scripts": {
+    "build": "umi build",
+    "dev": "cross-env PORT=9000 umi dev",
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.2.6",
+    "@ant-design/pro-components": "^2.6.46",
+    "@ant-design/pro-layout": "^7.17.16",
+    "antd": "^5.12.7",
+    "axios": "^1.6.3",
+    "classnames": "^2.5.1",
+    "i18next": "^23.7.16",
+    "js-base64": "^3.7.5",
+    "jsencrypt": "^3.3.2",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "react-i18next": "^14.0.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "umi": "^4.0.90",
+    "umi-request": "^1.4.0"
+  },
+  "devDependencies": {
+    "@react-dev-inspector/umi4-plugin": "^2.0.1",
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "@umijs/plugins": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "prettier": "^3.2.4",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-packagejson": "^2.4.9",
+    "react-dev-inspector": "^2.0.1",
+    "typescript": "^5.0.3",
+    "umi-plugin-icons": "^0.1.1"
+  }
+}

web/src/app.tsx

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+import { Inspector } from "react-dev-inspector";
+
+export function rootContainer(container: ReactNode) {
+  return React.createElement(Inspector, null, container);
+}

web/src/pages/knowledge/index.less

@@ -1,41 +1,40 @@
 .knowledge {
-    padding: 24px;
+  padding: 24px;
 }
 
 .container {
-    height: 100px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .content {
     display: flex;
-    flex-direction: column;
     justify-content: space-between;
 
-    .content {
-        display: flex;
-        justify-content: space-between;
-
-        .context {
-            flex: 1
-        }
+    .context {
+      flex: 1;
     }
+  }
 
-    .footer {
-        height: 20px;
+  .footer {
+    height: 20px;
 
-        .text {
-            margin-left: 10px;
-        }
+    .text {
+      margin-left: 10px;
     }
+  }
 }
 
 .card {
-    :global {
-        .ant-card-body {
-            padding: 10px;
-            margin: 0;
-        }
-
-        margin-bottom: 10px;
+  :global {
+    .ant-card-body {
+      padding: 10px;
+      margin: 0;
     }
 
-    cursor: pointer;
+    margin-bottom: 10px;
+  }
 
-}
+  cursor: pointer;
+}

web/src/pages/knowledge/model.ts

@@ -1,10 +1,9 @@
-import { Effect, Reducer, Subscription } from 'umi'
-import { message } from 'antd';
 import kbService from '@/services/kbService';
+import { Effect, Reducer, Subscription } from 'umi';
 
 export interface knowledgeModelState {
   loading: boolean;
-  data: any[]
+  data: any[];
 }
 export interface knowledgegModelType {
   namespace: 'knowledgeModel';
@@ -22,45 +21,44 @@ const Model: knowledgegModelType = {
   namespace: 'knowledgeModel',
   state: {
     loading: false,
-    data: []
+    data: [],
   },
   subscriptions: {
     setup({ dispatch, history }) {
-      history.listen(location => {
-        console.log(location)
+      history.listen((location) => {
+        console.log(location);
       });
-    }
+    },
   },
   effects: {
-    * rmKb({ payload = {}, callback }, { call, put }) {
+    *rmKb({ payload = {}, callback }, { call, put }) {
       const { data, response } = yield call(kbService.rmKb, payload);
-      const { retcode, data: res, retmsg } = data
+      const { retcode, data: res, retmsg } = data;
       if (retcode === 0) {
-        callback && callback()
-
+        callback && callback();
       }
     },
     *getList({ payload = {} }, { call, put }) {
       yield put({
         type: 'updateState',
         payload: {
-          loading: true
-        }
+          loading: true,
+        },
       });
       const { data, response } = yield call(kbService.getList, payload);
-      const { retcode, data: res, retmsg } = data
+      const { retcode, data: res, retmsg } = data;
       yield put({
         type: 'updateState',
         payload: {
-          loading: false
-        }
+          loading: false,
+        },
       });
       if (retcode === 0) {
         yield put({
           type: 'updateState',
           payload: {
-            data: res
-          }
+            data: res,
+          },
         });
       }
     },
@@ -69,9 +67,9 @@ const Model: knowledgegModelType = {
     updateState(state, { payload }) {
       return {
         ...state,
-        ...payload
+        ...payload,
       };
-    }
-  }
+    },
+  },
 };
 export default Model;