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,12 +1,12 @@
 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) => {
+const IconWithTip = ({ type, text, placement = "top" }: IconWithTipProps) => {
   return (
     <Tooltip title={text} placement={placement}>
       <span className={`icon icon-${type}`}></span>
@@ -31,6 +31,6 @@ const Tools = () => {
       </div>
     </>
   );
-}
+};
 
 export default Tools;

src/editor/Plot/index.less

@@ -1,4 +1,4 @@
-.map-stage{
+.map-stage {
   position: absolute;
   width: 100%;
   height: calc(100% - 40px);
@@ -6,38 +6,38 @@
   left: 0;
   z-index: 0;
 }
-.tools-properties{
+.tools-properties {
   position: absolute;
   width: 100%;
   height: 40px;
   background-color: #fff;
   border-bottom: 1px solid #ccc;
 }
-.tools-area{
+.tools-area {
   margin-top: 40px;
   padding: 20px;
   position: relative;
   z-index: 10;
-  .marker-tools{
+  .marker-tools {
     background-color: rgb(105, 105, 105);
     border-radius: 4px;
     display: inline-block;
     color: #fff;
-    .icon{
+    .icon {
       border-right: 1px dashed rgb(168, 168, 168);
     }
   }
-  .common-tools{
+  .common-tools {
     margin-top: 10px;
     display: flex;
     flex-direction: column;
-    .tools-group{
+    .tools-group {
       width: 26px;
       background-color: #fff;
       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,20 +1,21 @@
-
+.editor-main {
-.editor-main{
   height: 100%;
 }
-.editor-header{
+.editor-header {
   height: 40px;
   line-height: 40px;
   padding: 0 10px;
   border-bottom: 1px solid #ccc;
 }
-.editor-body-center{
+.editor-body-center {
   position: relative;
 }
-.editor-header, .editor-body-left, .editor-body-right{
+.editor-header,
+.editor-body-left,
+.editor-body-right {
   background-color: #fff;
 }
 
-#mapStage{
+#mapStage {
   height: 100%;
 }

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"),
-.icon{
+    url("//at.alicdn.com/t/font_2872894_c6wq9g1vj1v.ttf?t=1642594908994")
-  font-family: 'iconfont';
+      format("truetype");
+}
+.icon {
+  font-family: "iconfont";
   font-size: 14px;
   line-height: 20px;
   cursor: pointer;
@@ -15,64 +18,64 @@
   padding: 3px 6px;
   display: inline-block;
 }
-.icon-boundary:after{
+.icon-boundary:after {
-  content: '\e7a9'; 
+  content: "\e7a9";
 }
-.icon-confirm:after{
+.icon-confirm:after {
-  content: '\e618';
+  content: "\e618";
 }
-.icon-export:after{
+.icon-export:after {
-  content: '\e791';
+  content: "\e791";
 }
-.icon-polygon:after{
+.icon-polygon:after {
-  content: '\e67b';
+  content: "\e67b";
 }
-.icon-ellipse:after{
+.icon-ellipse:after {
-  content: '\e610';
+  content: "\e610";
 }
-.icon-polyline:after{
+.icon-polyline:after {
-  content: '\e68f';
+  content: "\e68f";
 }
-.icon-edit:after{
+.icon-edit:after {
-  content: '\e609';
+  content: "\e609";
 }
-.icon-delete:after{
+.icon-delete:after {
-  content: '\e61c';
+  content: "\e61c";
 }
-.icon-search:after{
+.icon-search:after {
-  content: '\e600';
+  content: "\e600";
 }
-.icon-select:after{
+.icon-select:after {
-  content: '\e607';
+  content: "\e607";
 }
-.icon-help:after{
+.icon-help:after {
-  content: '\e752';
+  content: "\e752";
 }
-.icon-import:after{
+.icon-import:after {
-  content: '\e792';
+  content: "\e792";
 }
-.icon-open:after{
+.icon-open:after {
-  content: '\eddb'
+  content: "\eddb";
 }
-.icon-save:after{
+.icon-save:after {
-  content: '\eddc';
+  content: "\eddc";
 }
-.icon-setting:after{
+.icon-setting:after {
-  content: '\e78e';
+  content: "\e78e";
 }
-.icon-location:after{
+.icon-location:after {
-  content: '\e793';
+  content: "\e793";
 }
-.icon-rect:after{
+.icon-rect:after {
-  content: '\e604';
+  content: "\e604";
 }
-.icon-circle:after{
+.icon-circle:after {
-  content: '\edf8';
+  content: "\edf8";
 }
-.icon-selected{
+.icon-selected {
   color: rgb(31, 107, 206);
 }
-.icon-disable{
+.icon-disable {
   color: rgb(155, 155, 155);
   cursor: default;
 }

src/index.less

@@ -1,10 +1,11 @@
 @import "./icon.less";
 
-html, body{
+html,
+body {
   margin: 0;
   padding: 0;
   height: 100%;
 }
-#app{
+#app {
   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,7 +1,6 @@
-
+declare global {
-declare global{
   namespace AMapLoader {
-    const load: (config: any)=> Promise<AMap.Map>;
+    const load: (config: any) => Promise<AMap.Map>;
   }
 }
 export {};

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
   },