David Deraedt

I've been using Brackets (the open source foundation for Edge Code) for some months now, and there's a couple of extensions I simply couldn't live without. Note that, if you're using Brackets and you don't use extensions, you're kind of missing the point altogether.

The architecture of the editor is based on the principle that most features should be implemented as extensions. This is a great way to both keep its core as simple as possible and to ensure it's really deeply customizable, and can eventually fit every web developer's needs.

Brackets comes with some extensions by default, such as Quick Open, Quick Edit and HTML Code Hinting. But the editor still might look kind of limited when considered out-of-box.

That's the reason why the first thing you should do is install some extensions which will take care of some of the basic things you absolutely need as a web developer.

How to install extensions

First a quick reminder: to install extensions, you first need to find them. There's a wiki page over at the project's github keeping track of known extensions, so you should start there.

An extension takes the form of a folder. Most extensions have their own github repository, so to get them you simply need to hit the download button, unzip it, and optionaly rename it as you like.

Then you just have to drop this folder Brackets' user/extension folder --which you have access to from the Help menu-- and reload the tool.

Note that there are two other folders: the default folder contains all extensions provided by default, and the disabled folder contains test extensions or extensions which almost made it to the default folder but did not, such as the InlineImageViewer we'll see below.

Snippets

This extension created by Jonathan Rowny is my absolute must have. It simply allows to use a trigger text with optional parameters and hit Cmd+Alt+V to generate code.

It comes with a default list of HTML and Javascript snippets, but the whole point is that it is customizable. Just open the data folder and edit the html.json and javascript.json, and that's it.

I added custom snippets for things such as jslint/jshint options, AMD and Commonjs modules, and much more.

String Convert

Created by Mike Chambers in the very early days of the Brackets project, the String Convert extension provides a lot of string operations you typically need to use when editing code, such as case conversion, HTML entities encoding, removing trailing whitespaces, and such.

Unfortunately, it does not include any tab-to-space indentation conversion, so Dennis Kehrig and I have created another extension for that particular purpose.

JSHint

This is definitely a matter of preference, but I simply can't stand some of the rules that JSLint -- which is installed by default with Brackets-- tries to enforce, with no option to override. For this reason, I prefer JSHint which is much more customizable.

Fortunately for us, Raymond Camden has created a simple JSHint extension which can replace the default JSlint validator.

ImageViewer

This one is not related to javascript but to HTML: it simply lets you preview an image from within you HTML code, which can be a great time saver.

This extension is provided by default with the editor, but it's in the disabled folder, so all you have to do to enable it is to put it in your extensions/user folder.

My own extentions

To be clear, I do not consider my own extensions as must haves, but I guess this was a good place to include some self promotion. And hey, who knows, you might find them useful too!

• Annotate generates JSDoc annotations for your functions
• Prefixr generates CSS prefixes using the Prefixr API
• TabToSpace converts tabs indentation to space, and conversly
• App Cache Buddy generates and validates app cache manifests
• ToGist generates an anonymous github gist form your selection to share easily

I'll try to create another post soon on how to create your own extensions, but meanwhile you can take a look at my overview of Brackets architecture over at ADC and of course, read the dedicated page on the wiki.