WEBデザイン PR

Bracketsで私が入れてるplugin

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。白背景派です。