The 20 Best Brackets Extensions for Front End Developers

As requested by our developer community, we’ve put together a list of the top Brackets extensions. In this article, you'll learn how to get the most out of this small but mighty editor, optimize your workflow, and adjust the color scheme of the UI with some of our favorite themes as well.

Developers are often on the lookout for different text editors to introduce into their workflow, and we've previously looked at which extensions can be adopted for users of VS Code, Sublime, and Atom. Today, we're turning our attention to Brackets extensions.

Brackets is one of the less known text editors, but its users are quite passionate about its ease of use, and adaptability.After hearing about Brackets from Ciarán Oglesby, founder of Oglesby Media, I decided to try it out for myself, and see how it compares with my usual editor of choice, VS Code. For the full experience, I even decided to write this article in Brackets, and used it on some recent theme customization projects to get a feel for how it works in a practical coding context. 

In this article, I’ve highlighted my top picks for Brackets extensions that will help developers working on Shopify themes and apps to optimize their workflow and get the most out of this small, but mighty editor. I've also included some of my favorite themes for adjusting the color scheme of the UI to personalize the experience even further.

A quick introduction to Brackets

Brackets is created by Adobe, so there is an expectation that this editor should be visually appealing, and have an intuitive UI. As Ciarán notes: "Brackets is lightweight and very simple to use, which means I can usually get the job done quicker. I also prefer the UI. For me it’s easier on the eyes." 

Ciaran also finds Brackets helpful with some Shopify theming projects. "I do a bit of theme customizing here and there with Brackets. Mostly, this involves redesigning headers and footers, customising product pages, or creating sectioned page templates."

Because it's so lightweight, this means that many of the features you might find in more advanced editors like VS Code are not part of the core offering. This is where the library of extensions comes in, which allows you to expand the basic functionality of Brackets to accommodate your requirements, as well as personalize your workflow so that it fits your style. 

How to install Brackets extensions

It's relatively easy to search for, and install extensions on Brackets. The block sidebar button will open up the extension manager where you can search for available extensions, enable or disable installed extensions, and even install one from a URL or zip file. 

You can also search by popularity too, which is a great way to quickly see what are some of the most popular extensions that are being used by the Brackets community. Each of the entries links out to a GitHub repository where you can learn a bit more about the extension, which is often helpful for any troubleshooting that’s required. 

Once you've installed an extension, you may need to reload Brackets for it to take effect, which you can do easily with the CMD + R or CTRL + R shortcut. Many extensions will introduce their own keyboard shortcuts and menu options, so remember to take note of the additions you see in the top menu.

The 20 best Brackets extensions and themes

Here are my picks for the 20 best Brackets extensions and themes.

1. Liquid Syntax Highlighter

The Liquid Syntax Highlighter is potentially the most helpful extension for Shopify developers who are working with theme files. As you might expect, this extension applies an appealing color scheme to Liquid objects and tags, that makes working with Liquid files easier. This is an essential tool to use when working with Theme Kit to edit theme files locally. 

2. Autosave Files on Window Blur

It's easy to get distracted from a coding project when you need to check your email or respond to a Slack message. The Autosave Files on Window Blur extension reduces the chance of losing any file changes during these trips by triggering a save for any open files whenever you move away from the Brackets editor, or click on another window.

You might also like: The 20 Best Visual Studio Code Extensions for Front End Developers.

3. Emmet

Emmet is an invaluable code snippet and shortcut toolkit used by front end developers across a range of editors. Emmet helps to set up HTML and CSS faster with the use of snippets, and it enables users to easily and quickly perform a range of different tasks through its intuitive shortcuts. Highly recommended!

4. Right Click Extended

Brackets’ library of extensions often enables some basic functions that are missing from the core program, like the ability to access cut, copy, and paste options from a right click. For anyone who doesn't use keyboard shortcuts, Right Click Extended will be a welcome addition. It also highlights the resourcefulness of the Brackets developer community—if something you need is missing from Brackets, it's likely that there's an extension to solve the issue.

5. White Space Sanitizer

