Visual Studio Code Formatting Setup

Andrew Zheng
Mar 11, 2018 · 2 min read
Image for post
Image for post
Photo by chuttersnap on Unsplash

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+P then type ‘format’, select ‘format document’ or ‘format selection’. Or, just press SHIFT+ALT+F
Image for post
Image for post
  • To enable format on save, add this line to your settings: ”editor.formatOnSave”: true

Format TypeScript

TypeScript is supported by default.

Underline, VS Code is using js-beautify.

However, imports are not sorted by formatting. We can use “Typescript Hero” extension to automatically sort the imports.

  • To sort the imports manually, press SHIFT+CMD+P then type ‘imports’, hit ENTER on the first command.
Image for post
Image for post
  • To sort on save, add this to your settings: “typescriptHero.imports.organizeOnSave”: true

Format HTML

HTML formatting is supported by default.

Underline, VS Code is using js-beautify.

Please refer here for settings.

Settings:

"html.format.wrapAttributes": "force-aligned",
"html.format.enable": true,

Format Sass

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.

Settings:

"sassFormat.indent": 2,
"sassFormat.useSingleQuotes": true,

This post belongs to a series “Know your editor: Visual Studio Code”, where it has a collection of Visual Studio Code tips and setup.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store