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
相关产品推荐
相关产品推荐

