Developers are often scouting out for different code editors to inject into their workflow, in past posts on here I’ve previously posted extensions for users of VS Code but Today I’m showing some love to the users of Brackets with some extensions.

Brackets is one of the lesser-known code editors, but its users are considerably enthusiastic about its ease of use, and flexibility.

It has been created by Adobe, so there’s an expectation that the editor should be visually captivating, and that has an intuitive user interface.

Brackets is lightweight, which means that many of the features you might find in more advanced editors like VS Code. This is where a library set of extensions comes in, which can expand the basic functionality of Brackets to support your requirements, as well as personalise your workflow.

How to install Brackets extensions

It’s almost easy to search for and install extensions for Brackets. The block sidebar button will open up the extension manager where you can search for any extensions, enable or disable those installed extensions, and also install from a URL or a zip file.

Within extension manager, you can search by popularity, which is a great way to see what are some of the popular extensions that is used by the Brackets community.

Once you have installed an extension, you may need to reload Brackets so the extension can take effect, which is easy to do. Whether you are Mac user using the CMD + R shortcut or if you are a Window user using CTRL + R shortcut.

In today’s post, I’ve added some Brackets extensions that will help front-developers working to optimise their workflow and get the most out of this code editor.

1. Brackets Todo

ToDo is a Brackets extension that displays all To-Do comments in the current document or project. By default, it supports five tags; ToDo, Note, FixMe, Changes and Future to keep track of your team’s progress, and you may mark tasks as done.

Your tasks can be sorted so that done tasks can be moved to the bottom of the list by checking that option in the settings dialog. The ToDo extension lets you define custom colours for tags, as well as your own tags if you want to get creative with your comments.

2. Any Template

The Any Template extension allows you to create your own library of code templates that you can use as starting points when working any project.

This extension is particularly helpful for developers who use alternative templates for apps. Also, you can create basic section file templates for different site components like such as blog post, sidebar, featured products, etc.

3. Can I Use

The 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 browsers and devices. Just highlight the bit of your code, use the shortcut to open the extension, and the tool will automatically display info from caniuse.com.

4. AutoSaver

Brackets have a system in place to remind you when to save changes before closing the app. But sometimes yo plain old forget to save your edits which can be annoying when you are constantly reviewing your changes.

With this extension comes into play where you can save a bit of extra time goes into hitting the save function as this tool will automatically save every change you make to your documents.

A reminder just make sure to keep an original copy of your files before editing the files.

5. WordPress Hints

For the WordPress developer, this extension will help you as it will help make sure that you always follow the proper WordPress coding structure.

WordPress Hints is an extension that shows hints related to WordPress core functions while you write code for themes and plugins for WordPress. The extension supports advanced custom fields functions and WooCommerce functions.

6. Swatcher

This Bracket extension is for those who are working with colour, as it will much easier to do so. Swatcher is a tool that quickly generates colour palettes from images, swatch files and even LESS and SASS files. The extension allows you to generate different colour and create a unique palette when you write CSS.

7. Emmet

Emmet helps improve your HTML and CSS workflow by letting you type in CSS-like expressions which can be dynamically parsed and produce output according to what you actually typed in the abbreviation.

The abbreviations resemble like CSS selectors but are parsed in run-time and turned into a structured code block with just a single keypress. Once you learn the abbreviations, it is a great way to speed up your workflow.

8. Brackets File Icons

Brackets File Icons extension adds file icons to the file tree. It supports files such as JavaScript, HTML, MP4, CSS, PNG, and JSON. You can spice up your code editor with file icons by adding colours to your icons based on your file type to all files listed in your side bar, also post icon requests on the GitHub page.

9. Custom Working Tabs

When working with a lot of documents all at once, the section can easily get crowded and making thing a bit confusing but with this extension it make it easy to browse your documents and folders.

10. Markdown Preview

Markdown Preview is an useful extension if you are working with markdown files and wanting to see a live preview of your page while you are editing the files.

As you type and add different syntaxes, you will be able to view how these will appear on a page, which makes it super easy to spot any problems before publishing anything online.

11. Beautify

This extension exists already on a wide range of code editors, Beautify will format open HTML, CSS, and JavaScript files to ensure formatting is correct. Brackets’ Beautify extension can be run manually on the whole file or a selection of code using the toolbar button.

12.  Lorem Ipsum

Lorem Ipsum, can be accessed which 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.

13. Tab to Space

With this Tab To Space extension, it will make indentation a bit easier and more consistent, this extension converts tab-based indentation to space-based indentation or vice versa. No matter what your preference for tabs or spaces, this extension has got you covered.

14. Brackets Outline List

The Brackets Outline List extension can be used to display a list of the functions or definitions in the currently opened document. It works with JavaScript, CoffeeScript, CSS, SCSS, LESS, XML, HTML, SVG, Markdown and PHP.

15. Brackets Git

Any good modern text editor will need a robust integration with Git if it is going to be useful for developers. The Brackets Git extension does not fail. To make Brackets Git work you will need to have Git installed on your computer, and once set up, you will have an easy way to commit and create PRs for Git repo’s.