当 IDE 未在 Vue 项目根目录打开时，出现“解析错误：未检测到 babel 配置文件”

Question

我偶然发现了一个问题，在 VS Code 中，当创建 Vue 项目并且未在 Vue 项目的根目录中打开时，babel.config.js 将无法加载，并且 IDE 会混淆 babel 配置的位置。

我的所有文件在任何 javascript/vue 文件读取的第一个字符上都显示错误 No Babel config file detected for [#]... or configure babel so that it can find the config files.

Answer 1

添加块将settings.json解决这个问题：

"eslint.workingDirectories": [
        {"mode": "auto"}
 ],

要访问settings.json文件，请单击Ctrl+,或 从“文件”>“首选项”>“设置”，然后在搜索栏中输入 eslint，在“选项”中找到“在 settings.json 中编辑”。

Answer 2

有两种方法可以解决这个问题，对我来说100%有效。

我正在使用react.js。但我成功解决了这个问题。我认为这个解决方案会对您有所帮助。

我尝试过将其设置为 false 或在、（或 Babel 配置文件）中以及在 中的“babel”中requireConfigFile创建某种 Babel 配置，但都没有效果。.eslintrc.js.babelrcpackage.json

方法 1 - 将此代码添加到 .eslintrc.js 中

.eslintrc.js

"parser": '@babel/eslint-parser',
"parserOptions": {
    "requireConfigFile": false,
}

方法 2 - 安装此软件包@babel/core

npm i --save-dev @babel/core

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Answer 3

https://babeljs.io/docs/en/config-files Babel 期望您的配置文件位于根级别，因此为了避免混淆您的 IDE，您需要为 VSCodes 扩展创建一个 eslint 设置。在 vscode-eslint 设置下切换到顶部选项卡上的工作区，然后滚动到：

Eslint：选项

eslint 选项对象提供从命令行执行时通常传递给 eslint 的参数（请参阅https://eslint.org/docs/developer-guide/nodejs-api#eslint-class）。

在 settings.json 中编辑<-单击它

vs code 将创建一个.vscode/文件夹，在其中settings.json创建文件。添加这一行：

{
    "eslint.options": {
        "configFile": "\\ABSOLUTE\\PATH\\TO\\YOUR\\PROJECT\\VUE_PROJECT\\babel.config.js"
    }
}

这将告诉 IDE 做什么。