当前位置：首页 > news >正文

vscode+react+ESLint解决不引入组件，vscode不会报错的问题

news 2025/7/5 23:41:10

解决不引入组件，vscode不会报错的问题

routes.jsx       全部代码如下
export const routes = [{path:"/",element:<Home/>}
]

在项目根目录下新建个
eslint.config.js
加入下面的代码，要保证node_modules里安装了
eslint-plugin-react（主要是这个）
eslint-plugin-react-hooks
eslint-plugin-react-refresh

import js from "@eslint/js";
import globals from "globals";
import reactPlugin from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";export default [{ ignores: ["dist", "build", "node_modules"] },{files: ["**/*.{js,jsx}"],languageOptions: {ecmaVersion: 2020,globals: globals.browser,parserOptions: {ecmaVersion: "latest",sourceType: "module",ecmaFeatures: { jsx: true },},},settings: { react: { version: "detect" } },plugins: {react: reactPlugin,"react-hooks": reactHooks,"react-refresh": reactRefresh,},rules: {...js.configs.recommended.rules,...reactPlugin.configs.recommended.rules, // ← 插件推荐里包含 jsx-no-undef 等...reactHooks.configs.recommended.rules,"no-unused-vars": "off", // 关掉 ESLint 对未使用变量的默认规则（如果已开启的话）// 如果想手动写，也可以：// 'react/jsx-no-undef': 'error',// 'react/jsx-uses-vars': 'error',// 'react/jsx-uses-react': 'error',// 'no-undef': 'error',},},
];