Goodbye Sublime, hello Brackets!

Goodbye Sublime, hello Brackets!

EARLIER last week, Adobe launched v1.0 of their new lightweight open source modern text editor, Brackets, for web designers and developers.

The result of 45-odd releases over the past 3 years, Adobe have continued to build up the feature set of Brackets, adding tools and features that were considered to still be missing by its faithful army of testers.

It probably seems a bit weird getting so excited over essentially a basic, geeky, text editor, but the clever contributors who worked on this v1.0 release have done a great job in building on the quality, lightweight established coding alternatives already out there like Sublime and Atom.

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.”

DOWNLOAD BRACKETS  

My must-have extensions

The hallmark of any decent open-source software is the ability to create, and quality of, the extensions developed for it. Luckily Brackets has, over time, built up a quality library of Github-based extensions that you can easily install to enhance your coding experience.

You can keep an eye on what’s popular and what’s new in both extensions and themes for Brackets on the Brackets Extensions Weekly site. In the meantime, however, here’s my list of “must-have” extensions to get you started.

To access and install any of the following, simply open Brackets and select:

File > Extensions Manager > Available

Select a theme that's right for you.

1. Get your themes on

The default light and dark themes that come bundled with your Brackets download may not be everyone’s cup of tea.

For me, and many others, the tried and true Monokai Dark Soda theme is the perfect replacement and the one that makes hours of staring at lines of code a whole lot more bearable.

Monokai Dark Soda  
Enhance your file tree with some nifty icons.

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 Bracket 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 Sidebar Plus to hook you up with this feature.

Brackets icons  

3. Autosave files on window blur

Does what is it says on the box – autosaves your files when you switch application windows. Works beautifully in tandem with Brackets’ “Live Preview” feature.

Compose your code, switch to your live preview browser window and your changes are there ready to view – no ctrl+s required. It’s the little things…

Autosave files on window blur  

4. Beautify

There’s nothing sweeter than clean, accurately tabbed, semantic code. With a lot of cutting and pasting of code, however, it’s not always easy to achieve beautiful code on the fly.

Tapping into the power of the popular js-beautify beautifier, this gem of an extension cleans up all your HTML, CSS and JavaScript code every time you save your files. Magic.

Beautify  
Brackets tabs in action.

5. Brackets file tabs

Coming to Brackets from Sublime, the ability to have a number of files open and tabbed across the top of the screen was always going to be a non-negotiable, simply from a “what I am used” to point of view.

Brackets doesn’t have this feature by default, so this tabs extension saves the day.

Brackets file tabs  
Indent guides for easy visual guidance.

6. Indent guides

One of the nice visual aids that I had at my disposal in Sublime was the vertical indent or tab guides they included 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.

Indent guides  
Code overview for easy visual guidance.

7. Code overview

You have hundreds, if not thousands of lines of code in the one document and you want a way to quickly jump to sections of that code using some kind of visual guide?

Done. Install the Code overview extension.

Code overview  
Highlight trailing spaces so you can eliminate them!

8. Trailing spaces

We should always be doing what we can to reduce the file size of our coded files. Trailing spaces, believe it or not, can add significant, avoidable size to your files.

It’s hard to detect where the trailing spaces are, however, so this extension helps make the invisible… visible!

Trailing spaces  
Validate your code, W3C style.

9. W3C validation

For those of you who care deeply about W3C valid code, this is the extension you want to get hold of and install.

It gives you a subtle indication if all is well, or if there are issues that require attention. These current issues may then displayed in a pop-open panel.

W3C validation  

 See also: Replacement OSX Yosemite Dock Icons

It’s always nice to get some consistency going with the icons in your dock, so if you’ve already made the leap to OSX Yosemite, you can grab a number of great looking icons I have found, including the “Brackets” icon I used in the lead image above.

