"Parsing error: No babel config file detected" when IDE not open at Vue projects root directory

Question

I stumbled into a problem where in VS Code, when a Vue project is created and not open at root directory of the Vue project, babel.config.js wouldn't load and IDE would be confused as to where the babel config is.

All of my files show an error on the first character of any javascript/vue file reading No Babel config file detected for [#]... or configure babel so that it can find the config files.

Answer 1

Adding the block to settings.json will solve this issue:

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

To access settings.json file, click Ctrl+, or from, File > Preferences > Settings, then type eslint in the search bar, find Edit in settings.json in Options.

Answer 2

https://babeljs.io/docs/en/config-files Babel expects your config file to be at root level, so in order to un-confuse your IDE you need to create an eslint setting for VSCodes extention. Under vscode-eslint settings switch to workspace on the top tab, then scroll to:

Eslint: Options

The eslint options object to provide args normally passed to eslint when executed from a command line (see https://eslint.org/docs/developer-guide/nodejs-api#eslint-class).

Edit in settings.json <-click on that

Vs code will make a .vscode/ folder inside which a settings.jsonfile was created. There add this line:

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

This will tell the IDE what to do.

Answer 3

I got this when I amended some of the script settings in package.json. Not precisely sure what mistake I made: I just undid all typing in this file, and things started working again.