Earlier last week, Adobe launched v1.0 of their new lightweight open source modern text editor, Brackets, for web designers and developers.

The result of 45-odd releases over the past 3 years, Adobe have continued to build up the feature set of Brackets, adding tools and features that were considered to still be missing by its faithful army of testers.

It probably seems a bit weird getting so excited over essentially a basic, geeky, text editor, but the clever contributors who worked on this v1.0 release have done a great job in building on the quality, lightweight established coding alternatives already out there like Sublime and Atom.

Brackets can be downloaded right now bundled with, or without, Adobe's "Extract" product which provides, "an easy way to get clean, minimal CSS straight from a PSD with no generated code."


My must-have extensions

The hallmark of any decent open-source software is the ability to create, and quality of, the extensions developed for it. Luckily Brackets has, over time, built up a quality library of Github-based extensions that you can easily install to enhance your coding experience.

You can keep an eye on what's popular and what's new in both extensions and themes for Brackets on the Brackets Extensions Weekly site. In the meantime, however, here's my list of "must-have" extensions to get you started.

To access and install any of the following, simply open Brackets and select:

File > Extensions Manager > Available

1. Get your themes on

The default light and dark themes that come bundled with your Brackets download may not be everyone’s cup of tea.

For me, and many others, the tried and true Monokai Dark Soda theme is the perfect replacement and the one that makes hours of staring at lines of code a whole lot more bearable.


2. Brackets icons

Brackets' sidebar file tree is nicely laid out, but it would be nice if there was a batter way to differentiate between file types at a simple glance. This is where Brackets Icons comes in.


3. Autosave files on window blur

Does what is it says on the box – autosaves your files when you switch application windows. Works beautifully in tandem with Brackets' "Live Preview" feature.

Compose your code, switch to your live preview browser window and your changes are there ready to view – no ctrl+s required. It's the little things...


4. Brackets Beautify

There's nothing sweeter than clean, accurately tabbed, semantic code. With a lot of cutting and pasting of code, however, it's not always easy to achieve beautiful code on the fly.

Tapping into the power of the popular js-beautify beautifier, this gem of an extension cleans up all your HTML, CSS and JavaScript code every time you save your files. Magic.


5. Brackets file tabs

Coming to Brackets from Sublime, the ability to have a number of files open and tabbed across the top of the screen was always going to be a non-negotiable, simply from a "what I am used" to point of view.

Brackets doesn't have this feature by default, so this tabs extension saves the day.


6. Indent guides

One of the nice visual aids that I had at my disposal in Sublime was the vertical indent or tab guides they included to help you line up your tags.

Once again, being the lightweight application that it is, Brackets doesn't ship with this feature, but this extension does the trick.


7. Trailing spaces

We should always be doing what we can to reduce the file size of our coded files. Trailing spaces, believe it or not, can add significant, avoidable size to your files.

It's hard to detect where the trailing spaces are, however, so this extension helps make the invisible... visible!


8. W3C Validation

For those of you who care deeply about W3C valid code, this is the extension you want to get hold of and install.

It gives you a subtle indication if all is well, or if there are issues that require attention. These current issues may then displayed in a pop-open panel.


It's always nice to get some consistency going with the icons in your dock, so if you've already made the leap to OSX Yosemite, you can grab a number of great looking icons I have found, including the "Brackets" icon I used in the lead image above.

Links & Credits