34 Comments

  1. matt says:

    Thanks for the info. Working on switching to Brackets. I did find that “3. Autosave files on window blur” has the wrong link, should be https://github.com/martypenner/brackets-autosave-files-on-window-blur

  2. Matt2 says:

    Thanks for the list – I do a lot of WordPress development. Is there a good extension like sublime sftp for synching files with a server?

  3. Adam says:

    Looks good! Immediately I’m wondering if it has the ability to step through classes and methods, see variable values etc. For so long I’ve wished Sublime did this. There’s always WebStorm IDE, but it’s nowhere near as snappy. Will def give Brackets a try.

    • MΛSΞY says:

      Yeah, I haven’t come across anything like that at this point mate, but it doesn’t mean it doesn’t exist. Have a good look through the extensions index once you get in there.

  4. alexis says:

    Do you think Brackets is good for simple html + css + js mockups. Or could it be also efficient for more complex html integration mixing html + php + wordpress and more ?
    I’m worried that Brackets is not as good as sublime for this kind of «complex» structure. Let me know what you think.

    • alexis says:

      Any answer ?

      • MΛSΞY says:

        Thanks for your question Alex. Personally, I haven’t had occasion to test out the app in the sort of situation you have proposed, other than working with WordPress, so I don’t know how qualified I am to offer you an answer on that one.

        Why don’t you download it and give it a go for yourself? It’s free – the only thing it’s going to cost you is a bit of your time to test it out.

  5. SqTH says:

    I’m impressed.

    Flattred

  6. jcamachott says:

    Hi, I see the title is Goodbye Sublime, Hello Brackets but I don’t see a reason for switching. Can you say (or even maybe write another article) why you chose Brackets over sublime?

    Thank you.

    • MΛSΞY says:

      Well, for me personally, Sublime is SO basic in its UI that it restricts its use to the hard-core back-end coders out there.

      Front-end coders appreciate, in a world of “designing in the browser”, being able to review their code as they tweak it. This brings Brackets’ “Live Preview” feature into the argument.

      I feel Brackets’ extensions browser/installer is easier to use too. It assisted me greatly in compiling the post that you read.

      But these are MY opinions. You will have your own and that’s great!

  7. Great post! Thank you for sharing. I would also suggest the extension “Display Shortcuts” which can show the short cuts in Brackets. https://github.com/redmunds/brackets-display-shortcuts or simply find it in the extension manager using “Display Shortcuts”.

  8. Oh, and this page shows how you can setup keymap from Sublime Text in Brackets. Like then “Cmd+D” to select next 🙂 https://github.com/adobe/brackets/wiki/User-Key-Bindings#import-mac-key-bindings-from-sublime-text

  9. Brian says:

    Here is my list:

    LESS AutoCompile – For compiling less files.

    Auto Brackets – When you write { , [ or ( and press enter, closes the tag and leaves the cursor in the middle line with correct indentation.

    Disable Autoclose Tags

    eqFTP

    Quick Search

    spell-check

  10. Connor Van Gilder says:

    Thanks for the feature of the Adobe Brackets icon! Glad to see someone likes it and is spreading the word.

  11. Sudharshan says:

    I think Sublime text will hold its ground. Brackets Live preview is only reasonably useful, because the moment you enable Chrome Dev Tools Live preview disconnects. Of course, the feature is good to test code, css, js to see effect. Personally, I use VIM, but alternate between Brackets, Atom, Notepad++ still weighing Brackets vs Atom 🙂

    My 2 bits.
    Sudharshan

  12. Shrinivas says:

    Hi MΛSΞY,

    It’s a nice article, I am switching from Sublime Text to Brackets but here are the following features I am missing in Brackets Editor-

    1. In Sublime Text when I write ‘div’ and press TAB button, it automatically completes the tag, How do I do it in Brackets?

    2. How to get code hints for jQuery?

    Thank you

  13. Miguel says:

    I’ve read this article, I’ve tried Brackets and I still like Sublime so much. All the plugins you named you can either find them on sublime or they’re not compulsory. I find sublime so much better with the project managament and go to anywhere. The font just look nicer as well.

    I like new ideas and updates. Makes me happy that Brackets has been updating a bunch of new features like the PSD viewer, but still not enough 🙂

    Thanks for the article!

  14. Seems like a fantastic code editor, just one problem! I always work with WordPress and the live preview doesn’t work as I would have hoped. It auto previews the actual template file that is open in Brackets, rather than previewing the website itself.

    Any ideas, or is this normal behaviour?

    • MΛSΞY says:

      Simon, this is normal behaviour mate. The live preview is really intended as a tool to help out those working on individual HTML pages.

      You are working on dynamic PHP pages within the WordPress structure. When WordPress is rendered in a web browser, it pulls multiple pages in to deliver what you see. Multiple PHP pages (header, nav, content templates, footers etc) are loaded and combined to give you this final product.

  15. Jastin Soni says:

    Brackets is quite slower than Sublime. It consume more ram and process. There is not big plus or reason to switch from Sublime Text. It is super powerful and lightning fast. Brackets is not a alternative. Just because it’s created by Adobe, we can’t say it is better than other. 🙂

  16. Thach says:

    Hi Masey,
    I just published an article to review about Brackets then I found your article, thanks for great informations.
    I found Brackets have more features that not just depends on extension, the Brackets Live Preview, PSD Extract, Quick Edit and the UI it awesome. On front-end development workspace, this editor is my must have tool.

  17. Stas says:

    I use Codelobster: http://www.codelobster.com
    I works better than brackets and sublimetext for me.

  18. Volker says:

    Are you serious? How come web coders and web developers are happy when someone launches a mediocre product with features most other code editors have for years now?

    Everything you pointed out plus a lot more is included for example in WeBuilder.

    And as opposed to Adobe products they don’t lag when you have tons of CSS, JS code on the screen. Try opening any 2015 web page with Dreamweaver for example and see how it terrible lags when scrolling. Same with Brackets.

    I’m truly sorry for you guys having to develop web apps and web pages while having to use inferior Adobe products. And this comes from someone that owns several Adobe products. For image/video they are great. For coding/html/css/js there are so much better alternatives out. For CSS you have for example TopStyle which again excels over Adobe.

    Don’t settle for garbage. Use the best.

  19. Nicolai says:

    Really nice article, thank you!

  20. Harry says:

    Those trying out Code Overview will find v 1.0.3 not working with current Brackets v1.6

    An alternative extension available is called Minimap and does the same thing.

    Thanks!

  21. Norman says:

    Thank you very much for this article. After over 2 years since it was originally posted and it is still most helpful.

    I switched from Visual Studio Code to Brackets and so far am enjoying the swap over so the list of top Brakets extensions to load was very helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *