|

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 your home 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.

See this ruleset on Github

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.