|
Visual Studio Code has built in formatters for TypeScript, C# and Go, but I want formatters for html, scss and javascript as well.
Visual Studio Code provides a formatting API, so other developers can create formatters for programming languages. There is a great blog article on how to write a formatter Extension. Check it out!
I dont want to write my own formatter, so I use js-beautify for this.
I also want my formatters to follow code-style-rules provided in a .editorconfig
file, as my company uses these files for linting and formatting regardless of the used editor.
Before we are getting started
- Disable all Visual Studio Code Extensions that could format your code. Certain Language Packs for Css/Scss, JavaScript or HTML could Overwrite your settings.
Step 1: Meet js-beautify
to format all the things
- Add the needed binary with
yarn global add js-beautify
- Trust and use
js-beautify
for all your formatting when using the approach described here.
Step 2: Meet editorconfig
to rule them all
- EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
- The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.
- EditorConfig files are easily readable and they work nicely with version control systems.
Find out more about editorconfig here.
- Add the needed binary with
yarn global add editorconfig
Step 3: Install Visual Studio Code Extensions
- Install the Visual Studio Code Extension EditorConfig for VS Code
editorconfig.editorconfig
. - Install the Visual Studio Code Extension Beautify
hookyqr.beautify
. - They will use the binaries you just installed with
yarn
.
Step 4: Enable Beautify as Default Code Formatter
- Open the Visual Studio Code Settings.
- Search for
format
in Settings Search Pane - Select
HookyQR.beautify
from the dropdown menu.
How js-beautify
is deciding on what rules to use
- If there is a valid
.jsbeautifyrc
in the file's path tree, up to project root, these will be the only settings used. - an option is a file path or object of configuration specified in the user or workspace settings like this:
"beautify.config" : "string|Object.<string,string|number|boolean>"
, these will be the only settings used. - If there is a valid
.jsbeautifyrc
in the file's path tree, above project root, these will be the only settings used. - If there is a valid
.jsbeautifyrc
in yourhome
directory, these will be the only settings used. - Settings are translated from your VS Code
workspace/user
settings. - Any open
editor settings
(indent spaces/tabs) for the specific file are merged in. - Editorconfig settings are searched for (See http://editorconfig.org/) and are merged in.
As I want js-beautify
to use the rules declared in .editorconfig
I make sure to avoid to declare rules in .jsbeautifyr
files or other Visual Studio Code settings.