Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier

Question

in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can\'t get vue/max-attributes-per-line to auto-fix correctly.

For example, with vue

Answer 1

I bumped into the same issue, and surprisingly found that prettier and vetur were conflicting. I had to disable vetur formatter and it now works as expected.

If you have this section in your editor's settings.json and you have prettier installed,

{
 "[vue]": {
     "editor.defaultFormatter": "octref.vetur",
  },
}

chances are, these two formatters are conflicting and thus the unexpected behaviour.

A quick workaround is to comment it as below, or simply delete it permanently.

{
 "[vue]": {
     // "editor.defaultFormatter": "octref.vetur",
  },
}

Answer 2

This is the setup I ended up going with in VSC settings.json file.

Works perfectly for locally set up eslint disabling the default vetur settings (if the plugin is installed).

  "files.autoSave": "onFocusChange",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx" ]
  },
  "eslint.validate": [
    "html",
    "javascript",
    "vue"
  ],

Answer 3

I've struggled through a similar problem. I tried the solution above but didn't work for me, unfortunately. I'm using eslint and Vetur, didn't install prettier plugin but configured it via eslint and enabled "eslint.autoFixOnSave": true. I finally got the correct autoformat on save by removing the following configuration in settings.json. Not sure why but it's working for me.

  "eslint.options": {
    "extensions": [".html", ".js", ".vue", ".jsx"]
  },
  "eslint.validate": [{
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ]

Will update this answer if I get other issues related to this.

Answer 4

Short answer: I needed: "editor.formatOnSave": false, "javascript.format.enable": false.

I finally found the magical combination of settings, thanks to this thread from Wes Bos on Twitter. I was right in my suspicion that there seem to be multiple conflicting formatters. Though I'm not sure what they actually are, I was able to turn off all but eslint as follows:

In the VS Code settings, I need:

  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx" ]
  },
  "eslint.validate": [
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true },
    { "language": "javascript", "autoFix": true },
    { "language": "javascriptreact", "autoFix": true }
  ]

In .eslintrc.js, then I can use the settings in my original post and then also change 'vue/max-attributes-per-line' as desired. Then VS Code's ESLint plugin will format code one step at a time on every save, much as kenjiru wrote. One last snag: HMR won't pick up these changes, so rebuild from scratch.

Answer 5

I know this is old but in case anyone should find this and not have success with the posted solutions, the fix for me was to add:

"editor.codeActionsOnSave": {
   "source.fixAll": true
}

I did not need "editor.formatOnSave": true for some reason. I do not have Prettier installed - only ESLint - but this now performs any fixes automatically when I save.

Answer 6

i tried this things and it didn't worked.

typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,

but it at last i tried this. and worked "diffEditor.wordWrap": "off",