fix: 修复 eslint 报错问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-editor",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Geographic data editing tool based on L7",
   "files": [
     "lib",
@@ -15,13 +15,13 @@
     "build": "father build",
     "i18n:collect": "kiwi --extract src",
     "lint": "run-p lint:*",
-    "lint:ts": "eslint src __tests__ --ext .ts,.tsx --ignore-pattern 'src/**/demos/'",
-    "lint:style": "stylelint --fix src/**/*.less",
-    "prettier": "prettier --write 'src/*.{tsx,ts,md,json}'",
-    "lint-fix": "eslint src __tests__ --fix --ext .ts,.tsx --format=pretty && npm run lint:style",
+    "lint:ts": "eslint src --ext .ts,.tsx --ignore-pattern 'src/**/demos/'",
+    "lint-fix": "eslint src --fix --ext .ts,.tsx --format=pretty",
+    "prettier": "prettier --write 'src/**.{tsx,ts,md,json}'",
     "clean": "rimraf es lib dist umd",
     "format": "prettier --cache --write .",
     "prepare": "dumi setup",
+    "ci": "run-s lint doctor build",
     "setup": "dumi setup",
     "doctor": "father doctor",
     "docs:build": "dumi build",
@@ -87,6 +87,7 @@
     "gh-pages": "^4.0.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
+    "npm-run-all": "^4.1.5",
     "typescript": "^4.1.2",
     "webpack-bundle-analyzer": "^4.9.0"
   },

src/components/app-header/btn/download-btn.tsx

@@ -1,14 +1,15 @@
 import { CloudDownloadOutlined } from '@ant-design/icons';
 import { coordAll } from '@turf/turf';
-import { Button, Dropdown, MenuProps } from 'antd';
+import type { MenuProps } from 'antd';
+import { Button, Dropdown } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { downloadText } from '../../../utils';
-import { prettierText } from '../../../utils/prettier-text';
-import { useFeature } from './../../../recoil';
 // @ts-ignore
 import tokml from 'tokml';
+import { downloadText } from '../../../utils';
+import { prettierText } from '../../../utils/prettier-text';
 import { GeoJSON2Wkt } from '../../../utils/wkt';
+import { useFeature } from './../../../recoil';
 
 const DownloadBtn: React.FC = () => {
   const { editorText, fc } = useFeature();

src/components/app-header/btn/import-btn/file-upload.tsx

@@ -1,6 +1,8 @@
 import { FileTextOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { Geometry, feature, featureCollection } from '@turf/turf';
-import { Form, Select, Tooltip, Upload, UploadFile, message } from 'antd';
+import type { Geometry } from '@turf/turf';
+import { feature, featureCollection } from '@turf/turf';
+import type { UploadFile } from 'antd';
+import { Form, Select, Tooltip, Upload, message } from 'antd';
 import { cloneDeep } from 'lodash';
 import React, {
   forwardRef,
@@ -114,46 +116,47 @@ const FileUpload = forwardRef<any>(function FileUpload({}, ref) {
           }
         }),
     }),
