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.

score 2 · Answer 1 · answered Jun 10 '21 at 08:09

I found a solution, not perfect but it works:

VSCode extensions

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

score 1 · Answer 2 · answered Jun 03 '21 at 08:48

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.

Thanks, I try it but it's not work, I've same problem. The only solution I've found is not really right, I'v add `rules: {'prettier/prettier': ['error', { printWidth: 1000 }],}` in **.eslintrc.js** This works but it's prevent prettier to limit length of lines. — Ewilan R., Jun 06 '21 at 07:14

score 1 · Answer 3 · edited Jan 23 '22 at 17:14

1

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

edited Jan 23 '22 at 17:14

kissu

40,416
14
65
133

answered Jan 23 '22 at 17:10

Masoud

332
2
9

and not working too – Sinneren Oct 12 '22 at 12:46

ESLint & Prettier conflict on NuxtJS

3 Answers3

Linked