You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

VS Code中ESLint扩展报错:无法找到模块'@babel/preset-react'

问题描述

团队项目使用ESLint,所有成员都安装了VS Code的ESLint扩展。部分成员使用正常,但我和其他几位成员遇到报错:Parsing error: Cannot find module '@babel/preset-react'。

项目未在本地安装@babel/preset-react和@babel/core作为开发依赖,且我们不想安装这些包(此前查到的解决方案都推荐安装)。尝试全局安装这两个包后问题仍未解决,推测是ESLint配置或依赖识别问题,但无法确定。希望在不修改项目包依赖及.eslintrc文件的前提下解决该问题。

项目结构
project
 - client folder
    - package.json (client)
    - .eslintrc file
 - server folder
 - package.json (server)
 - server.js
当前.eslintrc配置
{
  "extends": "airbnb",
  "parser": "@babel/eslint-parser",
  "root": true,
  "env": {
    "browser": true
  },
  "parserOptions": {
    "requireConfigFile": false,
    "babelOptions": {
      "presets": ["@babel/preset-react"]
    }
  },
  "rules": {
    "semi": ["error", "never"],
    "max-len": [2, 120, 2, { "ignoreComments": true }],
    "no-nested-ternary": 0,
    "no-confusing-arrow": 0,
    "arrow-parens": [2, "as-needed", { "requireForBlockBody": true }],
    "no-mixed-operators": 0,
    "react/jsx-props-no-spreading": 0,
    "react/no-this-in-sfc": 0
  }
}
解决方案

以下是无需修改项目依赖和配置文件的解决方法:

  • 配置VS Code ESLint扩展使用全局依赖:打开VS Code设置(快捷键Ctrl+,),搜索ESLint: Use Global Eslint并勾选,确保扩展调用你全局安装的ESLint及相关依赖。
  • 指定全局依赖路径:先通过npm root -g获取全局node_modules路径(如C:\Users\你的用户名\AppData\Roaming\npm\node_modules或/usr/local/lib/node_modules),再在VS Code设置中搜索ESLint: Node Path,填入该路径。
  • 调整ESLint工作目录:由于.eslintrc在client文件夹下,可在VS Code设置中搜索ESLint: Working Directories,设置值为["client"];或者直接将client文件夹单独添加到VS Code工作区(文件→添加文件夹到工作区)。
  • 补全全局依赖:确保全局安装所有必要依赖,执行命令:
    npm install -g @babel/core @babel/preset-react @babel/eslint-parser eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y
    

内容的提问来源于stack exchange,提问作者David Nachimov

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.14 06:45:50