Review - Brackets Text Editor

Review - Brackets Text Editor
Recently I decided to evaluate a few open source text editors. In this review, we will take a look at the Brackets code editor, an open source project by Adobe.

My personal requirements for a text editor are simple. I need to code in one window and see a live update in another. Brackets has a Live Preview feature that opens your file in to the Chrome browser. You can see the results in Chrome as you change your code. So, you won't be using the old process of edit - save - refresh browser. The instant live preview works for both the html document and the css code in the Inline Editor.

First, install Brackets

  • Download and open the dmg file

  • Drag the Brackets icon to your application folder

  • Click on Brackets.app in the Applications folder

  • Read the introduction in the default html file. It is very useful. Don't skip it.

Start working on a project by opening the folder containing your files. This will tell Brackets to use these files in the Code Hints, Quick Edit and Live Preview features. The left sidebar works like Photoshop's Mini Bride, to view the files in the open folder and to switch between folders.

You don't need to open and switch between your html and css files. Brackets has an Inline Editor that will display and allow you to edit the css code associated to a tag selected in the html. In this screenshot, I've selected the h1 tag. As you can see, we can edit the existing css or click the New Rule button to add a new rule to the tag. This also works with html color codes, image thumbnails, JS functions and animation.

Extensions

Brackets is written in HTML, JS and CSS. So you can get your hands dirty modifying and extending the app if you like. As with most open source projects, Brackets has a large community of users and developers. You can join in and help or just browse the list of themes and extensions that can be added to extend the Brackets features. Just click File - Extension Manager. You might want to consider the Autoprefixer extension, which adds vendor prefixes to your code.

Download Brackets
http://brackets.io/

Brackets Blog
http://blog.brackets.io/

Brackets Support
https://github.com/adobe/brackets/wiki/Troubleshooting





RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.