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

Question

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

我的所有文件在读取任何 javascript/vue 文件的第一个字符时都显示错误 未检测到 [#]...的 Babel 配置文件...或配置 babel，以便它可以找到配置文件。

Answer 1

将块添加到 settings.json 将解决此问题：

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

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

Answer 2

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

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

我尝试过将 requireConfigFile 设置为 false 或在 .eslintrc.js 中、在 .babelrc （或 Babel 配置文件），以及 package.json 中的“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 中编辑 <-单击该

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

转到您的 .eslintrc.js 文件。在里面你会发现“parserOptions”对象。在那里添加 requireConfigFile: false ：

parserOptions: {
   //if there's an existing code here, do not change it.
   requireConfigFile: false, //just add this line
},

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

获取 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 插件，然后重新启用它。不再有红色波浪线。