We’ve passed the mid point of 2015 and open source development seems to be gaining more popularity as the years progress.  Enter Brackets – a community collaboration of the next big code editor created by Adobe through GitHub.

The Brackets point of difference is that it was developed using HTML, CSS, and JavaScript. This is interesting because anyone who is familiar with these languages has the potential to ‘hack’ into the code editor and change it as they please. This is especially useful for extension creation and so far there has been many extensions developed sense the initial release of v0.38 in 2014. Brackets is aimed towards Web Designers / Front-End Developers but can be also used for almost any type of developer, thanks to the wide range of extensions and code hinting support.

A Quick History Lesson:

Adobe previously introduced an application called Edge Code and it was their distribution towards Brackets. It came included as part of their creative cloud membership. The only problem was that users didn’t know the difference between edge code and brackets. Not to mention that creative cloud members already have access to Dreamweaver and Muse. What was the point of Edge Code?

Adobe Edge Code

Luckily for us, Adobe saw the value of keeping the brackets project open sourced and instead giving the user more benefits if they use their Creative Cloud (such as Extract for Photoshop).

Top Features

Brackets comes with preprocessor support, live preview mode using Google Chrome, and visual tools to help ease your workflow. It’s UI is simple and modern, which makes it a great choice for front-end developers.

It’s all about the extensions

As I mentioned above, Brackets has an impressive range of extensions thanks to its well-documented open API.  Here is a list of what I consider to be must-have extensions for every developer when using Brackets to develop your work:

  • W3CValidation ( Adds W3C validation support )
  • Brackets CSS Color Preview ( Allows color preview within a CSS file )
  • Tabs – Custom Working ( Shows/hides tabs of active documents within the editor)
  • JSHint ( Adds JavaScript hinting within Brackets)

Nice to haves / Specific Extensions

  • Brackets WordPress hint Awesome for theme development )
  • QuickDocsPHP ( Inline short documentation for PHP functions )
  • PHP Syntax Hint ( PHP Syntax Hint )
  • jQuinter ( Hints for jQuery selectors in JS,HTML and CSS )
  • Bracket Icons ( Adds icons to file types )
  • FTP Sync Plus ( FTP/SFTP upload for Brackets )
  • Response for Brackets ( Responsive design tool )
  • Beautify ( Format JavaScript, HTML, and CSS files )
  • HTML Designer for Brackets (Very nice WYSIWYG editor)

Cool Themes

If you’re not a fan of the default light theme that comes with brackets, I might be able to save you some time. I’ve spent more time browsing through themes than I care to admit.. Here is a short list of my favourites:

  • Pretty Light ( Popular Light theme )
  • Zeedijk ( Readable light theme)
  • Simple Theme ( Light theme, easy on the eyes)
  • Brackets Dark ( Dark theme, comes with brackets )
  • Monokai-Dark-Soda ( Popular dark theme )
  • Quick Dark ( Readable dark theme )
  • Raven (Dark Dreamweaver theme )

Overall Impressions

For an open-sourced code editor. Brackets shows a lot of promise in the for-seeable future. It easily rivals the top code editors on the market today. If you use any Adobe products, this one is a no brainer.

Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>