Bracketsをもっと快適に使いたい。Bracketsには便利なプラグインがあるらしいけど、どれがいいのかさっぱりわかりません。おすすめを教えてください
こういった疑問に答えます。
本記事では、Bracketsのおすすめプラグイン６選を紹介します。
Bracketsを使えるようになったから、プラグインも入れてみたいって方は参考にして下さい。
Bracketsの拡張機能とは
人気のエディタ「Brackets」の良いところは、メイン機能がデフォルトで備わっていること。
メイン機能の詳細は、Bracketsの使い方｜初心者用にダウンロードからわかりやすく解説 をご覧ください。
なので、基本的には、インストールしてそのまま使えばOKですけど、拡張機能を使うと、さらに良くなるんです。
拡張機能とは、その名のとおりで、俗に言うプラグインのこと。
Bracketsの公式ページでは「エクステンション」と呼んでますが、本記事では親しみのあるプラグインでいきますね。
Bracketsのプラグインを使う方法
Bracketsのプラグインを使う方法を説明します。
Bracketsの右端にあるブロックのボタンをクリックして下さい↓
「拡張機能マネージャー」が起動します↓
プラグインをインストールする方法は以下の３通り。
- その①：赤枠の検索窓にプラグイン名を入力する
- その②：ローカルにダウンロードしたzipを、青枠にドラッグ＆ドロップする
- その③：プラグインのURLを青枠に入力する
どれでもOKですが、本記事では「その①」で説明します。
実際にインストールしてみる
検索窓に、プラグイン名（例：Emmet）を入力すると、ヒットして表示されるので、[インストール] ボタンをクリックします↓
インストールが成功すると、以下のメッセージが出るので、[閉じる] をクリックします↓
以上で完了。超カンタン！
ちなみに、[インストール済み]のタブをクリックすると、先ほどのプラグインがインストールされていることが確認できます↓
削除するときは、こちからどうぞ。
Bracketsのおすすめプラグイン６選
Bracketsでおすすめのプラグインは、以下の６つ。
- その①：Brackets Icons
- その②：Indent Guides
- その③：Beautify
- その④：Brackets Editor Bookmarks
- その⑤：W3C Validation
- その⑥：Emmet
では見ていきましょう。
その①：Brackets Icons
ファイルの横にアイコンをつけてくれます。こんな感じ↓
ファイル数が増えた時には、視認性が良くなります。
その②：Indent Guides
インデントのガイド線を表示してくれます。
この機能を有効にするには、メニューから[表示] > [Indent Guides] にチェックをつけて下さい↓
インストール前はこうだった
インストール後はこうなる
ソースコードが見やすくなりますね。
その③：Beautify
ずれたインデントを自動で整形してくれます。対象は、HTML、CSS、JavaScript。
使い方
対象のコード範囲を選択してから、メニューで [編集] > [Beautify] をクリックします↓
すると、コードが自動で整形されます↓
可読性、作業性が大きく向上しますね！
ファイル保存時の設定
ファイルを保存した時に、自動でコードを成形したい方は、メニューで [編集] > [保存時にBeautifyする] にチェックをつけましょう。
その④：Brackets Editor Bookmarks
コード上にブックマークを付けられます。
ブックマークの付け方
ブックマークをつけたい行にカーソルを置き、メニューで [ナビゲート] > [Toggle Bookmark] をクリックすると、青いマークがつきます↓
ブックマーク行にジャンプする方法は２通り。
ジャンプする方法①
メニューで [ナビゲート] > [Next Bookmark] or [Previous Bookmark] をクリックすればOK。
ジャンプする方法②
メニューで [表示] > [Show Bookmarks Panel] をクリックします↓
すると、エディタの下半分にブックマーク一覧が登場します↓
各行をクリックすると、ブックマーク行に一気にジャンプするので、便利です。
その⑤：W3C Validation
HTMLの文法チェックをして、エラーの解決方法を教えてくれます。
使い方
コーディングして、ファイルを保存すると、２種類のマークで結果を通知してくれます。
文法エラーがある時は「チェックNGの黄色アイコン」が出ます↓
この黄色アイコンをクリックすると、文法エラーの詳細が表示されます↓
エラー箇所を修正し、ファイルを保存すると、再び文法チェックをしてくれ、正しく修正されていれば「チェックOKの緑色アイコン」が表示されます↓
このように、W3C Validationを使えば、コードミスを瞬時に確認でき、効率よく実装できるんです。
その⑥：Emmet
Emmetは、HTMLやCSSのコーディング補助をしてくれる人気のプラグインです。
省略形のコードを入力するだけで、長いコードが展開されるので、作業効率が確実に良くなるでしょう。
以上、おすすめプラグインの紹介でした。
まとめ：Bracketsでおすすめのプラグイン６選を使おう
まとめます。
- Bracketsとは、Adobe社が提供するオープンソースの人気エディタ
- Bracketsにプラグインを入れると、作業効率がさらに上がる
- プラグインは、拡張機能マネージャーを起動→検索→インストール
- 初心者におすすめのプラグインは６つで、Brackets Icons、Indent Guides、Beautify、Brackets Editor Bookmarks、W3C Validation、Emmet
上記の感じ。
参考になれば幸いです。