dev: 增加eslint

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8

package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,less,md}\""
   },
   "dependencies": {
     "antd": "^4.16.13",
@@ -20,9 +21,33 @@
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "@vitejs/plugin-react": "^1.0.7",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.2.2",
     "ncp": "^2.0.0",
+    "prettier": "^2.5.1",
     "typescript": "^4.4.4",
     "vite": "^2.6.4",
     "vitepress": "^0.20.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "plugin:prettier/recommended"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,less,md}": [
+      "prettier --write"
+    ],
+    "src/**/*.{js, ts}": "eslint"
   }
 }

src/app/index.tsx

@@ -1,6 +1,5 @@
-
 const App = () => {
-  return <h1>首页</h1>
+  return <h1>首页</h1>;
-}
+};
 
 export default App;

src/editor/Catalog/index.tsx

@@ -1,7 +1,5 @@
-
-
 const Catalog = () => {
   return <h1>属性区域</h1>;
-}
+};
 
 export default Catalog;

src/editor/Menu/index.tsx

@@ -1,7 +1,5 @@
-
-
 const Menu = () => {
   return <h1>属性区域</h1>;
-}
+};
 
 export default Menu;

src/editor/Plot/Tools/index.tsx

@@ -1,9 +1,9 @@
 import { Tooltip } from "antd";
 
 type IconWithTipProps = {
-  type: string, 
+  type: string;
-  text: string,
+  text: string;
-  placement?: "top" | "right",
+  placement?: "top" | "right";
 };
 
 const IconWithTip = ({ type, text, placement = "top" }: IconWithTipProps) => {
@@ -31,6 +31,6 @@ const Tools = () => {
       </div>
     </>
   );
-}
+};
 
 export default Tools;

src/editor/Plot/index.less

@@ -37,7 +37,7 @@
       display: inline-block;
       border-radius: 4px;
       margin-top: 4px;
-      box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
+      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
     }
   }
 }

src/editor/Plot/index.tsx

@@ -8,7 +8,6 @@ import "./index.less";
 const { Header, Footer, Sider, Content } = Layout;
 
 const Plot = () => {
-
   const mapStageRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

src/editor/Property/index.tsx

@@ -1,7 +1,5 @@
-
-
 const Property = () => {
   return <h1>属性区域</h1>;
-}
+};
 
 export default Property;

src/editor/index.less

@@ -1,4 +1,3 @@
-
 .editor-main {
   height: 100%;
 }
@@ -11,7 +10,9 @@
 .editor-body-center {
   position: relative;
 }
-.editor-header, .editor-body-left, .editor-body-right{
+.editor-header,
+.editor-body-left,
+.editor-body-right {
   background-color: #fff;
 }
 

src/editor/index.tsx

@@ -19,4 +19,4 @@ export const Editor = () => {
       </Layout>
     </Layout>
   );
-}
+};

src/icon.less

@@ -1,11 +1,14 @@
 @font-face {
-  font-family: 'iconfont';  /* Project id 2872894 */
+  font-family: "iconfont"; /* Project id 2872894 */
-  src: url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff2?t=1642594908994') format('woff2'),
+  src: url("//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff2?t=1642594908994")
-       url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff?t=1642594908994') format('woff'),
+      format("woff2"),
-       url('//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.ttf?t=1642594908994') format('truetype');
+    url("//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.woff?t=1642594908994")
+      format("woff"),
+    url("//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.ttf?t=1642594908994")
+      format("truetype");
 }
 .icon {
-  font-family: 'iconfont';
+  font-family: "iconfont";
   font-size: 14px;
   line-height: 20px;
   cursor: pointer;
@@ -16,58 +19,58 @@
   display: inline-block;
 }
 .icon-boundary:after {
-  content: '\e7a9'; 
+  content: "\e7a9";
 }
 .icon-confirm:after {
-  content: '\e618';
+  content: "\e618";
 }
 .icon-export:after {
-  content: '\e791';
+  content: "\e791";
 }
 .icon-polygon:after {
-  content: '\e67b';
+  content: "\e67b";
 }
 .icon-ellipse:after {
-  content: '\e610';
+  content: "\e610";
 }
 .icon-polyline:after {
-  content: '\e68f';
+  content: "\e68f";
 }
 .icon-edit:after {
-  content: '\e609';
+  content: "\e609";
 }
 .icon-delete:after {
-  content: '\e61c';
+  content: "\e61c";
 }
 .icon-search:after {
-  content: '\e600';
+  content: "\e600";
 }
 .icon-select:after {
-  content: '\e607';
+  content: "\e607";
 }
 .icon-help:after {
-  content: '\e752';
+  content: "\e752";
 }
 .icon-import:after {
-  content: '\e792';
+  content: "\e792";
 }
 .icon-open:after {
-  content: '\eddb'
+  content: "\eddb";
 }
 .icon-save:after {
-  content: '\eddc';
+  content: "\eddc";
 }
 .icon-setting:after {
-  content: '\e78e';
+  content: "\e78e";
 }
 .icon-location:after {
-  content: '\e793';
+  content: "\e793";
 }
 .icon-rect:after {
-  content: '\e604';
+  content: "\e604";
 }
 .icon-circle:after {
-  content: '\edf8';
+  content: "\edf8";
 }
 .icon-selected {
   color: rgb(31, 107, 206);

src/index.less

@@ -1,6 +1,7 @@
 @import "./icon.less";
 
-html, body{
+html,
+body {
   margin: 0;
   padding: 0;
   height: 100%;

src/index.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
 
-import 'antd/dist/antd.css';
+import "antd/dist/antd.css";
 
-import { store, StoreContext } from './store';
+import { store, StoreContext } from "./store";
-import { Editor } from './editor';
+import { Editor } from "./editor";
-import './index.less';
+import "./index.less";
 
 ReactDOM.render(
   <StoreContext.Provider value={store}>
     <Editor />
   </StoreContext.Provider>,
-  document.getElementById('app')
+  document.getElementById("app")
-)
+);

src/store/index.ts

@@ -24,8 +24,9 @@ export { store };
 //   }
 // }
 
-
+export const StoreContext = createContext<IStore | null>(
-export const StoreContext = createContext<IStore | null>(null) as Context<IStore>;
+  null
+) as Context<IStore>;
 
 export const useStore = () => {
   const store = useContext(StoreContext);

src/store/initState.ts

@@ -1,8 +1,7 @@
 import { IEditorState } from "./type";
 
-
 export const initState: IEditorState = {
   map: {
-    polygons: []
+    polygons: [],
-  }
+  },
-}
+};

src/store/reducers.ts

@@ -4,7 +4,7 @@ import { initState } from "./initState";
 export type Action = {
   type: string;
   payload: any;
-}
+};
 
 export function reducer(state = initState, action: Action) {
   return state;

src/store/type.ts

@@ -1,5 +1,3 @@
-
-
 export interface IPolygon {
   id: string;
   name: string;
@@ -10,5 +8,5 @@ export interface IMapState {
 }
 
 export interface IEditorState {
-  map: IMapState,
+  map: IMapState;
 }

src/types/index.d.ts

@@ -1,4 +1,3 @@
-
 declare global {
   namespace AMapLoader {
     const load: (config: any) => Promise<AMap.Map>;

vite.config.js

@@ -1,9 +1,18 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@store": path.resolve(__dirname, "src/store"),
+      "@editor": path.resolve(__dirname, "src/editor"),
+      "@app": path.resolve(__dirname, "src/app"),
+      "@types": path.resolve(__dirname, "src/types"),
+    },
+  },
   server: {
     port: 8080
   },