ESLint & Prettier conflict on NuxtJS

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.

3 Answers

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.

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.

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', }, }