Brackets Editor

 in Text Editors  tagged editor / emmet by

Brackets is a source code editor with a focus on website development. As WikiWand says about Brackets: “Created by Adobe Systems, it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by Adobe and other open-sourced developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most linux distros. The main purpose of brackets is its live html, css and js editing functionality”

WikiWand in their second paragraph goes on to say: “On November 4, 2014, Adobe announced the first (1.0) release of Brackets. The update introduced new features such as custom shortcut key combinations and more accurate JavaScript hinting. Brackets has a major focus on development in JavaScript, CSS and HTML. With release of version 1.0 Adobe announced a feature that extracts design information from a PSD file for convenience of coding in CSS. As of June 28, 2016, the feature is officially discontinued, due to “low usage”. However, Extract is still available via Photoshop and Dreamweaver, both of which are part of their paid service, Adobe Creative Cloud. The latest version release of Brackets is 1.13.”

Emmet

You can install a free plugin called Emmet that will make your coding much faster. To install Emmet, go to File, Extension Manager, click the Available tab and search for Emmet. Once you find Emmet, click the Install button. It will install and create an Emmet menu at the top of Brackets. Now when you want to add an HTML tag, such as div, you just type div and press the Tab key and Emmet will inset the open and closing tags and place the cursor between those tags. Emmet is available for many other editors as well. Try typing lorem and press tab and it will insert 213 characters of Lorem Ipsum. I’m not sure if that functionality comes from Emmet or Brackets, but it can be handy. Emmet does a lot more that that however.

Live Preview

To view your web page in the Chrome browser, click the lightning bolt icon in the upper-right corner of Brackets. Chrome should open in a new window and display your work.