VSCodeBeautify

by HookyQR

Enable js-beautify (https://github.com/beautify-web/js-beautify) in VS Code

491 Stars 156 Forks Last release: over 4 years ago (v0.1.3) MIT License 221 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

js-beautify for VS Code

Build Status Build status Licence VS Code Marketplace Rating Downloads Installs Donate

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. When not using a multi-root workspace:

    1. If there is a valid
      .jsbeautifyrc
      in the file's path tree, up to project root, these will be the only settings used.
    2. If an option is a file path or object of configuration specified in the user or workspace settings like this:
      "beautify.config" : "string|Object."
      , these will be the only settings used. The file path is interpreted relative to the workspace's root folder.
    3. If there is a valid
      .jsbeautifyrc
      in the file's path tree, above project root, these will be the only settings used.
    4. If there is a valid
      .jsbeautifyrc
      in your home directory, these will be the only settings used.
  2. When using a multi-root workspace: Same as above, but the search ends at the nearest parent workspace root to the open file.

otherwise...

  1. Settings are translated from your VS Code workspace/user settings.
  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
tabsize editor.tabSize
indentwithtabs (inverted)_ editor.insertSpaces
wraplinelength html.format.wrapLineLength
wrapattributes html.format.wrapAttributes
unformatted html.format.unformatted
indentinnerhtml html.format.indentInnerHtml
preservenewlines html.format.preserveNewLines
maxpreservenewlines html.format.maxPreserveNewLines
indenthandlebars html.format.indentHandlebars
endwithnewline html.format.endWithNewline (html)
endwithnewline file.insertFinalNewLine (css, js)
extraliners html.format.extraLiners
spaceafteranonfunction javascript.format
.insertSpaceAfterFunctionKeywordForAnonymousFunctions
spacein_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 html 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 control which file types, extensions, or specific file names should be beautified with the

beautify.language
setting.
{
  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautifyrc"]
      // "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.

Beautification on particular files using the built in Format Document (which includes formatting on save) can be skipped with the

beautify.ignore
option. Using the
Beautify file
and
Beautify selection
will still work. For files opened from within the workspace directory, the glob patterns will match from the workspace folder root. For files opened from elsewhere, or when no workspace is open, the patterns will match from the system root.

Examples:

/* ignore all files named 'test.js' not in the root folder,
   all files directly in any 'spec' directory, and
   all files in any 'test' directory at any depth
*/
"beautify.ignore": ["*/test.js", "**/spec/*", "**/test/**/*"]

/* ignore all files ending in '_test.js' anywhere */ "beautify.ignore": "**/*_test.js"

Note that the glob patterns are not used to test against the containing folder. You must match the filename as well.

Embedded version of js-beautify is v1.8.4

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"
}

Contributing

For information on contributing see Contributing.md

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.