Brackets + HTML: Useful Tools

What I like the most about Brackets Editor is its Inline Editor. This feature makes editing HTML and CSS simple and fast. This post will introduce all tips which make Brackets a great HTML editor. 

Most Useful Brackets Tools for Coding with HTML

Quick Edit

On the Brackets tab, click on an attribute like ID or Class, then right-click > Quick Edit or press Ctrl + E. A new popup window appears for you to edit their styles. If you link to a stylesheet file in the HTML file, every change will be updated to the stylesheet file.

Quick Edit can trigger an inline color picker for previewing and adjusting the color in any file with a hex color or RGB/RGBA/HSL/HSLA color.

Live Preview

Changes are updated to the web browser instantly when a change is made and saved. This feature can be activated by clicking on the flash icon on the top right of the editor.

Actions

Emmet allows you to write large HTML code blocks using only several words. For example, this line #page>(#header>ul#nav>li*4>a)+(#content>h1{Hello world}+p)+#footer will turn into

<div id="page">
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div id="content">
<h1>Hello world</h1>
<p></p>
</div>
<div id="footer"></div>
</div>

Actions that I find HTML developers will use a lot are Expand Abbreviation, Go to Matching Pair, Wrap with Abbreviation, Toggle Comment, Update Image Size, and Evaluate Math Expression. A full list of actions can be found here.

Extensions

• Emmet: HTML & CSS workflow can be improved using this extension.
• Beautify: it can format JavaScript, HTML, and CSS files.
• JSHint: add JSHint support.
• Autoprefixer: it helps deal with vendor prefixes in the best possible way.
• HTML Skeleton: easily insert a variety of HTML tags.
• Color Picker: pick colors within minutes right within Brackets.
• HTML Wrapper: formats <ul>, <ol>, <nav>, and <select> children tags with a single command.
• CSSLint: enable CSS linting support.
• HTML Block Selector: select a block of HTML using Ctrl+Shift+T
• Add HTML template: create a skeleton HTML template with a click.