Brackets

Bracketsは、Adobe Systemsが開発するオープンソースのソースコードエディタである。 リリースサイクルは、4か月ごとの定期リリースとなっている。
Adobe Dreamweaver CC 2017以降ではコードエディター部分に、Bracketsをベースにしたものを採用している。
とウィキペディアに書かれております。

公式サイトに行くとこんな画面になるので

もちろん無料で使用できます

ダウンロードしたファイルをダブルクリックするとインストールが始まりますのでどんどん進んでインストールしてみましょう。

※　この記事を書いている時点では変なソフトのインストールとかはありませんでしたので安心してインストールしてください

Bracketsの便利機能たち(デフォルト編)

Bracketsはデフォルトの状態でもかなり高機能になっています
まずは簡単な使い方を把握しておきましょう

サイドバーでフォルダやファイルを管理・表示ができる！

フォルダごとサイドバーへドラッグアンドドロップしてあげるだけで中に入っているファイルやフォルダを操作することができます
見たいファイルをクリックするだけで中身がエディタ内に表示されます
もちろん画像の表示もできるので確認のために移動する手間が省けます

サイドバーからフォルダやファイルの作成も自由自在！

サイドバー下部の何もないところで右クリックすると開いているフォルダ直下に新しくフォルダやファイルを作ることができます

任意のフォルダ内にも新たにフォルダやファイルを新規で作ることができますので制作が捗ります。

コードヒントが表示されるのでコードを書くのが楽になる！

HTMLタグの開始「<」を打つだけで[a]から順番にタグのヒントが出てきます。
選んでタグを閉じると閉じタグまでを出力してくれるのでありがたい

もちろんCSSのプロパティと値も出力してくれるので間違いが大幅に減ります。

ドラッグし選択した部分を任意のタグで囲む

資料としてページ内で使うテキストが手元にある場合に有効な機能があります。

使い方

• タグで囲みたいテキストをドラッグする
• 「Ctrl+Shift+A」を押して選択範囲をタグで囲む機能を呼び出す（エディタ下部に出てきます）
• エディタ下部に出てきた入力欄に囲みたいタグ名を記述して「enter」を押す

※ IDやclassを付けるときはタグ名の後にスペースなどは開けずに
「#」のあとにつけたいID名を記述するとID属性付きに
「.」のあとにつけたいclass名を記述するとclass属性付きでそれぞれ出力できます

拡張機能からEmmetを追加していないと使えませんでした

右クリックに隠されたクイック編集

Bracketsは右クリックするとクイック編集という項目が出てきます。
何をしてくれる機能かというとHTML上からCSSの編集ができてしまう機能という感じです。

例えばCSSが空の状態でHTMLのタグ部分でクイック編集を押してみると「新規ルール」ボタンが出現します。
クリックするとセレクタが出てきますのでCSSを書き込めばCSSファイルの最後に追加しておいてくれます。

HTML・CSSのライブプレビュー編集

HTMLやCSSを編集と同時にブラウザ反映をする機能となっております。
いまとなってはどのエディタやタスクランナーツールでも実現可能になりつつありますが設定が必要だったりプラグインを落としたり等の手間がありました…

Bracketsには標準搭載されています！

使い方も簡単、まずエディタ内にあるアイコンをクリック

そうするとブラケッツに内蔵されているchromeが起動します
ライブプレビューなのでコードを変更したら即ブラウザに反映されます。
Dreamweaverだとかなり重くて使いにくい機能ですが、Bracketsならば動作が軽いのでストレスはたまりません。