当 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，在选项中找到 Edit in settings.json。

Answer 2

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

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

我尝试过将

requireConfigFile

设置为 false 或在

.eslintrc.js

、

.babelrc

（或 Babel 配置文件）以及

package.json 中的“babel”中创建某种 Babel 配置

，完全没有效果。

方法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中编辑<-click on that

Vs code 将创建一个

.vscode/

文件夹，其中创建了

settings.json

文件。添加这一行：

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

这将告诉 IDE 做什么。

Answer 4

在应用程序中创建一个名为 .eslintrc.js 的文件 并粘贴此代码：

module.exports = {
  extends: 'eslint-config-antife',
  plugins: [
    "babel",
    "html",
  ]
}

Answer 5

在我的小 Vue 应用程序中，

在我的package.json中添加：“requireConfigFile”：false就可以了！

 },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser",
      "requireConfigFile":false
    },
    "rules": {}
  },

Answer 6

我在修改package.json中的一些脚本设置时得到了这个。不确定我犯了什么错误：我刚刚撤消了此文件中的所有输入，然后一切又开始工作了。

Answer 7

再次从 Visual Studio 安装 ES lint。这个问题将会得到解决。首先卸载 ES Lint，然后再次安装 ES Lint。

Answer 8

运行 linter 命令时，请确保您位于项目的正确目录中。这就是我的情况。

Answer 9

这个简单的修复对我有用......

获取babel.config.json的相对路径

右键单击 babel.config.json 文件，然后在上下文菜单中“复制相对路径”，然后将此路径添加到 .eslintrc.js 中我的 configFile

 属性

.eslintrc.js

...
  parser: "@babel/eslint-parser",
  parserOptions: {
    sourceType: 'module',
    babelOptions: {
      configFile: 'aaa/bbb/ccc/babel.config.json' // <- workspace relative path
    }
  },
...

禁用并重新启用插件

然后只需

禁用工作区的 vscode-eslint 插件，然后重新启用它。不再有红色波浪线。

Answer 10

转到您的 .eslintrc.js 文件。在里面你会找到“parserOptions”。

解析器选项：{ //如果这里已有代码，请勿更改。

requireConfigFile: false, //只需添加这一行

},