-    [fileList, uploadData],
+    [fileList, t, uploadData],
   );
 
   const selectItem = useMemo(() => {
     if (selectList.length) {
       const data = selectList.map((item, index) => {
-        const options = item.columns.map((item: string | number) => {
+        const options = item.columns.map((option: string | number) => {
           return {
-            value: item,
-            label: item,
+            value: option,
+            label: option,
           };
         });
         return (
           <Form.Item
             name={item.id}
             label={`${t('import_btn.file_upload.wenJian')}${index + 1}`}
+            key={item.id}
           >
             <Select
               options={options}
               style={{ width: 300 }}
               onChange={(e) => {
-                const newData = selectList.find((v) => v.id === item.id);
-                const data = newData?.data.map((value: any) => {
+                const newData1 = selectList.find((v) => v.id === item.id);
+                const newData2 = newData1?.data.map((value: any) => {
                   return value[e];
                 });
-                const propertiesList = newData?.data.map((v: any) => {
+                const propertiesList = newData1?.data.map((v: any) => {
                   const properties = cloneDeep(v);
                   delete properties[e];
                   return { ...properties };
                 });
                 let newGeoJson = [];
-                if (isWkt(data[0])) {
-                  newGeoJson = data.map((v: string, index: number) => {
+                if (isWkt(newData2[0])) {
+                  newGeoJson = newData2.map((v: string, geojsonIndex: number) => {
                     const geometry = parse(v) as Geometry;
-                    return feature(geometry, { ...propertiesList[index] });
+                    return feature(geometry, { ...propertiesList[geojsonIndex] });
                   });
-                } else if (isGeometry(data[0])) {
-                  newGeoJson = data.map((v: string, index: number) => {
+                } else if (isGeometry(newData2[0])) {
+                  newGeoJson = newData2.map((v: string, geojsonIndex: number) => {
                     return feature(JSON.parse(v), {
-                      ...propertiesList[index],
+                      ...propertiesList[geojsonIndex],
                     });
                   });
                 } else {
@@ -162,9 +165,9 @@ const FileUpload = forwardRef<any>(function FileUpload({}, ref) {
                   );
                 }
                 const newDates = uploadData.filter(
-                  (item) => item.id !== newData?.id,
+                  (updateItem) => updateItem.id !== newData1?.id,
                 );
-                newDates.push({ features: newGeoJson, id: newData?.id });
+                newDates.push({ features: newGeoJson, id: newData1?.id });
                 setUploadData(newDates);
               }}
             />
@@ -173,7 +176,7 @@ const FileUpload = forwardRef<any>(function FileUpload({}, ref) {
       });
       return data;
     }
-  }, [selectList, uploadData]);
+  }, [selectList, t, uploadData]);
 
   return (
     <>

src/components/app-header/btn/import-btn/index.tsx

@@ -1,21 +1,13 @@
 import { CloudUploadOutlined } from '@ant-design/icons';
-import { FeatureCollection } from '@turf/turf';
-import {
-  Button,
-  Form,
-  message,
-  Modal,
-  Radio,
-  Tabs,
-  TabsProps,
-  Tooltip,
-} from 'antd';
+import type { FeatureCollection } from '@turf/turf';
+import type { TabsProps } from 'antd';
+import { Button, Form, message, Modal, Radio, Tabs, Tooltip } from 'antd';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GeoJsonEditor } from '../../../../components/geojson-editor';
 import { FeatureCollectionVT } from '../../../../constants/variable-type';
 import { useFeature } from '../../../../recoil';
-import { IFeatures } from '../../../../types';
+import type { IFeatures } from '../../../../types';
 import FileUpload from './file-upload';
 import UrlUpload from './url-upload';
 

src/components/app-header/btn/import-btn/lnglat-import-btn.tsx

@@ -3,7 +3,7 @@ import { Form, Input, Radio } from 'antd';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLnglat } from '../../../../recoil';
-import { LngLatImportType } from '../../../../types';
+import type { LngLatImportType } from '../../../../types';
 
 const LngLatImportBtn = forwardRef(({}, ref) => {
   const {
@@ -15,10 +15,10 @@ const LngLatImportBtn = forwardRef(({}, ref) => {
   } = useLnglat();
   const { t } = useTranslation();
 
-  const LngLatImportTypeOptions: Array<{
+  const LngLatImportTypeOptions: {
     label: string;
     value: LngLatImportType;
-  }> = [
+  }[] = [
     {
       label: t('import_btn.lnglat_import_btn.dian'),
       value: 'Point',
@@ -46,7 +46,7 @@ const LngLatImportBtn = forwardRef(({}, ref) => {
           reject(t('import_btn.lnglat_import_btn.lNGLA'));
         }),
     }),
-    [lngLatText, lngLatImportType],
+    [lngLatText, importLngLatText, t],
   );
 
   return (

src/components/app-header/btn/import-btn/url-upload.tsx

@@ -21,7 +21,7 @@ const UrlUpload = forwardRef(({}, ref) => {
           }
         }),
     }),
-    [inputValue, radioValue],
+    [inputValue, radioValue, t],
   );
 
   return (

src/components/app-header/index.tsx

@@ -64,6 +64,7 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ toolbar }) => {
       });
       setFirstOpen(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const DropdownMenuItems: MenuProps['items'] = [

src/components/app-header/styles.ts

@@ -4,8 +4,7 @@ import { theme } from 'antd';
 const useStyle = () => {
   const { useToken } = theme;
   const { token } = useToken();
-  const { colorBorder, colorBgContainer, colorText, colorIcon, colorFill } =
-    token;
+  const { colorBorder, colorBgContainer, colorText } = token;
 
   return {
     mapHeader: css`

src/components/app-map/index.tsx

@@ -1,7 +1,8 @@
 import { LarkMap } from '@antv/larkmap';
 import { useMount } from 'ahooks';
 import { message } from 'antd';
-import React, { ReactNode, useEffect, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   FeatureCollectionVT,
@@ -42,6 +43,7 @@ export const AppMap: React.FC<AppMapProps> = ({ children }) => {
     if (scene) {
       bboxAutoFit();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scene]);
 
   useEffect(() => {
@@ -54,6 +56,7 @@ export const AppMap: React.FC<AppMapProps> = ({ children }) => {
         JSON.stringify({ type: 'FeatureCollection', features: [] }, null, 2),
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const mapOptions = useMemo(() => {

src/components/app-table/index.tsx

@@ -1,12 +1,13 @@
 import { DeleteOutlined, PlusSquareOutlined } from '@ant-design/icons';
-import { Scene } from '@antv/l7';
-import { Feature, bbox, center, featureCollection } from '@turf/turf';
+import type { Scene } from '@antv/l7';
+import type { Feature } from '@turf/turf';
+import { bbox, center, featureCollection } from '@turf/turf';
 import { useSize } from 'ahooks';
+import type { FormInstance } from 'antd';
 import {
   Button,
   Empty,
   Form,
-  FormInstance,
   Input,
   InputNumber,
   Popconfirm,
@@ -210,7 +211,7 @@ export const AppTable: React.FC = () => {
         width: 80,
         align: 'center',
         fixed: 'left',
-        sorter: (a: any, b: any) => a['__index'] - b['__index'],
+        sorter: (a: any, b: any) => a.__index - b.__index,
       });
     }
 
@@ -373,7 +374,7 @@ export const AppTable: React.FC = () => {
           <a
             onClick={() => {
               resetFeatures(
-                features.filter((_, index) => {
+                features.filter((feature, index) => {
                   return index !== record[FeatureKey.Index];
                 }),
               );
@@ -387,7 +388,19 @@ export const AppTable: React.FC = () => {
       ),
     });
     return newColumns;
-  }, [features, newDataSource, resetFeatures, scene, t, transformCoord]);
+  }, [
+    addInputValue,
+    features,
+    newDataSource,
+    resetFeatures,
+    scene,
+    styles.addButton,
+    styles.addColumns,
+    styles.delButton,
+    styles.deleteColumns,
+    t,
+    transformCoord,
+  ]);
 
   const handleSave = (row: any) => {
     const newData = [...newDataSource];

src/components/geojson-editor/index.tsx

@@ -1,5 +1,5 @@
 import { useDebounceEffect, useMount, useSize } from 'ahooks';
-import { editor } from 'monaco-editor';
+import type { editor } from 'monaco-editor';
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 import React, {
   forwardRef,
@@ -110,7 +110,7 @@ export const GeoJsonEditor: React.FC<EditorProps> = forwardRef((props, ref) => {
           }
         }),
     }),
-    [scriptContent],
+    [scriptContent, t],
   );
 
   useDebounceEffect(

src/components/layer-contextmenu-popup/code-block.tsx

@@ -10,6 +10,7 @@ interface Props {
 
 export default function CodeBlock({ copyType, text }: Props) {
   const { t } = useTranslation();
+
   useEffect(() => {
     const clipboard = new Clipboard(`#${copyType}copy_btn`, {
       text: () => text,
@@ -23,6 +24,7 @@ export default function CodeBlock({ copyType, text }: Props) {
     return () => {
       clipboard.destroy();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/layer-contextmenu-popup/index.tsx

@@ -1,4 +1,5 @@
-import { Marker, PopupProps, useLayerList, useScene } from '@antv/larkmap';
+import type { PopupProps } from '@antv/larkmap';
+import { Marker, useLayerList, useScene } from '@antv/larkmap';
 import { featureCollection } from '@turf/turf';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FeatureKey, LayerId } from '../../constants';
@@ -9,7 +10,7 @@ import useStyle from './styles';
 
 export const LayerContextmenuPopup: React.FC = () => {
   const scene = useScene();
-  const { isDraw, features, revertCoord } = useFeature();
+  const { isDraw, features } = useFeature();
 
   const styles = useStyle();
   const [markerProps, setMarkerProps] = useState<
@@ -25,7 +26,7 @@ export const LayerContextmenuPopup: React.FC = () => {
 
   const targetFeature = useMemo(() => {
     return features.find(
-      (feature: { properties: { [x: string]: number | undefined } }) =>
+      (feature: { properties: Record<string, number | undefined> }) =>
         // @ts-ignore
         feature.properties?.[FeatureKey.Index] === markerProps.featureIndex,
     );