ESLint: Invalid Options when create-next-app

Question

I'm creating a new Next.js application. When i run yarn create-next-app and i start to write javascript code inside Visual Studio Code, the ESlint extension throw back an error every time i digit. And, naturally, eslint doesn't work.

The error is:

ESLint: Invalid Options: - Unknown options: env, parserOptions, rules - 'parserOptions' has been removed. Please use the 'overrideConfig.parserOptions' option instead. - 'rules' has been removed. Please use the 'overrideConfig.rules' option instead.. Please see the 'ESLint' output channel for details.

This is the image for an immediate visual recognizing:

Eslint extension error on Visual Studio Code

This is my package.json file (the default package.json given by Next.js):

{
  "name": "myApp",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7"
  }
}

Thank you for your help.

Answer 1

Solved on my own by wrapping the content of eslint.options into the overrideConfig in my settings.json VSCode file, like this:

"eslint.options": {
    "overrideConfig": {
      "env": {
        "browser": true,
        "es6": true
      },
      "parserOptions": {
        "ecmaVersion": 2019,
        "sourceType": "module",
        "ecmaFeatures": {
          "jsx": true
        }
      },
      "rules": {
        "no-debugger": "off"
      }
    }
  },