Best Brackets extensions

If you are a web developer, you are probably familiar with Brackets, an open-source editor written in HTML, CSS and JavaScript. Created by Adobe Systems, Brackets offers a convenient set of features including preprocessor support and great visual tools. In order to get the most out of this text editor, there are some extensions that deserve to be considered. Here are the most useful Brackets extensions available.

Lorem Pixel

There are many cases in which front end web developers need placeholder images. Thanks to Lorem Pixel, you don’t need to try to create a blank placeholder image. This extension allows you to insert a placeholder image of any size needed. One of the best things about Lorem Pixel is that you can select the category for the image. In addition, the placeholder images change whenever you reload the page. There is also a grayscale option that allows you to use black and white placeholder images only. After installing the extension, you will see the Lorem Pixel logo. When you click it, a settings box appears. You can then select the image size and the category that you prefer.

Code Folding

Since Brackets doesn’t include a code folding option, you need to get one. Code Folding allows you to collapse large portions of your code into a single line effortlessly. In order to fold any nested tag, you just need to click on the down arrow located to the left of the parent tag. The same goes for Javascript and other formats. All you need to do is to click on the down arrow to the left of the parent element to fold all the nested statements into a single line. You can expand it by clicking on the + sign. You can easily see folded lines while focusing on the code because the line numbers of the folded lines are hidden.

Documents Toolbar

Brackets doesn’t have tabs but with the Documents Toolbar extension, it is possible to add this practical option to your Brackets experience. All the files in the “active” section of the sidebar appear as tabs in this extension. It is possible to hide the sidebar and use only the Documents Toolbar for a practical interface. You can install the extension and reload Brackets pressing F5.

Autoprefixer

With Autoprefixer, you can save time and avoid hassle since it automatically adds vendor prefixes to your code. It doesn’t require configuration and it updates your prefixes whenever you save your code. Autoprefixer also allows you to choose code and auto prefix if preferred. You can use Autoprefixer by writing prefix-free code. The extension can automatically add prefixed code when you save it. In order to auto prefix some code selected, you need to choose the code and then Edit tab, followed by Auto prefix selection. It is also possible to add custom prefixes in its settings, going to the extension settings, then selecting Edit and Autoprefixer Settings. You can enable the Visual cascade option in the extension settings to get cascaded, prefixed code.

Brackets Todo

This extension displays all TODO comments in an organized list format. It supports 5 tags by default: FIXME, CHANGES, NOTE, FUTURE and TODO. It is possible to mark comments as Done and in the view options you have the possibility of filtering comments by tags. Brackets Todo allows you to define custom colors for tags and your own tags as well, which gives you flexibility to create your own comments. You can also change the scope of Brackets Todo’s search, in case you need to keep track of multiple files. It is also possible to exclude certain files and folders, adding the path in the exclusion list. Brackets Todo offers a good variety of customization options.

Markdown Preview

This plain-text markup language can be easily converted into HTML. It gives the rendered Markdown right below the text version and allows you to select between two options: Standard Markdown and Github Flavored Markdown. You can also choose from three themes available for the preview window: Dark, Light and Classic. This extension also comes with a scroll sync option. Once you get Markdown Preview, you can open a .md or a .markdown file. You will see a button with an M and an arrow pointing down. Click that button to see rendered Markdown. You can change the theme or disable scroll sync by clicking on the gear icon at the top right corner of the Markdown Preview section.

Bracket Icons

You can add a special touch to your code editor using file icons. With Bracket Icons, you will be able to add colorful icons, based on file type to every file listed in the side bar. There are icons for the majority of file types and it is possible to request icons on the Github page. All you need to do is to install the extension and reload Brackets pressing F5. Another icons extension that is worth checking is File Icons.