JS Beautifier Code Formatting Extension for Brackets

Article by: Raymond Camden

JS Beautifier Code Formatting Extension for Brackets

A few days ago I was asked if Brackets included any formatting features. While there isn’t anything included by default in Brackets (although see my note at the end), there is an excellent community-built extension you can download to add formatting for HTML, JavaScript and CSS.

Beautify is an extension that wraps the open source project, JS Beautifier. This is a great example of how Brackets, being built on web standards, can make use of other libraries to easily extend and add new features.

Once you’ve downloaded and extracted the extension into your Bracket’s extension folder, you’ll get a new command in your edit menu called “Beautify.”

Note that the Read Me for this extension says that you run the formatter by using CTRL-SHIFT-F. Instead the extension is bound to CTRL-ALT-L. (Those of you on Macs would use CMD-ALT-L.)

Here is a quick demonstration of how this extension works:

I’ll point out that another extension exists that does formatting as well – Auto Formatter. This one is interesting as it actually makes use of a feature included in CodeMirror (the core editor library in Brackets).

Leave a Reply

Your email address will not be published. Required fields are marked *