Skip to main content Jump to list of all articles

Top 20 Brackets Extensions You Should Use

As a big fan of open source software I was quite excited when Brackets, a code editor, founded by Adobe, was initially released in November 2014. Released for Mac, Windows and Linux and is guided by a community of fans, that are willing to improve and build upon it. Since it’s release I have tested many extensions but here are some of my favourites, for a bonus I’ll throw in the ones that will make Brackets more visually appealing. Star

Brackets Editor Screenshot

Emmet

Improve your HTML and CSS workflow with emmet. Emmet is similar to a snippet manager that you can find in popular code editors except you don’t have to manually add the snippets, especially when working with HTML or CSS. Emmet automatically takes the abbreviations and parses them dynamically. It can also be used with other programming languages.

Example of use html:5 would output the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Learn More

JavaScript & CSS CDN Suggestions

Content Delivery Networks (CDN) are pretty popular among everyone that builds or runs a site as it saves your web server using precious bandwidth loading files like jQuery. This handy extension provides JavaScript & CSS library suggestions for libraries hosted on the CDNs by Google, jsDelivr and CDNJS. No need to Google them anymore!

More Info

Brackets Git

Git is a open source distributed version control system where you can store, contribute and collaborate on projects, scripts etc. from around the world. If you are working with Git then this valuable extension will integrate Git into your brackets environment.

More Info

Color Picker

If you are working with CSS files then having a built-in color picker comes in very handy. Not only can you pick colors if you simply hover over any hex, RGB or equivalent value in your CSS file the color will appear where the cursor is.

More Info

Beautify

Making your files more readable can be time-consuming although following a good practice of organised code is recommended the best practice. Their may be a time when you need a little help and beautify does the job perfectly. Not only does it give you a handy shortcut key to beautify those files Cmd-Shift-L(Mac) / Ctrl-Shift-L(Win) it saves you from having to use an external beautifier on the web.

More Info

Autoprefixer

Brackets extension that parses CSS documents and add vendor prefixes automatically using the Autoprefixer tool which uses the data from Can I Use. This means that you can write your CSS without having to worry about which vendor prefixes you have to include.

More Info

Brackets File Icons Star

Brackets File icons adds small icons (images) to the file tree in your editor which increases visual awareness of the type of file that you are opening.

More Info

Minifier

As with the beautifier this handy extension will save you time having to use an external resource will minify relevant JavaScript and CSS automatically so you can continue to work on the production version and have the file minified automatically ready for your live website.

More Info

Tabs – Custom Working Star

Adds toolbar which include buttons to show/hide with tabs of active documents on the top of the editor, toggle the toolbar and sidebar, add a menu for all open documents and supports multiple panels.

More Info

Todo

If you are working with multiple files at the same time and need to reference one from another then you might insert TODO or NOTE in your code.  Todo will by default recognize C-style comments (but not multi-line comments) using the TODO, NOTE, FIXME, CHANGES or FUTURE.

More Info

CSScomb Brackets

CSS Comb takes your CSS properties and organises it in a way that makes it more functional, beautiful and easier to understand, maintain and read.

More Info

Swatcher

Generate color palettes by importing LESS/SASS files, images or Adobe Swatch files (*.aco, *.ase). Swatcher also comes with a built-in colorpicker.

More Info

Interactive Linter

Interactive Linter runs linters, such as JSHint, JSLint, ESLint, JSCS, CoffeeLint and more while you work on your code and gives instant feedback right on your document. You can get access to the details of the lint report by clicking on the light bulbs on the line gutters to the right of the document, or by using the keyboard shortcut Ctrl-Shift-E on that line.

More Info

Brackets Bookmarks Extension

Another productive extension which adds the feature to bookmark lines of code so you can quickly jump back and forth between sections of code.

More Info

Brackets Outline List

Brackets Extension to display a list of the functions or definitions in the currently opened document. Settings for parameters and anonymous functions. Works with JavaScript, CoffeeScript, CSS, SCSS, LESS, XML, HTML, SVG, Markdown and PHP.

More Info

ClipBox (Clipboard History)

Another simple extension which remembers last few copied texts and allow you to get access to them and paste back when needed. This will capture Ctrl+C keystrokes and store selected text in its own internal array. Then you can invoke the hot-key Ctrl+Alt+V to launch QuickOpen window, select and paste back.

More Info

Extensions Rating

With popularity more extensions are being created, making it very difficult and time-consuming to choose ones that may be beneficial. Extensions rating displays extension statistics based on downloads and GitHub stats.

More Info

LiveReload

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

More Info

Legibility Star

Increase the legibility (font-sizes, line-heights, heights, etc) of UI elements such as the sidebar, dropdown menus, status  bar, vertical toolbar, modal bar, bottom panel and extension modal.

More Info

Minimap Star

Minimap displays a sublime style map of your code within the editor.  Minimap works well 3rd party themes and features such as syntax highlighting, auto hide functionality, quick preview, smooth scrolling and zooming.

More Info

Improve the UI Star

Although brackets is improving all the time if you want to improve the UI even more consider the following extensions/theme.

Conclusion

Do you like brackets or use any extensions that are worth a mention? Please feel free to add your ‘pennies worth’ in the comments section.

3 replies on “Top 20 Brackets Extensions You Should Use”

Avatar of Nigel Francois
Nigel Francois
Nigel Francois On

Please check out my extension – Brackets Website Admin v0.08

Manage your websites with an FTP connection – A work in progress – Keep your eyes open for the updates – N’joy – nigelfrancois@hotmail.com
Keywords: development gui themes ftp wysiwyg admin templates history backup tabs icons draggable cursor

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.