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.
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>
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.
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.
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
Ctrl-Shift-L(Win) it saves you from having to use an external beautifier on the web.
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.
Brackets File Icons
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.
Tabs – Custom Working
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.
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
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.
Generate color palettes by importing LESS/SASS files, images or Adobe Swatch files (*.aco, *.ase). Swatcher also comes with a built-in colorpicker.
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.
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.
Brackets Outline List
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.
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.
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.
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.
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.
Improve the UI
Although brackets is improving all the time if you want to improve the UI even more consider the following extensions/theme.
- Brackets File Tree
- Brackets UI Theming Enabler
- Indent Guides
- Show Whitespace
- Visible Tabs
- Stripper (Clean UI Redo) Theme
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.