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

相关推荐
JavaPub-rodert1 小时前
从零搭建通用管理后台:ShiyuAdmin 的 Go、React 与 RBAC 实践
开发语言·react.js·golang
别问!问就是全会1 小时前
Jupyter Notebook 安装包下载|单元格分块运行,图表直接内嵌
ide·python·其他·jupyter
Highcharts.js8 小时前
React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid
前端·javascript·react.js·前端框架·jsx·highcharts·自定义表格
JudithHuang10 小时前
React 嵌套路由与布局
前端·react.js·arcgis·react·react router
前端小D13 小时前
React Native项目开发(iOS侧为例)
javascript·react native·react.js
1024奇点1 天前
【仓颉语言入门 · 第二篇 第 22 课】
开发语言·ide·开源
techpupil1 天前
IDEA基础配置及开发基础插件
java·ide·intellij-idea
赵庆明老师1 天前
Android Studio Google源代理配置
android·ide·android studio
志尊宝2 天前
AI原生前端开发(042):AI辅助的路由设计与优化
javascript·react.js·ai-native
2501_916008892 天前
iOS App 图标、启动屏和多语言搭配 方法,上架前使用KXBuild一次做好 App 图标
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程