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.
Solved on my own by wrapping the content of esling.options into 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"
}
}
},
This may be obvious to most, but I wanted to add one caveat. The above config fix works, but make sure you do it at the user level as well as the workspace level. If the eslint.options json doesn't have the overrideConfig at the user level config it will continue to error. Sorry if this is obvious, but I just spent the last hour trying to understand why I was continuing to get the invalid options error despite adding the above solution until I realized I was making the change in the workspace only. Hopefully this can save someone a headache.