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> Content Delivery Networks (CDN) are pretty popular among everyone that builds or runs a site as it saves your web server using precious bandwidth loading files like jQuery. This handy extension provides JavaScript & CSS library suggestions for libraries hosted on the CDNs by Google, jsDelivr and CDNJS. No need to Google them anymore!
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 Cmd-Shift-L(Mac) / 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 adds small icons (images) to the file tree in your editor which increases visual awareness of the type of file that you are opening.
As with the beautifier this handy extension will save you time having to use an external resource will minify relevant JavaScript and CSS automatically so you can continue to work on the production version and have the file minified automatically ready for your live website.
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 TODO, NOTE, FIXME, CHANGES or FUTURE.
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.
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 Extension to display a list of the functions or definitions in the currently opened document. Settings for parameters and anonymous functions. Works with JavaScript, CoffeeScript, CSS, SCSS, LESS, XML, HTML, SVG, Markdown and PHP.
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.
Although brackets is improving all the time if you want to improve the UI even more consider the following extensions/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.
Welcome to Hot Web Dev November 2024, featuring the latest technology and web development news.… Read More
Welcome to Hot Web Dev October 2024, featuring the latest technology and web development news.… Read More
In this tutorial, you’ll build a fun and interactive guessing game using Svelte 5, the… Read More
Welcome to Hot Web Dev September 2024, featuring the latest technology and web development news.… Read More
The JavaScript guessing game tutorial is a simple beginner's project. It features modern JavaScript syntax… Read More
If you have been following the monthly Hot Web Dev magazine you will find the… Read More
View Comments
Please check out my extension – Brackets Website Admin v0.08
Manage your websites with an FTP connection – A work in progress – Keep your eyes open for the updates – N’joy – nigelfrancois@hotmail.com
Keywords: development gui themes ftp wysiwyg admin templates history backup tabs icons draggable cursor
Wow, thank you! Didn't even know that Brackets had these abilities. :)
thank you