ESLint & Prettier conflict on NuxtJS

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

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 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.