VSCode中React项目绝对导入功能正常但Eslint报错如何解决？

解决方案 #

按以下优先级排查即可解决：

• 安装eslint导入解析依赖
  大部分场景都是缺少对应解析包导致配置不生效，执行以下命令安装：

  npm install eslint-import-resolver-node --save-dev
  # 用yarn的话执行 yarn add eslint-import-resolver-node -D
  # 用pnpm的话执行 pnpm add eslint-import-resolver-node -D
  

• 重启VSCode的Eslint服务
  配置更新后Eslint插件不会自动重载，手动触发重启即可：
  1. 按Ctrl+Shift+P（Mac系统按Command+Shift+P）调出命令面板
  2. 搜索并执行「ESLint: Restart ESLint Server」，等待插件重新加载配置
  3. 若仍报错直接重启整个VSCode窗口
• 校验配置文件位置与格式
  1. 确认.eslintrc、jsconfig.json两个文件都放在项目根目录（和package.json同级），不要放在src文件夹内
  2. 检查两个配置文件的JSON语法，不要存在多余逗号、括号不匹配等问题，VSCode不会加载语法错误的JSON配置
• 补充Eslint规则配置（可选）
  若开启了import/extensions校验规则，需要在.eslintrc的rules字段添加以下配置，允许省略js/jsx文件后缀：

  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never"
      }
    ]
  }
  

内容的提问来源于stack exchange，提问作者Eric Jansen