プチ講座

コーディングはこれひとつでOK!Bracketsを使ってみる3

プチ講座 投稿者画像  

Bracketsに関する記事も3つ目になりました。

前々回:Bracketsのダウンロードとインストール

前回:Brackets標準の便利機能

最後は、Bracketsのおすすめプラグイン(拡張機能)を紹介します。
プラグインを入れることでコードの作成がグッと楽になることもあります。

プラグイン(拡張機能)のインストール

まずはインストールの仕方です。
拡張機能マネージャーを開きます。(ファイル→拡張機能マネージャー)

名称未設定-1

ウィンドウが開くのでインストールしたいプラグイン名を右上のボックスに入力して検索します。Bracketsを再起動しないと有効にならない場合もあるので注意してください。
※検索にでてこない場合はブラウザでプラグイン名を検索してzipファイルをダウンロード後、開いているウィンドウにzipファイルをドラッグすればインストールができます。

Tabs-Custom Working

名前の通りタブに関するプラグインです。

通常Bracketsの編集ファイルの切り替えは、画面左部のメニューから行います。

このプラグインは上部にタブが作られ、タブで表示ファイルの切り替えができます。

またエディタ画面を2画面にすることもできるので、HTMLとCSSを同時に編集する場合に非常に便利です。

aaa

タブの画像切り替え

bbb

2画面表示

 

 

 

 

 

 

Beautify

HTMLやCSSのコードをきれいに整えてくれるプラグインです。
直したいソースコードを選択して、右クリックからBeautifyをクリックするだけです。
作成に集中して乱れた場合でもすぐに直してくれます。納品前にはやっておきましょう。

ccc

CSS Fier

HTMLのソースコードをコピーしてCSSに張り付けると自動でidやclassのセレクタを作ってくれるプラグインです。

ddd

Emmet

最後は素早くコーディングをするのに「こうかは ばつぐんだ!」のEmmerです。
こちらは昔からあるテキストエディタでもプラグインとして出ているほど有名なものになります。

たとえばHTMLで「 ! 」を入力し、TABキーを押せばHTML5のタグが一瞬ででてきたり、「#wrap>#header+#contents+#footer」と入力すると入れ子のdivが出来上がったりと入力時間を驚くほど短縮することができます。オススメ!

eee

以上、Bracketsのおすすめプラグインでした。
次回は最後に紹介したEmmetの使い方を解説していきます。