Blog

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:

The video cannot be shown at the moment. Please try again later.

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).

17 Responses


17 Comments

  1. urHelper says:

    visit http://codebeautify.org/
    it is one of the good javascript online editor provide.
    and many other functionalities are provide by codebeautify.

  2. James says:

    Thanks urlHelper http://codebeautify.org/ very nice tool

  3. Minify Code says:

    Just more suggestion tools to beautify
    JavaScript http://minifycode.com/javascript-beautifier/
    CSS http://minifycode.com/css-beautifier/
    and HTML http://minifycode.com/html-beautifier/
    These are fast and easy to use!

  4. Thanks to Brackets, I find myself in love with front-End web-development.
    Good Job !

  5. Tom says:

    This works well enough, except there’s no option to indent with spaces :(.

    • Tom says:

      Never mind, being a new user, I wasn’t aware that the code was being indented with spaces (it’s just when you navigate using the keyboard, the cursor jumps just as if you had used tabs).

  6. Jimmi says:

    Thanks urlhelper, this looks like a very good tool for developer. http://codebeautify.org/

  7. Rafael says:

    I did not get hit with this extension. Every time I indento by the command, the head and the body are in the HTML tag level. What can it be?
    Thanks!

  8. Desislava Slavkova says:

    Do you plan to support beautifying of LESS files as well anytime soon? I can’t seem to find anything that works with less files without breaking them..

  9. Mike McGuire says:

    Can the formatting be customized to suit one’s tastes? If so, how is that done?

  10. longqi says:

    wa oh, so cool , I like it,
    It will be better if you can change the “tab” to “spaces”

  11. Alex says:

    Is it compatible with .editorconfig?

  12. Shafiqul says:

    Hi
    It is working html,css,javascript but in php it make problem. Suppose $_SESSION make it $ SESSION. Please update it
    Thanks

  13. Al says:

    how to get the indentation with tabs? (width 2)

    I already edited several config files in the brackets-beautify folder, that didn´t work.
    (set all indent_with_tabs = true )

  14. It’s great .. but i think i have an issue ..

    when i save the page it still not saved .. and i have to click CTRL + S a lot of times ( maybe 3 or 4 ) ..
    Did anyone elese faces this issue ?

  15. skc15 says:

    Is there a way to make this automatically beautify a file upon opening it?

  16. David Mart says:

    It brakes my php … very sad. I love brackets but it is impossible to work without auto indenting…

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*


− three = 4