vite自动引入，eslint报错应该如何解决？

Question

eslint版本 9.9.0
vite版本 5.4.1

在vite中，配置了自动引入，但是eslint还是会报错ESLint: 'useState' is not defined.(no-undef)，eslint应该怎么配置，求大佬告知

// vite.config.js
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import AutoImport from "unplugin-auto-import/vite"


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        AutoImport({
            eslintrc: {
                enabled: false,
                filepath: "./.eslintrc-auto-import.json" //此文件为重新启动项目生成的文件
            },
            dts: "./auto-imports.d.ts",//此文件配置保存后系统自动生成
            imports: ["react", "react-router"] //此处可填写需要自动引入的库
        })
    ]
})


// eslint 
export default [
    {ignores: ["dist"]},
    {
        files: ["**/*.{js,jsx}"],
        languageOptions: {
            ecmaVersion: 2020,
            globals: globals.browser,
            parserOptions: {
                ecmaVersion: "latest",
                ecmaFeatures: {jsx: true},
                sourceType: "module"
            }
        },
        settings: {react: {version: "18.3"}},
        plugins: {
            react,
            "react-hooks": reactHooks,
            "react-refresh": reactRefresh
        },
        rules: {
            ...js.configs.recommended.rules,
            ...react.configs.recommended.rules,
            ...react.configs["jsx-runtime"].rules,
            ...reactHooks.configs.recommended.rules,
            "react/jsx-no-target-blank": "off",
            "react-refresh/only-export-components": [
                "warn",
                {allowConstantExport: true}
            ]
        }
    }
]

希望可以不用没有都写import { useState } from "react"这种引入

Answer 1

需要 "extends" : ['./.eslintrc-auto-import.json']

Answer 2

你可以看一下unplugin-auto-import

eslint非v9版本按照这个步骤进行处理就不会有undef问题,使用extends方式引入eslintrc-auto-import.json就好了，v9版本因为eslint就不能用extends这种方式了。
可参考这种方式，或者eslint降级到非v9版本

Answer 3

1、项目安装自动导入依赖
npm i unplugin-auto-import
2、自动导入进行配置

import autoImport from 'unplugin-auto-import/vite'

export default function createAutoImport() {
  return autoImport({
    imports: ['vue', 'vue-router', 'pinia'],
    dts: 'src/auto-import.d.ts', // 生成 `auto-import.d.ts` 全局声明
    // 默认 false, true 启用生成。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把 enable 关掉，即改成 false。
    // 否则这个文件每次会在重新加载的时候重新生成，这会导致 eslint 有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
    eslintrc: {
      enabled: true
    }
  })
}

注意：这里添加了eslintrc: {enabled: true}，意思就是在执行npm run dev后会生成一个文件.eslintrc-auto-import.json，该文件会同步导入vue相关函数，页面不引入也不会报错提醒。
3、在.eslintrc.js文件中添加刚才自动生成的文件。

 extends: [
    'plugin:vue/vue3-essential', 
    './.eslintrc-auto-import.json'
],