Enable js-beautify in VS Code
JavaScript Other
Latest commit ab40f8d Jan 5, 2017 Hooky Fix force-aligned in schema

README.md

js-beautify for VS Code

Build Status Build status Licence VS Code Marketplace Rating Installs

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

For help on the settings in the .jsbeautifyrc see Settings.md

How we determine what settings to use:

  1. If there is a valid .jsbeautifyrc in the file's path tree, these will be the only settings used.
  2. If there is a valid .jsbeautifyrc in your home directory, these will be the only settings used.

otherwise...

  1. Settings are translated from your VS Code workspace/user setttings.
  2. Any open editor settings (indent spaces/tabs) for the specific file are merged in.
  3. Editorconfig settings are searched for (See http://editorconfig.org/) and are merged in.

VS Code | .jsbeautifyrc settings map:

.jsbeautifyrc setting VS Code setting
eol files.eol
tab_size editor.tabSize
indent_with_tabs (inverted) editor.insertSpaces
wrap_line_length html.format.wrapLineLength
unformatted html.format.unformatted
indent_inner_html html.format.indentInnerHtml
preserve_newlines html.format.preserveNewLines
max_preserve_newlines html.format.maxPreserveNewLines
indent_handlebars html.format.indentHandlebars
end_with_newline html.format.endWithNewline
extra_liners html.format.extraLiners
space_after_anon_function javascript.format
.insertSpaceAfterFunctionKeywordForAnonymousFunctions
space_in_paren javascript.format
.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis

Note that the html.format settings will ONLY be used when the document is html. javascript.format settings are included always.

Also runs http and css beautify from the same package, as determined by the file extension. The schema indicates which beautifier each of the settings pertains to.

The .jsbeautifyrc config parser accepts sub elements of html, js and css so that different settings can be used for each of the beautifiers (like sublime allows). Note that this will cause the config file to be incorrectly structured for running js-beautify from the command line.

Settings are inherited from the base of the file. Thus:

{
  "indent_size": 4,
  "indent_char": " ",
  "css": {
    "indent_size": 2
  }
}

Will result in the indent_size being set to 4 for Javascript and HTML, but set to 2 for CSS. All will get the same indent_char setting.

If the file is unsaved, or the type is undetermined, you'll be prompted for which beautifier to use.

You can contol which file types, extensions, or specific file names should be beautified with the beautify.language setting.

Note: This used to be controlled by the beautify.*Files settings. If you still have those settings in your configuration, you'll be told that they're deprecated. Note that you may have to fix your global and project settings before the notification stops.

{
  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautify"]
      // "ext": ["js", "json"]
      // ^^ to set extensions to be beautified using the javascript beautifier
    },
    "css": ["css", "scss"],
    "html": ["htm", "html"]
    // ^^ providing just an array sets the VS Code file type
  }
}

Beautify on save will be enabled when "editor.formatOnSave" is true.

Embedded version of js-beautify is v1.6.8.

Keyboard Shortcut

Use the following to embed a beautify shortcut in keybindings.json. Replace with your preferred key bindings.

{
  "key": "cmd+b",
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}