Eslint - Failed to load parser @babel/eslint

Question

I'm trying to set up Eslint and Prettier for my React Project. For this, I choose the Airbnb Rules Set. Now I am stuck at the integration of Eslint and Prettier in my VS Code. It already worked but threw me some weird arrows like:

Unexpected argument :

When defining Types.

I found searched for a solution and hit installing a Parser. So I tried to install @babel/eslint-parser.

But after following this guide I'm getting the following error.

Error: Failed to load parser '@babel/eslint-parser' declared in 'src\.eslintrc.js': Cannot find module '@babel/eslint-parser'

As the error implied that @babel/eslint-parser was missing i tried reinstalling with:

npm i @babel/eslint-parser @babel/preset-react -D

Now I'm left a little bit clueless.

This is my.eslintrc.js

module.exports = {
    extends: ["airbnb", "prettier"],
    plugins: ["prettier"],
    parser: "@babel/eslint-parser",
    parserOptions: {
      requireConfigFile: false,
      babelOptions: {
        presets: ["@babel/preset-react"]
      }
    },
    rules: {
      "prettier/prettier": ["error"],
      "react/jsx-filename-extension": ["off"],
      "react/prefer-stateless-function": ["off"],
      "import/extensions": ["off"],
      "import/no-unresolved": ["off"],
      "indent": ["error", 2]
    }
}; 

Answer 1

I found the Solution by myself. For anyone having a similar issue in the Future. Check your npm packages. The different versions of mine were incompatible and that hindered the usage of babel.

Answer 2

i had the same issue, the package should be installed properly otherwise it does not work as it should, TO FIX IT DO THIS:

npm install babel-eslint --save-dev

DONT FORGET TO "NPM RUN BUILD" AFTERWARD