最低これだけは入れたいBracketsのプラグイン6つ!
Extract for Brackets (Preview)Bracketsは最初からそれなりに機能が付いてますが、それで満足かと言うとそうでもありません。もうちょっとだけ機能が欲しい。。。
テキストエディタを過去にいくつか使ってきましたが、どれもプラグインを入れて使ってたので、テキストエディタ使う時はプラグインのインストールは必須な気がします。(これ面倒と思うのは僕だけですかね?)
Brackets入れたばかりだと最低限必要と思われるプラグイン調べるのも手間がかかると思うので、とりあえずこれ入れておけばいけるかな〜、というレベルのBracketsのプラグインまとめたので、Brackets導入したばっかの人は、参考にしてください。
eqftp
Bracketsでftpするのにプラグインは必要です。gulpとかのタスクランナーあればいらないかもですが、Brackets内で完結させるなら必要ですよねー。
eqftpはサーバーと繋げて保存したファイルをftpでアップロードできます。
設定がわかりにくいので、eqftpの設定方法解説しています↓
Beautify
Beautifyはコードを保存した時に自動インデント入れてくれて、整列してくれます。これあるだけで、コードがだいぶ綺麗になります。
※htmlないでphpを書いた時は、ソースがちょっとぐしゃるので、wordpress触っている時は使わない方がいいかも。
Autoprefixer
cssを保存した時に、自動でベンダープレフィックスをつけれくれます。-webkitとか言うやつですね。
手入力をするのは手間なので、これがあると入力の手間がかなりはぶけます。
CSSFier
htmlで作ったソースをcssにclass名入力していくのはかなり面倒ですよね。CSSFierはその面倒が無くなります。
なんと、htmlで作ったコードをcssでコピペするとhtmlで必要なcssが自動的に作られます!
以下のような感じです。
このhtmlが
<article>
<header>
<h1>This is an awesome article</h1>
</header>
<div class="text">
This is an awesome text
</div>
</article>
コピペでこんなcssに
article {
header {
}
h1 {
}
.text {
}
p {
}
}
一度使うと病みつきになります。
emmet
マークアップエンジニア御用達、emmetです。Bracketsでももちろん使えます。
上のCSSFierと合わせるとhtml/cssが爆速になります。
Brackets Tree Icons
Bracketsの左カラムに、選択しているフォルダとファイルの一覧があるのですが、デフォルトだとアイコンがなく、ちょっと見づらいです。
Brackets Tree Iconsを入れるとファイルにあった表示されるようになります。
まとめ
ひとまず、この6つのプラグインあればコーディングはかなりやりやすくなるはずです。
あとはお好みで。