Top 15 Brackets Extensions (for 0.42+)

August 5th, 2014

I’ve been really loving Brackets lately. I hesitantly made the switch from Sublime Text 2/3 a couple months ago and it was quite a rocky start. I expected as much, as I was getting in on the ground floor so to speak since Brackets is still very much a work-in-progress editor that gets monthly updates. I found that I had to do a lot of editing to Brackets to get it to feel the same way and keep the efficiency I had going in my workflow with Sublime Text.

I originally decided on the switch because the development of Sublime Text has been pretty stagnant and third-party support was dwindling. I also loved all the new features in Brackets including the ability to change pretty much any aspect of the editor to my liking using their robust extension system which runs directly from CSS/HTML/JavaScript, things I already know how to work with.

Luckily, even though I made my own small changes (in the form of extensions), there was plenty of third-party extensions as well.

Preview of what my Brackets editor looks like.

I can truthfully say that Brackets is now my preferred editor by far. Keep in mind, my work primarily deals with WordPress, PHP, MySQL, JavaScript, HTML5, and CSS. Here’s what I am currently using as of version 0.42 (in no particular order):

Brackets Icons

Adds some nice colored icons beside each supported file type in the project panel. Makes navigating through a large project quite a bit more easier.

Minifier

Minifies JavaScript and CSS files and saves them in the standard filename.min.extension format using UglifyJS2 (for JavaScript) and YUI (for CSS). You can also set it up to automatically minify on save.

Extensions Rating

If you are an extension junky like me, this extension is for you (wow, that sounded lame). Allows you to sort extensions, displays avatars from Github, displays useful statistics including downloads, stars, forks and more. With this extensions it’s easy to see the most trending and popular extensions out there.

Interactive Linter

The Github page sums it up perfectly: Brackets integration with JSHint, JSLint, and CoffeeLint! Interactive Linter runs linters as you work on your code and gives instant feedback right on your document. You can access the details of the lint report by clicking on the light bulbs on the line gutters.

A must have for any JavaScript development.

Monokai Dark Soda

I was a big fan of Sublime’s Monokai Dark Soda theme. Luckily we can get it back in Brackets using the new theme system which was introduced in 0.42. It’s my preferred dark theme as it’s not too dark and provides tons of contrasting colors and is very context sensitive for JavaScript/CSS work.

White Space Sanitizer

On a document save, this extension makes sure all your indents are the same and respects what ever setting you choose (spaces/tabs), trims trailing whitespaces, and ensures a newline at the end of your file. This saves a lot of time of manually converting indenting due to copy and pasting.

VisibleTabs

Sometimes I can forget what type of indents I am using on a certain project. This is a small visual reminder for me. Since I am using also White Space Sanitizer, this not a huge deal, but still useful for me.

Indent Guides

Shows a solid (or dotted) line for all indentations. A nice visual guide for keeping your indentation consistent.

CSSLint

Kind of like Interactive Linter, but with CSS instead. There’s unfortunately no warning icons available for display in the gutter with this extension; instead, it has uses a dialog system to view any CSS-linting issues. It’s quite strict by default, but you can edit some of the parameters.

Extensions Toolbar Reposition

A mash-up of some nice improvements. Moves the toolbar to the bottom of the editor, removes a bit of space so the scrollbar is flush with the right side and allows you to hide any extension icons.

Proper Indent

Work on multiple projects with different indent settings? This extension will automatically switch to tabs or spaces in the Brackets options – whatever is most prevalent in the current document.

Match Highlighter

One feature that I’ve been missing since my days of using Notepad++ is the highlighting of selected words/selections through the current view/document. Kind of like a fast search. Great for doing multiple replacements with Bracket’s multiple cursor support.