Brackets Extensions

Hi guys! Without further ado, let check out the free extensions for Brackets. Most of them are awesome. Stay tuned! 😉

Beautify
Beautify Brackets extension makes your code look good. Not only does it make your files more readable, but it also gives you a handy shortcut key to beautify those files — CMD-Shift-L (Mac) and Ctrl-Shift-L (Win). JavaScript code can be consistently formatted and made more readable using Beautify.

Autoprefixer
Autoprefixer is a postprocessor for dealing with vendor prefixes in the best possible way. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules. All you have to do is to add it to your asset building tool. Autoprefixer cleans outdated prefixes as well.

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

Minifier
Minifier minifies JavaScript and CSS files in brackets and saves them as filename.min.ext
To minify a file, use the keyboard shortcut CMD+M or Ctrl+M. It compresses files and saves your time as it minifies the relevant JavaScript automatically so you can continue to work and have the file minified and fully ready for deployment.

ToDo
ToDo is 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, you may mark tasks as done.

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

Bracket Gits
Bracket Gits is an extension for Brackets editor that provides Git integration for Brackets. It is tested and works on any platform supported by Brackets (Windows, Mac OS X, and GNU/Linux). Bracket Git is easily the best among similar Brackets extensions as it lets you easily commit changes from Brackets itself, as well as push and pull changes with a single click.

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

Swatcher
Swatcher generates code hints and color palettes by mporting via LESS/SASS files, images or Adobe Swatch files. It supports all color related functions, such as rgba().
Swatcher also comes with a built-in color picker of its own.

Lorem Pixel
Lorem Pixel is a Brackets extension that can be used to generate placeholder images. It is simple and free of cost. It lets you insert beautiful placeholder images of any size. Lorem Pixel also gives you a grayscale option to use only black and white placeholder images.

Color Picker
Color Picker appears to be handy if you are working with CSS files. It can help you pick colors within minutes right within Brackets.

Brackets Outline List
Brackets Outline List 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.

HTML Skeleton
HTML Skeleton is a collection of a set of tags required by every HTML webpage you build. The tags that make up the skeleton tell browsers what kind of file it is reading and without the skeleton, HTML files will not be rendered correctly in web browsers. This is a must-have extension if you regularly use HTML to build pages in Brackets.

HTML Wrapper
HTML Wrapper is a Brackets extension that formats nav and select tags with a single command. You can use it by selecting a list of items encapsulated by the desired tag, and then run the command.

Live Reload
Live Reload is a Brackets extension that monitors changes in the file system. It keeps track of the changelog of your project files, and is refreshed automatically.

CSSLint
CSSLint is a Brackets extension that can enable CSS linting support. CSSLint makes use of Bracket’s built-in linting system. It shows errors with a yellow warning icon, and if there are no errors, a green icon is displayed instead.

JavaScript and CSS CDN Suggestions
Brackets CDN extension lets you work with CDN services. As you already know, a Content Delivery Network (CDN) saves your web server resources by loading files via cloud servers.

Brackets Bookmarks
Brackets Bookmarks extension provides functionality to bookmark lines in Brackets. Bookmarks are serialized and remembered globally. This extension lets you add bookmarks to file and close the file. When you reopen the file, Brackets will restore the bookmarks.

Interactive Linter
Interactive Linter integrates with linters such as JSHint, JSLint, ESlint, JSCS, CoffeeLint, and more. As you work on your code, this extension gives instant feedback right in the document. You can access the details of the lint report therein, and then work accordingly.