I've been having trouble getting VSCode code formatting to work the way that I want with Typescript files and Vue SFCs. Here is what finally seemed to work for me.
1) Install the official Vue extension Vue.volar
2) Install the Prettier Code Formatter extension esbenp.prettier-vscode
3) Open your user settings.json file (%AppData%\Code\User\settings.json on Windows)
4) Add/change the entries for Vue and Typescript and HTML as follows:
This sets the default formatter for .ts and ..vue files to prettier, and ensures that code is formatted as you type and when it is saved.
The settings outside of the [vue] amd [typescript] sections are applied to all document types, and change the default formatter to pretter, and ensure that at most 1 new line is maintained in the HTML template section of *.vue files.
The key change here is that by default the Vue.Volar extension is used to format .vue files, but I think prettier does a better job - especially at managing empty lines. Prettier formatting also seems to be more configurable.
