feat: 新增vite-plugin-eslint插件以及抽象出vite.config.js的插件配置项

.prettierrc.cjs

@@ -37,5 +37,5 @@ module.exports = {
   endOfLine: "auto",
   // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
   rangeStart: 0,
-  rangeEnd: Infinity,
+  rangeEnd: Infinity
 };

build/vite-plugin.ts

@@ -0,0 +1,80 @@
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import { PluginOption } from "vite";
+import eslintPlugin from "vite-plugin-eslint";
+import { vitePluginForArco } from "@arco-plugins/vite-vue";
+import { createHtmlPlugin } from "vite-plugin-html";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import AutoImport from "unplugin-auto-import/vite";
+import { ArcoResolver } from "unplugin-vue-components/resolvers";
+import Components from "unplugin-vue-components/vite";
+import { viteMockServe } from "vite-plugin-mock";
+/**
+ * 创建 vite 插件
+ * @param viteEnv
+ */
+export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
+  const env = viteEnv;
+  return [
+    vue(),
+    // esLint 报错信息显示在浏览器界面上
+    eslintPlugin(),
+    vitePluginForArco({
+      style: "css"
+    }),
+    // 提供ejs模板能力，用于index.html的标题显示
+    createHtmlPlugin({
+      inject: {
+        data: {
+          title: env.VITE_GLOB_APP_TITLE
+        }
+      }
+    }),
+    createSvgIconsPlugin({
+      // 配置src下存放svg的路径，这里表示在src/assets/svgs文件夹下
+      iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
+      symbolId: "icon-[dir]-[name]"
+    }),
+    AutoImport({
+      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
+      imports: ["vue", "vue-router"],
+      // arco组件的按需加载
+      resolvers: [ArcoResolver()],
+      // 解决eslint报错问题
+      eslintrc: {
+        // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
+        enabled: false,
+        filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
+        globalsPropValue: true
+      },
+      // 配置文件生成位置
+      dts: "src/auto-import.d.ts"
+    }),
+    Components({
+      resolvers: [
+        // arco组件的按需加载
+        ArcoResolver({
+          sideEffect: true
+        })
+      ],
+      // 自动加载组件的目录配置,默认的为 'src/components'
+      dirs: ["src/components"],
+      // 组件的有效文件扩展名
+      extensions: ["vue"],
+      // 配置文件生成位置
+      dts: "src/components.d.ts"
+    }),
+    viteMockServe({
+      mockPath: "./src/mock/", // 目录位置
+      logger: true, //  是否在控制台显示请求日志
+      supportTs: true, // 是否读取ts文件模块
+      localEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置是否启用本地mock文件
+      prodEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置打包是否启用mock功能
+      // 这样可以控制关闭mock的时候不让mock打包到最终代码内
+      injectCode: `
+          import { setupProdMockServer } from '../src/mock/index';
+          setupProdMockServer();
+        `
+    })
+  ];
+};

package.json

@@ -80,6 +80,7 @@
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.0",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",

pnpm-lock.yaml

@@ -119,7 +119,7 @@ importers:
         version: 9.1.0(eslint@8.57.0)
       eslint-plugin-prettier:
         specifier: ^5.1.3
-        version: 5.1.3(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5)
+        version: 5.1.3(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5)
       eslint-plugin-vue:
         specifier: ^9.23.0
         version: 9.23.0(eslint@8.57.0)
@@ -168,6 +168,9 @@ importers:
       vite:
         specifier: ^5.2.0
         version: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)
+      vite-plugin-eslint:
+        specifier: ^1.8.1
+        version: 1.8.1(eslint@8.57.0)(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2))
       vite-plugin-html:
         specifier: ^3.2.2
         version: 3.2.2(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2))
@@ -1058,6 +1061,9 @@ packages:
   '@types/conventional-commits-parser@5.0.0':
     resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
 
+  '@types/eslint@8.56.12':
+    resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
+
   '@types/estree@0.0.39':
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
 
@@ -3357,6 +3363,11 @@ packages:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     hasBin: true
 
+  rollup@2.79.2:
+    resolution: {integrity: sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
   rollup@4.13.0:
     resolution: {integrity: sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -3781,6 +3792,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vite-plugin-eslint@1.8.1:
+    resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
+    peerDependencies:
+      eslint: '>=7'
+      vite: '>=2'
+
   vite-plugin-html@3.2.2:
     resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
     peerDependencies:
@@ -4871,6 +4888,11 @@ snapshots:
     dependencies:
       '@types/node': 20.11.30
 
+  '@types/eslint@8.56.12':
+    dependencies:
+      '@types/estree': 1.0.5
+      '@types/json-schema': 7.0.15
+
   '@types/estree@0.0.39': {}
 
   '@types/estree@1.0.5': {}
@@ -6053,13 +6075,14 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-plugin-prettier@5.1.3(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5):
+  eslint-plugin-prettier@5.1.3(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5):
     dependencies:
       eslint: 8.57.0
       prettier: 3.2.5
       prettier-linter-helpers: 1.0.0
       synckit: 0.8.8
     optionalDependencies:
+      '@types/eslint': 8.56.12
       eslint-config-prettier: 9.1.0(eslint@8.57.0)
 
   eslint-plugin-vue@9.23.0(eslint@8.57.0):
@@ -7440,6 +7463,10 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  rollup@2.79.2:
+    optionalDependencies:
+      fsevents: 2.3.3
+
   rollup@4.13.0:
     dependencies:
       '@types/estree': 1.0.5
@@ -7896,6 +7923,14 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vite-plugin-eslint@1.8.1(eslint@8.57.0)(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)):
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@types/eslint': 8.56.12
+      eslint: 8.57.0
+      rollup: 2.79.2
+      vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)
+
   vite-plugin-html@3.2.2(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)):
     dependencies:
       '@rollup/pluginutils': 4.2.1