Keeping your code clean with the logical use of indentation is key not only when working on collaborative projects, but also to maintain your own sanity, especially for those larger theme files with tons of nested elements. The White Space Sanitizer will trim trailing white spaces and ensures an extra newline at the end of each file. This extension is also great when teamed up with Show Whitespace to help you create a manageable visual representation of your code.

6. Brackets Git

A modern text editor will need a robust integration with Git if it's going to be useful for developers, and the Brackets Git extension does not disappoint. To make Brackets Git work you'll need to have Git installed on your computer, and once setup, you'll have an easy way to commit and create PRs for Git repos. 

7. Markdown Preview

Markdown Preview is an incredibly useful tool if you're working with markdown files and want to see a live preview of your page while you're editing the files. As you type and add different syntaxes, you'll be able to view how these will appear on a page, which makes it super easy to spot any issues before you publish anything online. 

8. ES Lint

This extension comes pre-installed with Brackets. But, it's worth calling out for its ability to statically analyze your code to quickly find problems, as well as make automatic fixes. 

9. Any Template

This extension allows you to create your own library of code templates that you can use as starting points when working on a theme project. The Any Template tool is especially helpful for developers who use alternative templates for collection or product pages. Additionally, you can create basic section file templates for different theme components like featured products, or featured blog posts.

10. Can I Use

Brackets’ Can I Use extension connects with Caniuse, and enables developers to check if a specific feature or element is supported by a range of different browsers and devices. Simply highlight an element of your code, use the shortcut to open the extension, and the tool will automatically display info from caniuse.com. This is especially helpful for ensuring that your theme customizations will work as expected on the various browsers that buyers use to view Shopify stores.

11. Beautify

Another extension that exists across a range of different text editors, Beautify will format open HTML, CSS, and JavaScript files to ensure formatting is correct. Brackets' Beautify can be run manually on the whole file or on a selection of code using the toolbar button.

You might also like: The 25 Best Sublime Text Plugins for Front End Developers.

12. Code folding

The ability to selectively hide and display code, known as code folding, is actually enabled via a default extension of Brackets. This allows developers working on larger files to focus only on the sections of code that they are working with, by hiding, or folding, parts of code they don't need.

13. Lorem Ipsum

Everyone's favourite placeholder text, Lorem Ipsum, can be accessed from this extension that allows you to quickly and easily insert sample text into a file. You can also add options to the lorem command and specify wrapping, sentence length, hyperlinks, and more. 

14. Tab to Space 

Make indentation a little bit easier and more consistent with Tab to Space, which converts tab based indentation to space based indentation, or vice versa. No matter your preference for tabs or spaces, this extension has you covered.

15. Brackets Cursor

Brackets Cursor unlocks a range of different cursor settings, including switching the cursor to block style, and adjusting its color to make it much more visible. It's the little things in life! 

Now if you're spending a lot of time using your text editor, it's important that the color scheme makes it easy to read. The different themes for Brackets allow you to apply specific colors to the UI which not only improves readability and usability, but adds a bit of flair and personality to your workflow. 

Themes can be searched for and installed from the same extension installers, by navigating to the Templates tab. Once installed, you can apply these new themes by selecting View on the top menu and clicking on Themes, which will bring up the Themes Settings window. 

16. 808 theme

The color scheme for the 808 theme is inspired by the iconic Roland TR-808 drum machine, adopting its four main colors in a minimalist format. 

You might also like: The 21 Best Atom Packages for Front End Developers.

17. Mystique

A theme that is very easy on the eyes, Mystique has been pieced together over the years by a Brackets user and features light colors.

18. Ruby Blue

Ruby Blue is a vivid style that echoes videogames of the past and brings a retro feel to the editor.

19. Star Platinum

Inspired by a Japanese manga series, Star Platinum is one of the easiest themes to read and a personal favorite of mine. 

20. Material Dark

Borrowing from Googles' Material Design, this is a dark theme that applies an intuitive color scheme to your code. 

Customize your workflow

It's sometimes helpful to try out a new editor and customize it to work around your needs. There are hundreds of other helpful Brackets extensions that could support your workflow. If you're already using this editor, make sure you check them out, and if you're new to Brackets, hopefully this article has given you some helpful tips for using this lightweight editor. 

What are your favorite Brackets extensions? Let us know in the comments below.