Here’s The Detailed Adobe Brackets Review You Have Been Waiting For

Anyone working with WordPress or websites in general sooner or later has need for a code editor. Whether for some quick and dirty CSS hacking, modifying or creating page templates or setting up a child theme (for example, for a Divi theme), there are so many opportunities where normal text editors simply don’t cut it.

In our ongoing quest to find the best code editors, we have already looked deeply into Atom and Sublime Text. Both are excellent options. From here, we are moving on to another popular option: Brackets by Adobe.

In the following article, you will learn all there is to know about this code editor. From setup and first impressions to its best features as well as areas where it falls short. Let’s get cracking, shall we?

Setup and First Impressions

Brackets is free to download from the official website and the installation only takes a minute to completely. After that, Brackets takes up about 120MB on your hard drive. That’s about half of what Atom needs but several times the size of Sublime Text. Same goes for startup time which lies somewhere between the two competitors.

There’s a hint that Brackets will periodically send anonymous health reports back to Adobe for improvement. If you need more info, click the link and it will take you to a page with more details (including how to turn the reports off).

The introduction, which is written as an HTML file, contains a warm welcome, details about the editor, feature highlights and first steps. If you have Chrome installed, you might want to click the lightning symbol in the upper right corner to automatically open it in Google’s browser.

This makes it much easier to read (as you can see below). More about this feature further below.

If you want to start your own project, you can go the usual way via File > Open Folder or use the drop-down menu on the left where it says Getting Started. You can also use this button to switch between active projects.

Apart from that, everything is pretty standard. Files and directories are displayed on the left and files open on the right side when clicked. A double click or editing moves them upward to the Working Files section.

So far so clear? Ok, then let’s peek under the hood of Brackets to see what the code editor has to offer feature wise.

Adobe Brackets – The Pros

In this section, we will have a look at the features that make Brackets stand out from the crowd and turn it into a great tool to work with.

Open Source and Cross Platform

Brackets is available for Mac, Windows and Linux and is a project started and maintained by Adobe. However, it’s not a commercial product but rather an open source piece of software licensed under the MIT license.

The editor is relatively young (version 1.0 was published in 2014) and maintained on Github. As an open source effort, anyone is welcome to contribute to both core or via submitting their own extensions. Check the Wiki if you’d like to become a part of the project.

Of course, the biggest benefit for users: Brackets is completely free to use.

Solid Standard Features

The code editor comes with a number of standard features we would expect from a modern piece of software.

First, there is code completion. While typing, Brackets will propose code elements that fit your current input. You can accept the proposal at the touch of a button, which is a nice shortcut to writing everything out completely.

Unfortunately though, as a frontend editor, Brackets only has native support for HTML, CSS and JavaScript (though more can be added via extensions).

Code highlighting, on the other hand, is available for many more languages including Python, Perl, C, C++ and more. PHP works too, which is great news for WordPress users. Code folding rounds off the package for making your code more legible.

Another common feature that Brackets comes with is the ability to split its main window into two parts (both vertically and horizontally). That way, users can view and edit more than one file at once.

Of course, find and replace is also available. No code editor should be without.

Finally, users of pre-processors will be delighted to hear that Brackets fully supports SASS, LESS, SCSS and more including code completion. In fact, when saving your *.less file, the editor will automatically save it in CSS. Good stuff.

Quick Editing

The first unique feature of Brackets is quick editing. When you mark any HTML element and press Cmd/Ctrl + E, Brackets opens all CSS associated with this element inline in the current window.

From here, you can make any edits you need. Once you close it, any changes will automatically be applied to the stylesheet connected with this element. Neat, huh?

In addition to that, this feature comes with a color picker in case you are not sure what hex code stands for which color or want to make changes on the fly. The same function will show you the most used colors in the file you are editing.

Quick editing also works with JavaScript functions. Furthermore, Brackets has JSLint support that will check your JavaScript code upon saving and display problems at the bottom of the screen. In addition to that, there are extensions out there to further enhance the quick edit functionality. More on that soon.

Live Preview

We already saw this nifty feature in the very beginning. With a click on the live preview button (the lightning symbol, remember?), Brackets will open the current file automatically in Google Chrome.

However, not only that. When you move the cursor inside an HTML element inside the editor, it will then also be highlighted in the browser.

That’s not all. When you change something in the code base, it will automatically be pushed to the frontend as well. No need to reload the page, Brackets does it all by itself.

This feature is especially awesome if you work with more than one screen. Currently it only works in Chrome and for HTML and CSS. However, the makers of Brackets have promised to extend it to JavaScript and every major browser in the future.

Highly Extendable

Since the Brackets editor is built with HTML, CSS and JavaScript, it is completely hackable and easy to extend. Plenty of developers have taken advantage of that fact and created extensions that you can either find in the registry or via the extension manager directly inside the editor.

The latter is found in the upper right corner or under File > Extension Manager.

Once opened, the manager will list all available Bracket extensions. Use the search function to find what you are looking for. Once the window is loaded, the search is very quick and extensions download super fast after a click on the Install button.

In addition to that, you have the option to install extensions you downloaded earlier via dragging and dropping them onto the field or providing a URL from which to install.

In the top bar you can also switch to installing themes. These are changed under View > Themes (Brackets only comes with two themes out of the box, one dark, one light) and modify the code display as well as overall UI.

Under the Installed tab you will see all extensions and themes you installed earlier as well as the option to disable and remove them. For a collection of useful Brackets extensions, check this article.

Multiple Cursors

Finally, Brackets has taken a page out of Sublime’s playbook and added multiple cursors as a feature. That means, users can edit several places in the same file at once.

Just hold the Ctrl button to place cursors or mark pieces of code anywhere you want. After that, start typing to make edits everywhere at the same time.

Combined with the Find all and select option, this is super useful and saves a lot of time and effort.

Adobe Brackets – The Cons

Cool stuff, right? Yet, there are also things that Brackets could be doing better.

Frontend Focused

As cool as Brackets is, it is kind of limited in its application. The code editor is clearly made for frontend workers who mostly deal with HTML, CSS and JavaScript.

While it does that exceedingly well, if you are working with anything else, like server-side languages, Brackets might not be the best option for you. However, there are extensions to address this shortcoming, even for WordPress-specific code.

Extension Management Could Be Better

Brackets has a lot to offer in terms of extensions and installing them is quick and easy. However, overall this whole area could use some work.

First of all, the official extension registry is sort of confusing. Everything is in one big list without any filtering options or categories.

At least in the extension manager there is a division between extensions and themes. Yet, overall everything comes down to the search functionality. However, once you have found a suitable candidate, you still need to click through to Github for additional information.

This is clearly more more convoluted than it needs to be and Brackets would do well to look to WordPress and Atom for some inspiration on how to improve the process.

Summing Up

Adobe Brackets is a worthy candidate in our search for the best editors. It is relatively lightweight, slick, easy to use and has most of the functionality users would expect from a modern code editor.

Apart from that, the open source project by Adobe comes with some outstanding features so far not seen anywhere else. Quick editing and live preview are really useful and make frontend work much easier.

An addition to that, the extension manager and wide choice of plugins let users turn Brackets into exactly the development environment they need it to be.

Of course, Brackets is not without shortcomings. However, with its rapid development, chances are good that they will be addressed in the future. If so, Brackets is poised to take a leading position in the code editor industry.

Now over to you. Have you used Bracket before? If so, what did you like the most and where do you see room for improvement? Please let us know in the comment section below so others can benefit from your experience.

Featured image made from graphics via Adobe Brackets’ github page / MIT License