[Vite + Vue3 + TS] unplugin-auto-import automatically introduces configuration and Eslint error resolution

Preface: In Vue3 and TypeScript projects, the functions in Vue and VueRouter need to be imported on each page. In order to improve development efficiency, we need to automatically import this.

After the configuration is completed, the effect diagram is as follows:

You can see that the page does not introduce onMounted reactivefunctions such as and can be used normally

Next, we will configure the

1. Download and import the pluginunplugin-auto-import

$ npm install unplugin-auto-import -D

vite.config.ts

import AutoImport from "unplugin-auto-import/vite"; // 引入插件

export default defineConfig({
    
    
  plugins: [
    vue(),
    Components({
    
    
      resolvers: [VantResolver()],
    }),
    VueSetupExtend(),
    AutoImport({
    
    
      dts: "types/auto-imports.d.ts", // 这里是生成的global函数文件
      imports: ["vue", "vue-router"], // 需要自动导入的插件
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/, /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      // 解决eslint报错问题
      eslintrc: {
    
    
      	// 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
        enabled: false,
        filepath: './.eslintrc-auto-import.json', // 生成的文件路径
        globalsPropValue: true,
      }
    }),
  ]   
});

以下是AutoImport常用配置项

AutoImport({
    
    
  // 目标文件
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],

  // 全局引入插件
  imports: [
    // presets
    'vue',
    'vue-router',
    // custom
    {
    
    
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
  ],

  // eslint报错解决
  eslintrc: {
    
    
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },

  // 解析器，例如element-plus的ElementPlusResolver
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ],
  // 声明文件生成位置和文件名称
  dts: './auto-import.d.ts'
})

After the configuration is complete, delete the import function, the project can still run normally, but the following error is reported

importAs you can see, if the import is deleted and the Eslint function is not configured, an error "name not found" will be reported

2. Solve the Eslint error

.eslintrc.js

extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    './.eslintrc-auto-import.json', 在这里配置生成的JSON文件 需要和vite.config.ts文件保持一致
  ],

tsconfig.json

"include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.jsx",
    "src/**/*.vue",
    "./types/auto-imports.d.ts" // 和 AutoImport dts保持一致 引入即可
  ],