src/typings/global.d.ts

@@ -34,3 +34,13 @@ declare namespace TabsMenu {
     title: string;
   }
 }
+
+/* viteEnv */
+interface ViteEnv {
+  VITE_GLOB_APP_TITLE: string;
+  VITE_IMG_BASE_URL: string;
+  VITE_APP_OPEN_MOCK: boolean | string;
+  VITE_USER_NODE_ENV: "development" | "production" | "test";
+  VITE_PUBLIC_PATH: string;
+  VITE_APP_BASE_URL: string;
+}

tsconfig.json

@@ -35,9 +35,11 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "src/auto-import.d.ts", // 与vite.config.ts-AutoImport-dts路径一致
+    "build/**/*.ts",
+    "build/**/*.d.ts",
     "vite.config.ts"
   ], // 指定被编译文件所在的目录
   // exclude表示要排除的、不编译的文件，它也可以指定一个列表，规则和include一样，可以是文件或文件夹，可以是相对路径或绝对路径，可以使用通配符
-  "exclude": ["node_modules", "dist", "**/*.js"], // 指定不需要被编译的目录
+  "exclude": ["node_modules", "dist", "**/*.js"] // 指定不需要被编译的目录
-  "references": [{ "path": "./tsconfig.node.json" }]
+  // "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,15 +1,8 @@
 import { defineConfig, normalizePath, loadEnv } from "vite";
-import vue from "@vitejs/plugin-vue";
 import path from "path";
 import { resolve } from "path";
 import postcssPresetEnv from "postcss-preset-env";
-import AutoImport from "unplugin-auto-import/vite";
+import { createVitePlugins } from "./build/vite-plugin";
-import Components from "unplugin-vue-components/vite";
-import { ArcoResolver } from "unplugin-vue-components/resolvers";
-import { vitePluginForArco } from "@arco-plugins/vite-vue";
-import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
-import { createHtmlPlugin } from "vite-plugin-html";
-import { viteMockServe } from "vite-plugin-mock";
 const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
 
 // https://vitejs.dev/config/
@@ -17,7 +10,7 @@ export default defineConfig(({ mode }) => {
   // 根路径
   const root = process.cwd();
   // 获取跟路径对应的文件
-  const env = loadEnv(mode, root);
+  const env: any = loadEnv(mode, root);
   return {
     // 生产环境服务的公共基础路径-用于生出环境的代理的路径
     base: env.VITE_PUBLIC_PATH,
@@ -33,65 +26,8 @@ export default defineConfig(({ mode }) => {
         }
       }
     },
-    plugins: [
+    // 插件：路径build/vite-plugin
-      vue(),
+    plugins: createVitePlugins(env),
-      vitePluginForArco({
-        style: "css"
-      }),
-      createHtmlPlugin({
-        inject: {
-          data: {
-            title: env.VITE_GLOB_APP_TITLE
-          }
-        }
-      }),
-      createSvgIconsPlugin({
-        // 配置src下存放svg的路径，这里表示在src/assets/svgs文件夹下
-        iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
-        symbolId: "icon-[dir]-[name]"
-      }),
-      AutoImport({
-        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
-        imports: ["vue", "vue-router"],
-        // arco组件的按需加载
-        resolvers: [ArcoResolver()],
-        // 解决eslint报错问题
-        eslintrc: {
-          // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
-          enabled: false,
-          filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
-          globalsPropValue: true
-        },
-        // 配置文件生成位置
-        dts: "src/auto-import.d.ts"
-      }),
-      Components({
-        resolvers: [
-          // arco组件的按需加载
-          ArcoResolver({
-            sideEffect: true
-          })
-        ],
-        // 自动加载组件的目录配置,默认的为 'src/components'
-        dirs: ["src/components"],
-        // 组件的有效文件扩展名
-        extensions: ["vue"],
-        // 配置文件生成位置
-        dts: "src/components.d.ts"
-      }),
-      viteMockServe({
-        mockPath: "./src/mock/", // 目录位置
-        logger: true, //  是否在控制台显示请求日志
-        supportTs: true, // 是否读取ts文件模块
-        localEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置是否启用本地mock文件
-        prodEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置打包是否启用mock功能
-        // 这样可以控制关闭mock的时候不让mock打包到最终代码内
-        injectCode: `
-          import { setupProdMockServer } from '../src/mock/index';
-          setupProdMockServer();
-        `
-      })
-    ],
     resolve: {
       // 配置别名-绝对路径
       alias: {