In a previous post, VS Code: You don't need that extension part 2, I discussed how you may not need an extension for (prettily) formatting your code (see item 5). You can use the built-in formatters for a number of languages. However, at that time, the advice I gave came with some caveats.

VS Code has builtin formatters for HTML, JavaScript, TypeScript, and JSON. This is a decent basis for frontend developers and JavaScript-oriented backend developers. However, there was nothing for CSS and CSS-like syntaxes. A big omission in my opinion!

This has been rectified in v1.66 (March 2022). The built-in CSS extension now ships with a formatter. The formatter works with CSS, LESS, and SCSS. It is implemented using the JS Beautify library. 🌟

Settings for languages with builtin formatters

To use the builtin formatters, you can add the following settings to your Settings.json:

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript][javascriptreact][typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json][jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"[css][scss][less]": {
    "editor.defaultFormatter": "vscode.css-language-features"
}

This is using the multi-language syntax that was added in v1.63.2, in November 2021.

Since VS Code uses the JS Beautify library under the hood, which is also used by the Beautify extension, you can expect similar results to that extension. This may or may not to your taste, but it does a solid job.

Your mileage may vary for the formating of JSONC, it is asking the JSON Language Features extension to deal with “illegal” comments, but it appears to manage without issues. I don’t use React, so I can’t comment how well React code is formatted.

Settings added to control the formatting of CSS, LESS, and SCSS

You configure how the formatting is done with the following settings:

• css.format.enable - Enable/disable default CSS formatter.
• css.format.newlineBetweenRules - Separate rulesets by a blank line.
• css.format.newlineBetweenSelectors - Separate selectors with a new line.
• css.format.spaceAroundSelectorSeparator - Ensure a space character around selector separators '>', '+', '~' (for example, a > b).

The same settings also exist for Less and SCSS. Maybe more of JSBeautify's configuration options will be exposed later on. We will see, I guess!

Final word

For frontend developers and JavaScript-oriented backend developers, the builtin formatters should have you covered now. As long as you happy with the output, then you may not need another formatting extension.

And since, many language support extensions are also formatters e.g. Python, Language Support for Java by Red Hat, Ruby, YAML, XML Tools, Vetur for Vue, and Svelte for VS Code. Now, it is easier than ever to forgo using a dedicated formatter extension! 🆒

Feel free to subscribe to my RSS feed, and share this article with others on social media. 💌

You can show your appreciation by buying me a coffee on ko-fi. 🙂