Posted on January 5, 2017 by Nick Schäferhoff in Resources |
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
Cool stuff, right? Yet, there are also things that Brackets could be doing better.
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.
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.
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.