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

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.

With 'vue/max-attributes-per-line': 'off' the rule is disabled so VSCode does not try to fix the long line on autosave. Other eslint fixes are applied, as expected.

With 'vue/max-attributes-per-line': 1 VSCode fixes only one error per save. This is a known limitation of vscode-eslint

vscode-eslint only does a single pass in order to keep to a minimum the amount of edits generated by the plugin. The goal is to keep as many markers (like break points) in the file as possible.

VSCode has a time limit of 1 second for all the plugins to compute the change set on save. If one of the plugins causes the other plugins to not run for 3 times in a row, it will be disabled.

eslint --fix runs all the rules in a loop until there are no more linting errors. I think it has a limit of 10 iterations maximum.

See these links for more details:

• https://github.com/Microsoft/vscode-eslint/issues/154

I've created a minimal setup to demonstrate this issue:

• https://github.com/kenjiru/vscode-eslint-onsave-issue

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.