新人Web制作者 /

Brackets初心者がまずインストールするべき基本プラグイン10選

img-main_001

こんにちは。それからデザインの長島です。

今回は私がいつも使用しているBracketsのプラグインで特に使い勝手が良かったもの、コーディング初心者でも使いやすいものなど、Brackets初心者がインストールするべき機能を紹介します。


Bracketsとは

BracketsとはAdobeが提供しているオープンソースコードエディターです。無料で使用でき、コードヒント、ホバークイックビュー、ライブプレビュー機能など、数々の便利な機能がデフォルトで付いています。起動もとても早いです。そして、特徴的なのがプラグイン(拡張機能)の豊富さです。600種類以上もあるプラグインから、自分好みのものをインストールし、カスタマイズしていくのは我が子を育てるかのよう。

プラグインのインストール方法

プラグインのインストール方法は驚くほど簡単です。画面右端にある、ブロックのアイコンをクリックすると「拡張機能マネージャー」が立ち上がります。あとは希望の拡張機能のインストールボタンを押すのみ。

gif_001

それでは早速、初心者がまずインストールするべきプラグインを紹介します。

Bracketsの基本拡張機能

Emmet

なくてはならない相棒。使い方を少し覚えるだけでコーディングの速度が爆発的に上昇します。 もっと詳しくEmmetについて知りたい方は、ぜひこちらの記事も。

HTML編CSS編

Beautify

コードを綺麗にしてくれるプラグインです。コードがきたなくなりがちな方は、このプラグインを入れることでコードを整理する作業から解放されます。保存する度に自動でコードを整理するように設定もできますが、人や環境によってインデントの数など細かい違いがあるかと思いますので、まずはBeautify自体の設定を行うことをおすすめいたします。また、Beautifyはminファイルなどを復元する時にも役立ちます。

gif_002

Brackets CSS Class Code hint

一度使ったことのあるクラス名、ID名をコードヒントとして表示します。各プロジェクト内のクラス、ID名のみ表示するので、今まで使用したクラス名がずらーっと表示されてしまうこともありません。また、このプラグインを使用することによってクラス名、ID名のタイプミスを減らすことができます。

gif_008

Brackets Icons

HTML、CSS、javascript、PHPなど、ファイルの種類ごとにわかりやすいアイコンを表示します。視覚的にとてもわかりやすくなるので、インストールすることをおすすめします。もうこのアイコンが表示されていなかった時のことを忘れてしまったぐらい目に馴染んでしまいました。

img-001

Color Hint

同じCSSファイル内で、一度使用したことのある色をコードヒントとして表示します。同じ色は何度も使うことが多い訳で、とても多用します。微妙に違う色を何種類か使用していた、というミスもこの拡張機能で発見することができます。

gif_003

Documents Toolbar

DreamweaverからBracketsに移行してまず思ったことは、「ファイル間を移動するタブが無いんだ…」ということでした。Bracketsはファイル間の移動をサイドバーで行うので、始めのうちは手癖でカーソルを上の方に移動させてしまうことも少なくありませんでした。そこでこの拡張機能が役に立ちます。Documents ToolbarはBracketsにタブを表示させる拡張機能です。今でこそ、サイドバーの扱いにも慣れておりますが、上でも左でもどちらか近い方でファイル間の移動を行うことができる環境はストレスフリーです。

img-002

HTML Block Selector

開始タグでも、終了タグでも、どちらかをフォーカスさせた状態で「command + shift + T」を押すとタグ全体を選択します。入れ子も含めて全て選択してくれるので、タグ全体を削除やコピーするためにドラッグする必要がなくなります。

gif_004

Paste and Indent

インデントが入っていないコードをコピーしてペーストした時に、自動的にインデントしてくれます。例えば、参考にしたいコードを見つけた際、自分が書いているコードのインデントと異なっていても、ペーストした瞬間に自分が設定しているインデント数と揃います。また、書いているコードのインデントが少し乱れてしまった際にも、前述の「HTML Block Selector」でタグ全体を選択し、カット&ペーストで綺麗なインデントにしてあげる、といった使い方もできます。

gif_005

Select Lines

DreamweaverにあってBracketsにない機能。それは行の選択です。行番号をクリックして、一行まるまる選択できないBracketsをできるBracketsに。今までできていたことができなくなることは、とても不自由ですので真っ先にインストールしておくことをおすすめします。

gif_006

CSSFier

HTMLをコピーしてCSSファイルに貼り付けると、ID名、class名を含めてCSSのソースコードに変換します。初めて使った時は驚きました。

gif_007

以上がBracketsで実際に使って役に立っているプラグインです。
DreamweaverにあってBracketsにない機能を補完するプラグインもありますので、今までDreamweaverを使用していた方には特におすすめのプラグイン選です。


このようにBracketsはさまざまなプラグインでコーディングを後押ししてくれます。またBracketsの背景色やタグの色も数多くのテーマから選択し、ダウンロードすることができます。見た目も自分好みにすることで、コーディングすることがもっと楽しくなりますよね。

Bracketsをカスタマイズして、より楽しいコーディングライフを送りましょう!

この記事を書いた人

長島裕樹

PAGE TOP