VSCode by default uses js-beautify to format the code, but not all js-beautify settings can be edited in VSCode
This extension uses either the VSCode settings for the js-beautify configuration or the .jsbeautifyrc.json file. If the .jsbeautifyrc.json file is present in the project root, then the settings from .jsbeautifyrc will be used, if not, then the VSCode settings will be used
Marketplace Visual Studio
Usage
VSCode Settings
Matching VSCode settings to js-beautify settings
You can find VSCode parameters using the search bar in the VSCode settings window
for all:
| js-beautify-parameter | vs-code-parameter |
|---|---|
| indent_with_tabs | editor.insertSpaces |
| indent_size | editor.tabSize #? |
| indent_char | editor.insertSpaces(true - ' ' else - '\t') |
| end_with_newline | files.insertFinalNewline |
| eol | files.eol |
html:
| js-beautify-parameter | vs-code-parameter |
|---|---|
| templating | js-beautify-for-vscode:html.templating |
| extra_liners | html.format.extraLiners |
| indent_handlebars | html.format.indentHandlebars |
| indent_inner_html | html.format.indentInnerHtml |
| max_preserve_newlines | html.format.maxPreserveNewLines |
| preserve_newlines | html.format.preserveNewLines |
| wrap_attributes | html.format.wrapAttributes |
| unformatted | html.format.unformatted |
| wrap_line_length | html.format.wrapLineLength |
css
| js-beautify-parameter | vs-code-parameter |
|---|---|
| templating | js-beautify-for-vscode:css.templating |
js
| js-beautify-parameter | vs-code-parameter |
|---|---|
| templating | js-beautify-for-vscode:js.templating |
| space_after_anon_function | javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions |
| space_in_paren | format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis |
File Settings (.jsbeautifyrc.json)
{
html: HTMLBeautifyOptions,
css: CSSBeautifyOptions,
js: JSBeautifyOptions
}HTMLBeautifyOptions/CSSBeautifyOptions/JSBeautifyOptions are js-beautify settings
JSON Schema: beautifyrc.json
Support for Angular control flow formatting
Set parameters:
- js-beautify-for-vscode:html.templating = ['angular']
- html.format.indentHandlebars = true
