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

by

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.

Leave a Comment