Developer

Adobe Brackets code editor: A flexible option for frontend web developers

See what the open source web development editor Adobe Brackets has to offer if you're using HTML, CSS, or JavaScript.

bracketsicon.jpg
Image: Adobe

Developers are passionate about their code editors. I use Visual Studio and Atom.io on a daily basis, but I am always on the lookout for new tools that may be better suited to my everyday work. Recently, a fellow developer talked about how much she loved Adobe Brackets (or Brackets as it is often referred), so I decided to take a closer look at the editor.

Get Brackets up and running in minutes

Brackets is an open-sourced web development editor built with web standards, mainly JavaScript. Check out the Brackets GitHub site if you would like to contribute to its development. The Brackets team offers details on setting up your environment to hack Brackets as they call it. In addition, the online documentation provides valuable details on using it to build web applications.

Brackets is available as a free download (there's a download button on the home page) for Mac OS X, Windows Vista and later, Ubuntu and Debian. Installation is as easy as point and click. The troubleshooting page provides installation tips and resolutions to common problems. Figure A shows the basic Brackets interface on my Mac with the filename and/or directory structure on the left and the code pane on the right.

Figure A

adobebracketsfiga021715.jpg
Image: Brackets screenshot by Tony Patton

Brackets offers an easy to use interface.

Build web applications

The power of a code editor is what it offers on top of a standard text editor. The Brackets editor has everything you need for working with files and directories along with creating new files. The code completion — parsing and hints - features allows you to quickly assemble applications without knowing exact syntax. The context menu offers easy access to these tools — right-click on code (HTML, CSS, JavaScript) and the menu shown in Figure B appears.

The Quick Edit option provides assistance with code syntax as well as code options — Figure C shows it in action for selected CSS. It shows the current rule as well as options for selected other rules from other CSS files in the current directory/application. You can create a completely new rule as well; in Brackets terminology, this is called inline editing.

Figure D shows another feature for working with CSS colors: You can slide the selector (red dot) to alter the color. This feature would've been really impressive a few years ago, but this way of working with colors is common with most tools and a lot of web resources these days. A final look at the Quick Edit feature is shown with JavaScript in Figure E; this feature allows you to choose other functions from included JavaScript libraries and create your own. In addition, code hints appear as you are typing new JavaScript — after all, nobody remembers every syntax detail.

Figure B

adobebracketsfigb021715.jpg
Image: Brackets screenshot by Tony Patton

Context menus offer quick access to features.

Figure C

adobebracketsfigc021715.jpg
Image: Brackets screenshot by Tony Patton

Quick Edit for CSS provides an inline editor for rules.

Figure D

adobebracketsfigd021715.jpg
Image: Brackets screenshot by Tony Patton

The color selector/converter provides an easy way to work with CSS colors.

Figure E

brackets-figuree.jpg
Image: Screenshot by Tony Patton
The Extension Manager window allows you to add features.

When working on a project, it is beneficial to see the results of a change as it is made; the live preview feature of Brackets provides this option with the help of the Chrome browser. This is available via the lightning bolt at the top right of the interface just above the brick icon that is visible in Figure A. The live preview opens the current file in Chrome and reflects any code changes you make on the fly. The final icon in the upper right of the Brackets interface facilitates integration with the Adobe Creative Cloud service.

Extend Brackets

The real power of a code editor is the ability to extend it — this is true with Sublime, Atom, Visual Studio, and most popular editors today. Brackets is no different, as it offers a powerful extension framework. There are a number of extensions available — these can be browsed and installed via the Extension Manager from the File menu or by clicking the brick in the upper right corner of the interface (visible in Figure A).

Figure E shows the Extension Manager window; you can easily scroll the list and click the Install button to add that extension to the tool — a good example is the third one shown in Figure E, which adds Git integration. In addition, you can install from a URL or drag a file to the window, as shown in the bottom of the Extension Manager window.

Figure E also shows the Default tab, which displays what is available. The third tab has information on what is installed. The second window allows you to install themes that control the look and feel of the Brackets interface. A final feature that is worth mentioning is its integration with the JavaScript debugger Theseus.

Conclusion

The key to Brackets is it focuses on web development, so it provides coding using HTML, CSS, and JavaScript. You will need to look elsewhere if you're working in other languages or platforms such as Node, Ruby, and so forth.

The Brackets interface is easy to use, and the extensions offer a number of options, including the ability to extend the tool. The live preview option is great, because you get instant feedback on changes.

With my focus beyond web standards development, I will likely stick with my current toolset; however, I recommend Brackets to frontend developers.

Also read

About Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

Editor's Picks

Free Newsletters, In your Inbox