web制作

最低これだけは入れたいBracketsのプラグイン6つ!

最低これだけは入れたいBracketsのプラグイン6つ!

Extract for Brackets (Preview)Bracketsは最初からそれなりに機能が付いてますが、それで満足かと言うとそうでもありません。もうちょっとだけ機能が欲しい。。。

テキストエディタを過去にいくつか使ってきましたが、どれもプラグインを入れて使ってたので、テキストエディタ使う時はプラグインのインストールは必須な気がします。(これ面倒と思うのは僕だけですかね?)

Brackets入れたばかりだと最低限必要と思われるプラグイン調べるのも手間がかかると思うので、とりあえずこれ入れておけばいけるかな〜、というレベルのBracketsのプラグインまとめたので、Brackets導入したばっかの人は、参考にしてください。

eqftp

Bracketsでftpするのにプラグインは必要です。gulpとかのタスクランナーあればいらないかもですが、Brackets内で完結させるなら必要ですよねー。

eqftpはサーバーと繋げて保存したファイルをftpでアップロードできます。

設定がわかりにくいので、eqftpの設定方法解説しています↓

2017.06.09

【徹底解説】BracketsのeqFTPを使ってFTP接続する方法

Bracketsのプラグインでftpを導入した時に、ちょっと苦戦したのでメモ。ちなみにBracketsについての記事も書いてます。 Bracketsは優秀なテキストエディタなのですが、初期の機能にftpがついていないので、プラグインで拡張する必要があります。 Bracketsで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つのプラグインあればコーディングはかなりやりやすくなるはずです。

あとはお好みで。