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).
17 Comments
visit http://codebeautify.org/
it is one of the good javascript online editor provide.
and many other functionalities are provide by codebeautify.
Thanks urlHelper http://codebeautify.org/ very nice tool
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!
Thanks to Brackets, I find myself in love with front-End web-development.
Good Job !
This works well enough, except there’s no option to indent with spaces :(.
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).
Thanks urlhelper, this looks like a very good tool for developer. http://codebeautify.org/
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!
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..
Can the formatting be customized to suit one’s tastes? If so, how is that done?
wa oh, so cool , I like it,
It will be better if you can change the “tab” to “spaces”
Is it compatible with .editorconfig?
Hi
It is working html,css,javascript but in php it make problem. Suppose $_SESSION make it $ SESSION. Please update it
Thanks
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 )
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 ?
Is there a way to make this automatically beautify a file upon opening it?
It brakes my php … very sad. I love brackets but it is impossible to work without auto indenting…