Braskets（ブラケッツ）の便利な拡張機能

Extract for Brackets (Preview)

Extractは、PSD形式のファイルから画像アセットや各種プロパティ情報を抽出（Extract）できる機能。
Phostoshopでカンプからコーディングする時にはオススメ！

Brackets CSS Class Code hint

編集中のHTMLのCSSのセレクターに書かれているclassとIDが、属性値の記述時にコードヒントを出してくれる。
（Bootstrap等CSSフレームワークで使うとスピードアップに効果アリ）

Adobe Edge Inspect

スマホ実機での表示確認ができる「Adobe Edge Inspect」がBracketsで使用できる。HTML保存後に「Adobe Edge Inspect」に反映される。

Emmet

爆速的にHTMLコーディングが速くなるお馴染みのEmmet。

例）nav>ul>li　を入力後にALT+⌘+Enterを押すと下記のように展開される。

<nav>
　<ul>
　　<li></li>
</ul>
　</nav>
　
　

　チートシート http://docs.emmet.io/cheat-sheet/

Adobe Edge Web Fonts

Gogoole Web FontsのURLがBrackets内でコピーできる。 Brackets内でEdge Web Fontsを選ぶ事ができるので面倒なWebフォントの設定もBrackets内で完結できる。

W3CValidation

HTMLやCSSファイル保存時に、リアルタイムにバリデーションを実行してくれる。Sass/Lessも可能。

Beautify

JavaScript、HTML、CSSを見やすいよう整形してくれる。

Brackets Editor Bookmarks

ソースコード内にブックマークを設定できてブックマーク箇所へジャンプできる。 ショートカット⌘F4で設定、F4で移動。

ここで紹介したもの他にBracketsにはたくさんの便利な拡張機能があります。

Googleで検索するとブログ記事やまとめ記事で紹介されている事が多いので検索して調べてみてください。

PSDカンプから画像を抽出できる「Extract」の他にこんなに便利なプラグインがあるんですね。