Visual Studio Code Formatting Setup
Our team has multiple software engineers working on the same codebase, formatting code sometimes becomes an issue. Depending on the editor setup, the same code working for one person might be automatically formatted by another, which results in PR often with lot of formatting changes.
The solution is to use the same formatting rules and tools across the team so the code format is standardized.
Since we mainly develop Angular application in TypeScript/HTML/Sass, below I’m going to show you my code formatting setup for those file types.
Also, the underline formatting tool VS Code uses is listed below, so if you are using other editors, you might be able to achieve the same format result.
How to format code
You can format manually or enable format on save.
- To format manually, press
SHIFT+CMD+Pthen type ‘format’, select ‘format document’ or ‘format selection’. Or, just press
- To enable format on save, add this line to your settings:
TypeScript formatting is supported by default.
Underline, VS Code is using js-beautify.
However, imports are not sorted by formatting. We can use “Typescript Hero” extension for us to automatically sort the imports.
- To sort the imports manually, press
SHIFT+CMD+Pthen type ‘imports’, hit
ENTERon the first command.
- To sort on save, add this to your settings:
VS Code has default support for SASS but we can also install ‘Sass Formatter’ extension for better support.
Underline, ‘Sass Formatter’ use ‘sass-convert’ so vim user should be able to achieve the same functionality.
This post belongs to a series “Know your editor: Visual Studio Code”, where it has a collection of Visual Studio Code tips and setup.