VS Code - You don't need a formatting extension (Prettier and friends)
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.
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:
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!
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! 🆒