Useful @Brackets extensions for Web Developers

Written on May 02, 2014

Since a while, Brackets has become my new default HTML/JavaScript/CSS-Editor.

If you didn't hear about Brackets, until now -- here's a screenshot for you:

Brackets

You may have found this post as you have might have been searching for useful Brackets extensions for the Web Developer, so lets go ahead ;)

And of course, this list is permanently work in progress, so revisit it as often as you can...

  • Brackets-Themes -- A theme manager with a huge set of themes like Visual Studio, Monokai, you name it.
  • brackets-beautify - Extension that formats open HTML, CSS, and JavaScript files using js-beautify.
  • ZoomView for Brackets -- Adds a zoom indicator on the bottom left of the editor.
  • Emmet (available in the Extension Manager, just search for it) -- ZEN Coding support using http://emmet.io/
  • Code folding for Brackets -- code folding based on brace ({}, []) matching and multiline comments for javascript, json, css, php and less files. Also has some support for html and xml files based on tag matching.
  • Brackets Snippets (Video) - (available in the Extension Manager) -- allows you to insert snippets using shortcuts (use CTRL+ALT+SPACE instead of CTRL+ALT+V as shown at the GitHub readme). There's also a settings dialog under View > Show Snippets.
  • Surround for Brackets -- Provides an easy way to surround a selection with HTML-Tags etc.

To install these extensions, just click the Extension Manager Button:

Openning the Brackets Extension Manager

Then search for an extension or click the "Install from URL..."-Button and paste the URL of the GitHub-Repo of the extension.

Install Brackets extension from URL