My Editor of Choice: Brackets
As a person who works with code pretty much everyday, the development environment is a very crucial part of my workflow. In an industry where every minute matters, you have to discover the workflow that works for you and allows you to get your job done in as little time as possible. Because of that, I have been looking to extend my workflow tools recently to allow me to get the job done better and faster. One of the tools that I discovered was the infamous Adobe Brackets.
In my journey to find the editor that works best for me, I tried many different editors including but not limited to Sublime Text, Notepad++, Atom, Web Storm, Dreamweaver, and Aptana Studio. All of the mentioned editors are great in their own way and even better than Brackets in some aspects. I also have to mention I tried Brackets a while ago when it was in beta and did not like it very much. It wasn’t very lightweight, was very buggy, and didn’t have many extensions at the time. Because of my previous experience I was hesitant on trying it again, but now I am really glad that I did! Adobe did an incredible job fixing all of the things I didn’t like about it and made it a real powerhouse in the web dev world!
Brackets can be downloaded right now bundled with, or without, Adobe’s “Extract” product which provides, “an easy way to get clean, minimal CSS straight from a PSD with no generated code.”
Why Brackets?
Adobe is an amazing company with even more amazing products! As a huge Adobe Suite user, I have to say that I really do support the company for what it is. They really care about their customers and try to deliver the best products they can. Brackets is no exception.
But supporting the company isn’t really enough for me to change my entire workflow, is it? It isn’t, but because of the fact that Adobe really cares about the users of their products, they try to make great products. Over the course of the beta till now, my experience with Brackets has changed so much and that is only because Adobe listened to what we, as a community, wanted.
Brackets is very closely integrated with other Adobe products as well which is a huge bonus for me. Being able to extract the styles from a Photoshop document and automatically generate CSS is insane and would save so much time in development. I already use Photoshop as part of my workflow so there is no change, just saving time.
The one feature that pushed me to using Brackets as my “Editor of Choice” is the incredible Live Preview. As a front-end developer, There are things like LiveReload that work similar to this, but this is truly live. As I select an element in HTML, it changes in front of my eyes as I type into the editor. This makes working with HTML and CSS much easier and I can bring my designs to life much faster! As a big SASS user, there was the hurdle of processing the SASS into CSS and making live changes, but I got that to work by the help of an extension which I will cover below.
My Must-Have Extensions
What makes Brackets truly incredible and allows it to keep up with the competition is its open-sourceiness! Adobe makes it easy for developers to make and share their Brackets extensions through Github which can easily be installed to enhance the development experience.
There are hundreds of amazing extensions that you can play around with but here are some of my favorites to help you get up and running.
To install any of the extensions below, simply open up Brackets and click the Lego looking block on the right sidebar or select:
File > Extensions Manager > Available
1. Dark Proton Theme
Brackets comes loaded with a beautiful theme out of the box and you can’t go wrong with that! However if that isn’t your taste, a great theme to check out is the Dark Proton Theme!
Coming from Sublime or Web Storm? This will make you feel right at home! Pictures speak louder than words so just see if you like it and you decide what works for you!
2. Brackets Icons
Brackets’ sidebar file tree is nicely laid out, but it would be nice if there was a batter way to differentiate between file types at a simple glance. This is where Brackets Icons comes in!
While we’re on the sidebar, it would be nice if it would just make itself scarce while you’re coding, and reappear with a single click, right? Check out the next plugin to hook you up!
3. Sidebar Plus
This extension is extremely useful for me because I have my second monitor oriented portrait to allow for more vertical screen real estate. This is helpful when working with bigger files as you are able to see much more. The problem is, you lose valuable horizontal real estate.
What this extension does is hide that ever so helpful sidebar when you select the document you are working on. To bring it back, simply click the much smaller bar on the left side. It seems simple and Brackets has a hide/show sidebar shortcut Ctrl+Alt+H, however this seems much more natural and is integrated with my workflow.
Now I have that extra horizontal real estate, but what if I’m working on multiple files? The next extension has you covered!
4. Brackets File Tabs
Coming from other popular editors, Brackets is missing one vital UI element for me, the file tabs listed on the top. Many people argue that just because it isn’t built in makes Brackets unusable. I think that’s a horrible excuse because that is why extensions exist, to enhance the out of the box experience. There is no perfect editor out of the box, you have to make the editor yours by customizing it to your own needs.
Luckily for us open-minded individuals, Brackets makes it super simple to install plugins so we can just add that “missing” feature with only a few clicks.
5. Indent Guides
Another visual element that Brackets lacks out of the box is the tab guides to help you line up your tags. Once again, being the lightweight application that it is, Brackets doesn’t ship with this feature, but this extension does the trick.
With the last few extensions, I have my ideal UI experience from Brackets. Now, let’s add more functionality!
6. Emmet
If you’ve been doing web development for a while, it is more than likely you have stumbled upon the ever so popular plugin called Emmet. What is Emmet you ask? I’m glad you asked! Emmet is a plugin for many of the popular text editors that enhance the HTML and CSS workflow by adding shortcuts and tools to make web development fun and easy!
I have gotten to used to Emmet shortcuts that I’d be lost without it! Who likes opening and closing tags in HTML? Not many people I know, that’s for sure! Just type the tag name and hit tab to automatically generate the opening and closing tag!
h1.lead{Hello World} generates to:
<h1 class="lead">Hello World</h1>.
How awesome is that?! If you want to integrate Emmet into your workflow, read the documentation.
7. Brackets Git
Like to use git in your projects but aren’t a fan of the command-line? Good, we’re on the same page. Brackets has you covered!
This extension strongly integrates Git into the editor by showing you any changes you made, files that haven’t been committed, allows you to work from different branches, and allows you to commit you changes and push them onto the repository! This is the way I think git should be integrated into the editor!
I would even go as far as to say this plugin does it better than Github’s own Atom editor! A bold statement, I know, but my point stands. Huge props to the developer, zaggino, for such an amazing Brackets extension!
8. eqFTP
One feature that not many editors carry but I really appreciate is the ability to navigate an FTP server and edit files on the fly. As insecure as that sounds, this plugin does it really well and allows you set a password in order to access any of your preconfigured FTP servers.
If I ever need to fix any quick problems while the site is already deployed on the server, I can easily use this plugin to access the file and edit right away.
9. Beautify + JS CSS Minifier
These two extensions are pretty self-explanatory. If I ever need to beautify my code so that everything is spaced out evenly, all I have to do is select the area, right click and click beautify! The same works with minifying to move code into deployment manually.
10. Brackets SASS
Before I describe this plugin, I really want to thank Jason San Jose for his contribution. This is an incredible extension that has made working with SASS so much easier!
This extension automatically compiles your SASS files and outputs them into CSS and it even works with the Live Preview feature in Brackets! The caveat is that it isn’t completely live anymore, rather it automatically compiles and loads when you save the SASS file you are working with, but that is as live as you can get with preprocessors.
The way it works is you create a .brackets.json in your project’s root folder and configure the compiling settings. And that’s it! It will do just as you configured. You can see an example with the Bourbon mixin library on Jason’s Github.
Those were just some of the amazing plugins you can install with Brackets. There are hundreds of other great extensions that I haven’t even used, but for now I am happy with my development environment. I can do everything I need to with full confidence that everything works just as I like.
What is your ideal development environment and what extensions do you use? Let me know in the comments.
Signing out!
Hussain