ESLint & Prettier conflict on NuxtJS - visual-studio-code

Question

When I create a new Nuxt.js project, I've a really exhausting problem with ESLint and Prettier.
If I save on this .vue file, Prettier try to fix it but ESLint prevent it to do this. So, I can't remove errors on this.
My eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'#nuxtjs',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: [],
// add your custom rules here
rules: {},
}
My .prettierrc
{
"semi": false,
"singleQuote": true
}
My settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": true,
}
I don't modify ESLint and Prettier files generated.
I suppose the problem come to my VS Code settings, ESLint settings or Prettier. I try some solutions but nothing works.
EDIT
If you have this problem, I advice you to uninstall Visual Studio Code and cache... to reinstall it with fresh install.

Answer 1

I found a solution, not perfect but it works:
VSCode extensions
ESLint on VSCode
Prettier on VSCode
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true
},
extends: [
'#nuxtjs',
'plugin:nuxt/recommended',
'eslint:recommended' // <- add this line
// 'plugin:prettier/recommended', <- remove this line
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {},
plugins: [
'prettier'
]
}
settings.json into VS Code
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.probe": [
"javascript",
"javascriptreact",
"vue"
],
"editor.formatOnSave": false,
"editor.codeActionsOnSave": [
"source.formatDocument",
"source.fixAll.eslint"
],
"vetur.validation.template": false,
// ...
}
package.json
{
// ...
"devDependencies": {
"#nuxtjs/eslint-config": "^6.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/tailwindcss": "^4.0.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.7.0",
"postcss": "^8.2.8",
"prettier": "^2.2.1"
}
}
Close and open again VS Code to reload rules or reload your window
I think problem come to VS Code settings with some ESLint conflicts with Prettier. It's not THE solution, it's just a solution. If you have any other to offer, I'm really interested.

Answer 2

ESLint rule sometimes confilicts with prettier rule. Try moving 'plugin:prettier/recommended' after 'plugin:nuxt/recommended' in .eslintrc.js to overwrite ESLint rule nuxt provides.
According to eslint-config-prettier's doc:
Then, add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.
And eslint-config-prettier is used by eslint-plugin-prettier:
This plugin ships with a plugin:prettier/recommended config that sets up both the plugin and eslint-config-prettier in one go.

Answer 3

Best compatible for Nuxtjs (2022) .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/essential',
'#nuxtjs',
'plugin:prettier/recommended',
'prettier',
],
parserOptions: {
ecmaVersion: 12,
parser: '#babel/eslint-parser',
sourceType: 'module',
},
plugins: ['vue'],
rules: {
'vue/multi-word-component-names': 'warn',
'no-unused-vars': 'warn',
'space-in-parens': 'off',
'computed-property-spacing': 'off',
'max-len': 'warn',
},
}