Brackets from Adobe is one of the fastest growing used text editors for web developers. Released just over a year ago, it’s become a great free IDE to code with and I’m finding it preferable to use over Sublime and Atom.
“A modern, open source text editor that understands web design.”
Because it’s relatively new on the scene, some new users may not be aware of it’s fantastic free extensions that can be installed via the Extension Manager within the application itself.
Below is a list of my top 10 recommended extensions (in no particular order) to use for Brackets – all of which are available to install within the Extension Manager.
1. Beautify
Beautify is a useful extension that formats your HTML, CSS and JS code into a neat and clean layout. Sometimes you get so carried away coding, it’s not always easy to keep it neat and tidy. Beautify takes care of all of that and is certainly useful if you’re a neat code freak who loves ordered code like me.
2. Brackets Icons
The default file icons in Brackets leaves a lot to be desired. They are dreary and dull. Thankfully this nifty extension swaps out the default icons for more vibrant, easier to spot icons. Each file extension has a different icon making your website’s folder structure much easier to digest.
3. Color Highlighter
This handy extension highlights your CSS code with the actual colour that is written adding more zest to your CSS code. Yet again, this another feature that should be stock standard in Brackets.
4. Documents Toolbar
Documents Toolbar adds a handy tabbed toolbar with support for various tab colours. It also gives a comprehensive context menu for those tabs so that you can quickly perform a common task quickly such as saving your work.
5. Emmet
Emmet is a well known and popular must-have extension that easily automates syntax, provides dynamic snippets and greatly improves coding speed. It has saved my butt many times in the past.
Something like this:
#page>div.logo+ul#navigation>li*5>a{Item $}
Is quickly and dynamically transformed into this:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
Very handy indeed.
6. Image dimension extractor
This nifty little extension quickly extracts the dimensions (width and height in pixels) of an image or a CSS Background property. Handy if you’re making newsletters and coding an image-intensive HTML page.
7. Interactive Linter
Of all extensions mentioned here, this would rank very very high as a necessity. Linters in text editors are nothing new, but Interactive Linter for Brackets is one of the best I’ve seen yet. It’s unobtrusive, fast and does an excellent job and watching out for coding errors.
8. Minimap
If you ever wanted Brackets to look and behave more like Sublime Text Editor, Minimap would be a great starting point. The awesome minimap feature of Sublime is available to Brackets via an extension and it works just as well.
9. Right Click Extended
This basic extension doesn’t do much apart from adding a few additional, yet much needed functions to the right-click menu like the ability to Cut, Copy and Paste. Why these basic functions are missing from the core of Brackets is a little weird, but this extension makes up for that.
10. Reasonable Comments
Commenting is a workflow process we should all be doing for easier readability of future code. This extension simpifies commenting by automating the comment block to extend dynamically as you press enter.
Brackets 1.0 by Adobe was initially released on the 4th November 2014. It’s actively developed and is available for free on Windows, Mac and Linux. It’s open source, supports extensions and themes and has a Live Preview feature. At the time of writing Brackets version 1.5 is latest available version.