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

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