I can't get prettier and eslint to play nicely in my vue / nuxt project

Question

I keep having a problem with ESLint and prettier. It happened several times now that they have conflicting rules and the autoformat on save of one will throw an error on the other.

My problem at the moment is this line, which has been formatted by ESLint:

<v-card outlined min-width="105" :style="{ backgroundColor: cCodeWaterTemp }">

Then prettier throws this error:

  88:16  error  Replace `·outlined·min-width="105"·:style="{·backgroundColor:·cCodeWaterTemp·}"` with `⏎··········outlined⏎··········min-width="105"⏎··········:style="{·backgroundColor:·cCodeWaterTemp·}"⏎········`  prettier/prettier

Basically saying I should change it into this format

    <v-card 
    outlined 
    min-width="105" 
    :style="{ backgroundColor: cCodeWaterTemp }"
    >

Which ESLint will then again change on save. How can I configure them to have consistent, non conflicting rules? I went through a few tutorials and at the moment my configuration files look like this

Settings.json:

{
"window.zoomLevel": 0,
"vetur.validation.template": false,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.completion.scaffoldSnippetSources": {
    "workspace": "",
    "user": "",
    "vetur": ""
},
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"git.autofetch": true,
"[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
}

eslintrc.js:

module.exports = {
    root: true,
    env: {
      node: true,
      browser: true,
    },
    rules: {
      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    },
    globals: {
      $nuxt: true,
    },
    parserOptions: {
      parser: 'babel-eslint',
    },
    extends: [
      'plugin:vue/recommended',
      'eslint:recommended',
      'prettier/vue',
      'plugin:prettier/recommended',
      'prettier',
    ],
  }},
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended',
    'prettier',
  ],
}

and editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  }
}

Any help would be welcome! Cheers

Answer 1

In case someone is stumbling across this looking for an answer, I have figured it out by now. I read that the "extends" part inside eslint should be last so no rule in there gets overwritten. Further, I needed to teach eslint a few tricks regarding vue and prettier which results in this eslint file:

module.exports = {
root: true,
env: {
  node: true,
  browser: true,
},
rules: {
  'vue/component-name-in-template-casing': ['error', 'PascalCase'],
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
globals: {
  $nuxt: true,
},
parserOptions: {
  parser: 'babel-eslint',
},
extends: [
  'plugin:vue/recommended',
  'eslint:recommended',
  'prettier/vue',
  'plugin:prettier/recommended',
  'prettier',
  'plugin:vue/base',
],
}

Now i just needed to tell the editor that he can correct code on save (.editorconfig):

  {
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
  }

And here we go. They play nicely for now. I found these pages to be a big help:

Style Guide to find what's wrong

Code page to enable the given set of rules in ESLint