Bracketsって便利ですよね。adobe信者ですが、Dreamweaverは起動が遅くて使う気がおきません。軽くて拡張性があるものをと探していたら行き着きました。ライブプレビュー機能やUIのシンプルさも最高です。
plugin
Beautify：コードをきれいに
もはや常識。これは間違いなく入れましょう
[code]body {width: 100%;margin: 0;padding: 0;}a{text-decoration: none;color: #333}
.header { width: 100%; border-bottom: 1px solid #ddd;box-shadow: 0 0 8px 0 #ddd;margin: 0 0 16px;}
.header-logo {max-width: 500px;margin: 0 auto;}
[/code]
こんな感じのぐちゃぐちゃなコードを
[code]body {
width: 100%;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333
}
.header {
width: 100%;
border-bottom: 1px solid #ddd;
box-shadow: 0 0 8px 0 #ddd;
margin: 0 0 16px;
}
.header-logo {
max-width: 500px;
margin: 0 auto;
}
[/code]
このようにきれいにしてくれます。さすがBeautify（美しくします）という名前なだけあります。
全角空白・スペース・タブ表示
こちらは全角空白・スペース・タブを視覚的にわかりやすい形で表示してくれます。テキストの処理上、見分けにくいので入れておくことをおすすめします。
Brackets Css Color Preview：どこに何色を使っているか
行数表示の横に、その行に書かれたカラーコードの色を視覚的に表示します。底まで重要ではないですが、意外と見るタイミングがあります。
Minimap：全体を把握するために
画面右端にコード全体の中で、現在どの部分を表示しているかを確認できます。文字を読める大きさではないので、詳細なスクロールバーという気持ちです。
Paste and Indent：コピペが楽に
コピペした時に適正なインデントを作ってくれます。地味にストレスな部分なので、解消される喜びは大きいです。いちいちBeautyを実行するのも癪なので。
Add HTML template：htmlファイルの最初のとっかかりに
ほとんど使いません。極稀に使います。新しいhtmlシートを作る時に、基本となる部分をボタン一発で書いてくれます。極稀に使うと便利です。
CSSFier：コピペでcssを書きやすく
htmlからコピペしてcssに貼り付けると、要素名がcssに最適な形で抜き出されるという魔法のようなplugin。かなり便利です。
Brackets Icons：どんなファイルか把握しやすく
htmlやcss、種別にサイドバーなどにアイコンを付けます。どうでもいいようで、意外と重宝します。
Overscroll
ファイルの最下部よりも下の空白を表示します。
一番下の行を書くときに、下を見なくても丁度良い位置に表示してくれます。
theme
ちなみに使用中のテーマはNewton Light。白背景派です。
