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

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

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

在项目根目录下新建个

eslint.config.js

加入下面的代码,要保证node_modules里安装了
eslint-plugin-react (主要是这个)

eslint-plugin-react-hooks

eslint-plugin-react-refresh

typescript 复制代码
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',
    },
  },
];

然后安装插件ESLint

相关推荐
先吃饱再说1 小时前
React 组件设计:从 Props 传递到组件封装
前端·react.js
小月土星3 小时前
React 状态管理核心原理:从批量 DOM 到派生状态
react.js
csdn_aspnet4 小时前
如何将 Cursor MCP 与 VS Code 连接
vscode·cursor·mcp·composio
烬羽5 小时前
AI 写代码总翻车?试试"先画图再砌墙"的 Vibe Coding 三步法
react.js·ai编程·vibecoding
光影少年5 小时前
react navite 页面跳转、传参、路由监听、导航栏自定义
前端·react native·react.js
梦想的颜色6 小时前
2026 VibeCoding 工具链精选|IDE + 大模型成套组合推荐,按场景分级收录
ide·trae·ai 编程·vibecoding·国产海外 ai 编程方案·氛围编程成套配置·副业 ai 开发工具栈
LaughingZhu7 小时前
Product Hunt 每日热榜 | 2026-07-23
前端·神经网络·react.js·搜索引擎·前端框架
小杨小杨、努力变强!7 小时前
VS Code运行HBuilder X中的uni-app项目
vscode·uni-app·uni-app run
不好听6137 小时前
Fragment:React 的 `<></>` 和原生的 DocumentFragment,同名不同命
前端·react.js·dom
不好听6137 小时前
useState 完全解析:初始化、异步更新、以及为什么传函数能解决闭包问题
前端·react.js