ESLint & Prettier conflict on NuxtJS
Solution 1:
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.
Solution 2:
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.