javascript - 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

在使用 Vite 的 unplugin-auto-import 插件时，虽然它可以帮助你自动引入 React 相关的函数和组件，但 ESLint 默认并不知道这些自动引入的存在，因此会报出类似 'useState' is not defined 的错误。为了解决这个问题，你需要让 ESLint 识别到这些自动引入的变量。

由于 unplugin-auto-import 提供了 eslintrc 配置选项来生成一个 ESLint 配置文件（如你的 .eslintrc-auto-import.json），你可以通过以下步骤来配置 ESLint 以识别这些自动引入的变量：

1. 启用 unplugin-auto-import 的 ESLint 集成：
   确保你的 vite.config.js 文件中 AutoImport 插件的 eslintrc 配置项 enabled 设置为 true。这样，Vite 构建时会自动生成一个 .eslintrc-auto-import.json 文件，该文件包含了自动引入的变量和它们对应的类型。

2. 在 ESLint 配置中合并 .eslintrc-auto-import.json：
   有几种方法可以合并这个自动生成的 ESLint 配置文件到你的主 ESLint 配置中。一个简单的方法是使用 ESLint 的 --config 选项在命令行中直接指定，但这通常不实用。更常见的是在你的 ESLint 配置文件中动态加载这个 JSON 文件，并更新全局变量或环境配置。然而，由于 ESLint 并不直接支持从 JSON 文件中加载配置，你可能需要编写一些自定义脚本来合并配置，或者使用 ESLint 插件如 eslint-import-resolver-node 来解析这些自动导入（但这通常用于解析模块导入，而非全局变量）。

   一个更实际的方法是，如果你使用的是 ESLint 的配置文件数组（如你在问题中所示），你可能需要直接在 ESLint 配置中声明这些全局变量，但这会失去一些自动性。

3. 直接在 ESLint 配置中声明全局变量：
   作为临时解决方案，你可以在 ESLint 配置中直接声明 useState 等 React Hooks 为全局变量：

   "globals": {
       "useState": "readonly",
       "useEffect": "readonly",
       // 其他需要的 React Hooks
   },

但请注意，这种方法需要你手动管理这些全局变量，并在 React 或 unplugin-auto-import 更新时更新它们。

4. 使用 ESLint 插件：
   如果上述方法都不满足你的需求，你可以考虑寻找或编写一个 ESLint 插件，该插件能够读取 .eslintrc-auto-import.json 文件并相应地更新 ESLint 的全局变量配置。
5. 更新 unplugin-auto-import：
   检查 unplugin-auto-import 的最新版本，看看是否有新的特性或选项可以更容易地集成到 ESLint 中。

综上所述，最简单且直接的解决方案可能是在你的 ESLint 配置中直接声明 React Hooks 为全局变量，尽管这可能需要一些手动管理。对于更自动化的解决方案，你可能需要寻找或开发更高级的集成方法。