Bracketsでおすすめのプラグイン6選【初心者向けの拡張機能】

BLOG Editor

本記事の内容

こんにちは、ヒデハルです。
ブログ歴は1年ほど。

本記事では、Bracketsのおすすめプラグイン6選を紹介します。

Bracketsを使えるようになったから、プラグインも入れてみたいって方は参考にして下さい。

Bracketsの拡張機能とは

人気のエディタ「Brackets」の良いところは、メイン機能がデフォルトで備わっていること。

なので、基本的には、インストールしてそのまま使えばOKですけど、拡張機能を使うと、さらに良くなるんです。

拡張機能とは、その名のとおりで、俗に言うプラグインのこと。

Bracketsの公式ページでは「エクステンション」と呼んでますが、本記事では親しみのあるプラグインでいきますね。

Bracketsのプラグインを使う方法

Bracketsのプラグインを使う方法を説明します。

Bracketsの右端にあるブロックのボタンをクリックして下さい↓

「拡張機能マネージャー」が起動します↓

プラグインをインストールする方法は以下の3通り。

  • その①:赤枠の検索窓にプラグイン名を入力する
  • その②:ローカルにダウンロードしたzipを、青枠にドラッグ&ドロップする
  • その③:プラグインのURLを青枠に入力する

どれでもOKですが、本記事では「その①」で説明します。

実際にインストールしてみる

検索窓に、プラグイン名(例:Emmet)を入力すると、ヒットして表示されるので、[インストール] ボタンをクリック↓

インストールが成功すると、以下のメッセージが出るので、[閉じる] をクリック↓

以上で完了。超カンタン!

ちなみに、[インストール済み]のタブをクリックすると、先ほどのプラグインがインストールされていることが確認できます↓

削除するときは、こちからどうぞ。

Bracketsのおすすめプラグイン6選

Bracketsでおすすめのプラグインは、以下の6つ。

では見ていきましょう。

その①:Brackets Icons

ファイルの横にアイコンをつけてくれます。こんな感じ↓

ファイル数が増えた時には、視認性が良くなるかと。

その②:Indent Guides

インデントのガイド線を表示してくれます。

この機能を有効にするには、メニューから[表示] > [Indent Guides] にチェックをつけて下さい↓

インストール前はこうだった

インストール後はこうなる

ソースコードが見やすくなりますね。

その③:Beautify

ずれたインデントを自動で整形してくれます。対象は、HTML、CSS、JavaScript。

使い方

対象のコード範囲を選択してから、メニューで [編集] > [Beautify] をクリックします↓

すると、コードが自動で整形されます↓

可読性、作業性が大きく向上しますね!

なお、インデントなどをあらかじめ設定しておけば、自分好みに整えることも可能。

ファイル保存時の設定

ファイルを保存した時に、自動でコードを成形したい方は、メニューで [編集] > [保存時にBeautifyする] にチェックをつけましょう。

その④:Brackets Editor Bookmarks

コード上にブックマークを付けられます。

ブックマークの付け方

ブックマークをつけたい行にカーソルを置き、メニューで [ナビゲート] > [Toggle Bookmark] をクリックすると、青いマークがつきます↓

ブックマーク行にジャンプする方法は2通り。

ジャンプする方法①

メニューで [ナビゲート] > [Next Bookmark] or [Previous Bookmark] をクリックすればOK。

ジャンプする方法②

メニューで [表示] > [Show Bookmarks Panel] をクリック↓

すると、エディタの下半分にブックマーク一覧が登場します↓

各行をクリックすると、ブックマーク行に一気にジャンプするので、便利です。

その⑤:W3C Validation

HTMLの文法チェックをして、エラーの解決方法を教えてくれます。

※本プラグインは、JDKが必要。インストールしてない方は事前にご準備を。

使い方

コーディングして、ファイルを保存すると、2種類のマークで結果を通知してくれます。

文法エラーがある時は「チェックNGの黄色アイコン」が出ます↓

この黄色アイコンをクリックすると、文法エラーの詳細が表示されます↓

エラー箇所を修正し、ファイルを保存すると、再び文法チェックをしてくれ、、

正しく修正されていれば「チェックOKの緑色アイコン」が表示されます↓

このように、W3C Validationを使えば、コードミスを瞬時に確認でき、効率よく実装できるんです。

※文法チェックは、メニューで [編集] > [Refresh W3C validation] を押してもOK。但しファイル保存されるので注意。

その⑥:Emmet

Emmetは、HTMLやCSSのコーディング補助をしてくれる人気のプラグインです。

省略形のコードを入力するだけで、長いコードが展開されるので、作業効率が確実に良くなるでしょう。

※Emmetの使い方は、別記事の「Emmetの省略記法を使ってみよう」の項を参考にしてみて下さい。

以上、おすすめプラグインの紹介でした。

まとめ:Bracketsでおすすめのプラグイン6選【初心者向けの拡張機能】

  • Bracketsとは、Adobe社が提供するオープンソースの人気エディタ
  • Bracketsにプラグインを入れると、作業効率がさらに上がる
  • プラグインは、拡張機能マネージャーを起動→検索→インストール
  • 初心者におすすめのプラグインは6つで、Brackets IconsIndent GuidesBeautifyBrackets Editor BookmarksW3C ValidationEmmet

上記の感じ。

参考になれば幸いです😌

参考Bracketsの使い方|初心者用にダウンロードからわかりやすく解説

参考WordPressブログの始め方を初心者に解説。アフィリエイトで稼ぐ!