VSCode: Auto Format on Save (Prettier)

These are the settings that I use in tandem with ESLint and Prettier.

1. Go to File > Preferences > Settings
2. Search for On Save
3. Under Editor: Code Actions On Save click Edit in settings.json
4. Set the following:

   "editor.codeActionsOnSave": [
       "source.organizeImports",
       "source.fixAll.eslint"
   ]
   

This will organize imports alphabetically (source.organizeImports) and use eslint to fix any auto-fixable errors. Using prettier this will take care of formatting as well.

For organizing imports, I initially was only using source.organizeImports but this was removing the trailing commas on imports which conflicted with my prettier settings. By following it with source.fixAll.eslint, the prettier rules fix this at the same time.

References

• [StackOverflow] Enable trailing comma in vscode