WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ

前回、無料エディター「Brackets」の素晴らしいデフォルト機能について書きました。

無料エディター「Brackets」にも恋に落ちた
先日から、Adobe提供の無料開発エディター「Brackets」を使っています。 僕はこれまで、Wordpressテーマの開発などは「...

Bracketsは、デフォルトだけでも、良い機能がついているのですが、拡張をインストールすることによって、作業効率が良くなったり、できることの幅がより広がります。

ということで今回は、Bracketsを使い始めてから今まで、いろいろな拡張を試してみた結果、Wordpressのテーマ開発などに便利そうな拡張をいくつかまとめてみました。

スポンサーリンク
レクタングル(大)広告

Emmet

Emmet

強力なコーディング補助ツールです。

わずかなスニペットを入力し、tabキーなどで展開して入力することで、少ないコード量で多くの記述を行うことができます。正直これを使えないエディターだとやる気が出ません。

Emmetの動作

Emmet

Brackets Snippets (by edc)

Brackets Snippets (by edc)

Sublime Textでは、PHPのスニペットは、デフォルトで用意されていましたが、Bracketsでは自前で用意する必要があります。僕が試してみたスニペット拡張の中では、これが最も使いやすかったです。

PHPのスニペット入力

この拡張は、あらかじめライブラリとしてHTML、CSS、JavaScript、PHPのスニペットがある程度登録されています。

以下の手順で登録することで、コードを記入せずとも、基本的なPHPのスニペットを登録することができます。

手軽なスニペットの登録方法

Brackets Snippets (by edc)

WordHint

WordHint

brackets-wordhint

Sublime Textでいうところの、オートコンプリートに”近い”機能を追加できる拡張です。(※全く同じ動作ではありません)

キーワードをオートコンプリート機能のように保管する

PHP、Python、Perl他などで、現在のドキュメントの中からオートコンプリート機能のようにキーワードをヒント表示してくれます。

Brackets CSS Class Code hint

Simple CSS Class and ID code hint

プロジェクト内のCSSファイルのCSSセレクターなどを読み込んで、クラス名や、IDの入力時に入力を補完してくれる機能を追加する拡張です。

クラス名等の補完

CSSFier

CSSFier

HTMLのソースコードをコピーして、CSSファイルに貼り付けるだけで、全ての空のルールセットを自動で作成してくれる拡張です。

HTMLをコピーして貼り付けるだけでCSSレクタングルひな形を作ってくれる

わざわざ、CSSセレクタを書き込む必要がなく楽です。

Brackets CSSfier

Brackets WordPress Hint

Brackets WordPress Hint

WordPressのコード補完をしてくれます。

市Wordpressのコードのヒント

brackets-wp-hint

Brackets WordPress Functions Hints

Brackets WordPress Functions Hints

WordPressのテーマやプラグインのための関数やテンプレートタグのコードヒントです。

関数やテンプレートタグのコードヒント

brackets-wp-functions-hints

Brackets WordPress Hooks Hints

Brackets WordPress Hooks Hints

WordPressのテーマやプラグインのためのアクションフックやフィルターフックのコードヒントです。

プラグインのためのアクションフックやフィルターフックのコードヒント

brackets-wp-hooks-hints

PHP SmartHints

PHP SmartHints

PHPのコードヒントを表示してくれます。

関数は以下のようにFで表示されます。

関数の表示

変数は以下のように表示されます。

変数の表示

ユーザー定義変数にも対応しています。

PHP-SmartHints

Simple JS Code Hints

Simple JS Code Hints

JavaScriptのコードヒントです。

JavaScriptのコードヒント

Brackets JavaScript Code Hints

More HTML5 Code Hints

More HTML5 Code Hints

Bracketsデフォルトでも、ある程度のタグはヒントは表示されますが、content、picture、templateといったタグや属性もカバーされます。

HTML5補完

詳しいことは以下を参照してください。

Brackets-HTML5CodeHints

右クリック拡張

右クリック拡張

Bracketsのデフォルトでは、右クリックメニューは以下のようになっています。

Bracketsデフォルトの右クリックメニュー

「右クリック拡張」をインストールすると、以下のようなメニューが変わります。

  • 切り取り
  • コピー
  • 貼り付け
  • いろいろな文字変換
  • コメント機能など

右クリック拡張をインストールしたBracketsの右クリックメニュー

拡張のメニューなどは、英語で表記されることも多いのですが、この拡張の場合は、すべて日本語で表示されます。URIエンコード・デコードなども手軽にできるのは便利です。

Popup Menu Brackets

BluePrint Beta

BluePrint Beta

JavaScript、HTML、CSS、LESS、SCSS、PHP、pythonで、アウトラインとミニマップを表示させることができます。

以下がCSSのアウトライン。

BluePrint Betaでアウトラインを表示させたとき

以下がCSSのミニマップ。

BluePrint Betaでミニマップを表示させたとき

個人的に、アウトラインとミニマップは、この拡張が一番使いやすく感じます。ミニマップ表示も試した中では一番綺麗。

bluePrint Beta

Minimap

Minimap

Sublime Textのようなミニマップを表示してくれる拡張です。

Minimap

このミニマップは、コードに重なってしまうのが、ちょっと難。

表示するには、「表示」メニューから「Show Minimap」を選択する必要があります。

ミニマップの表示

brackets-minimap

WD Minimap

WD Minimap

こちらもミニマップを表示してくれる拡張です。

WD Minimapのスクリーンショット

brackets-wdminimap

Paste and Indent

Paste and Indent

インデントの異なるコードを貼り付けても、インデントを自動でそろえてくれます。

Paste and Indentの動作

通常は、以下の上のif文を下のif文内に貼り付けたとしたら、

以下のようにインデントが崩れてしまいます。

この拡張を使うことで、ちゃんとインデントをそろえて貼り付けてくれます。

Paste and Indent

JavaScript & CSS CDN Suggestions

JavaScript & CSS CDN Suggestions

scriptタグやstyleタグを書くと、CDNが使えるJSファイルやCSSファイルの名前を提案してくれ、選んでいくだけでCDN呼び出しタグを書くことができます。これがあると、ネットで探し回る必要ないかも。

JavaScript & CSS CDN Suggestionsの動作

Brackets Extension: CDN Suggestions

CDN Finder

CDN Finder

jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。

CDN Finderの動作画面

CDN Finder

Autoprefixer

Autoprefixer

名前の通り、ファイルの保存時に自動でプレフィックスを付与する拡張です。

Autoprefixerの動作

Can I Useの情報から判断して、不要なものは取るのぞいてもくれます。

Autoprefixerの動作(取り除く)

機能を有効にするには、「編集」メニューから「Auto prefix on save」にチェックをしておく必要があります。

Autoprefixer機能を有効にする

「Auto prefix selection」を選択すると、選択しているテキストのプレフィックスを最適化してくれます。

Brackets Autoprefixer

Brackets Css Color Preview

Brackets Css Color Preview

CSSのファイル内でカラーコードを使用しているとき、行番号部分にその色を表示してくれます。

行番号部分に色が表示される

Brackets-css-color-preview

colorHints

colorHints

CSSファイル内で、シャープキー(#)を押すと、これまでに使用したカラーコードを補完してくれます。

これまでに利用したカラーコードを補完してくれる

colorHints

Beautify

Beautify

JavaScript、CSS、HTMLのコードを綺麗に整形してくれる拡張です。

Beautifyの動作

保存時に、自動で成形するには、「編集」メニューから「Beautify on save」にチェックをつけてください。

保存時にコードを整形する

brackets-beautify

Minifier

Minifier

JavaScriptとCSSで、コードの縮小化を手軽に行うことができるようになります。

Minifier for Brackets

Indent Guides

Indent Guides

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

インデントにガイド線を表示してくれる

拡張機能を有効にするには、「表示」メニューから「Indent Guides」のチェックをオンにしてください。

インデントガイドを有効にする

Indent Guides for Brackets

Show Whitespace

Show Whitespace

半角スペースを、Sublime Text風に表示してくれる拡張です。

半角スペースをSublime Text風に表示

Show Whitespace

Indent softwrapped lines

Indent softwrapped lines

エディターの文字の折り返し部分を、自動で綺麗にインデントしてくれます。

デフォルトの折り返しだと以下のような表示になります。

Bracketsデフォルトの折り返し

インストールすると、Sublime Textのように、折り返し部分のインデントを自動で揃えてくれます。

Sublime Textのように折り返し部分を自動でインデントしてくれる

Indent softwrapped lines

JavaScript Globals

JavaScript Globals

JavaScriptコードのグローバル変数が、下線つきの赤色にハイライト表示されます。

グローバル変数が赤色下線つきになる

JavaScript Globals

HTML Block Selector

HTML Block Selector

開始タグか、終了タグにキャレットがある状態でCtrl+Shift+Tを押すと、そのタグ全体を選択してくれます。

タグ全体を選択してくれる

タグが多数入れ子になっていると、どれがどのタグだかわからなくなるので、そんな時に便利。

HTML Block Selector

Overscroll

Overscroll

ファイルのコード末尾より下に、ある程度スクロールできるようになる拡張です。地味に作業効率が上がります。

コードの最終行より下にスクロールできるようになる

Overscroll for Brackets

ImageToData

ImageToData

画像を手軽にDataURIに変換できる拡張です。

Alt+Shift+Gを押すと以下のようなダイアログが表示されるので、画像情報を入力します。(URLもしくはローカルから選択)

画像→データ変換ダイアログ

あとは「Convert it!」ボタンを押せばデータに変換できます。

画像をデータに変換する

ImageToData

Tabs Custom Working

Tabs Custom Working

Bracketsは、タブがありませんが、Sublime Textのようにタブ表示ができるようになる拡張です。

Tabs Custom Workingの動作画面

Bracketsには、サイドバーにタブの代わりとなる機能があるので、個人的にはタブは不要な気もしますが、タブ操作に慣れた人は利用するといいかも。

Tabs – Custom Working

Brackets File Icons

Brackets File Icons

ファイルの拡張子ごとにアイコンを表示してくれるので、どのようなファイルかパッと見でわかりやすくなります。

Brackets File Iconsを適用した状態

以下のような様々なファイルに対応しています。

Brackets File Icons

Brackets File Icons

Brackets Outline List

Brackets Outline List

右のツールバーにある「Toggle Outline」ボタンをクリックすることで、左サイドバーにアウトラインを表示することができるようになります。

Brackets Outline Listの動作

アウトラインは、JavaScript、CSS、HTML、PHPで有効です。

Brackets Outline List

Display Shortcuts

Display Shortcuts

「ヘルプ」メニューの「Show Shortcuts(Ctrl+Alt+/)」を選択することで、ショートカットリストを表示させることができます。

ショートカットの表示

操作に慣れないうちはカンニングペーパー代わりに。

brackets-display-shortcuts

Extension Rating

通常は、こんな感じの必要最低限の情報しかない拡張導入画面に

Extensions Rating導入前

以下の情報を付け加えて、拡張選びの参考情報を増やしてくれます。

  • 並び替え機能
  • 作者のアバター
  • ダウンロード数
  • スターの数
  • 対応言語
  • 追加情報

Extensions Rating導入後

Brackets Extension Rating

Shizimily Multiencoding for Brackets

Shizimily Multiencoding for Brackets

BracketsデフォルトではUTF-8しか利用できませんが、それ以外のShift_JIS、EUC-JP、GB18030、European、UTF-16、その他様々な、エンコーディングに対応させてくれます。

様々なエンコーディングに対応

Shizimily Multi-Encoding for Brackets

Brackets Editor Bookmarks

Brackets Editor Bookmarks

コード上に自由にブックマークを付けることができ、それらの間をジャンプで移動することができます。

Brackets Editor Bookmarksの動作

ブックマークは「ナビゲーション」メニューから「Toggle Bookmark」などを行うことでできます。

Brackets Bookmarks Extension

Various improvements

Various improvements

ファイルの更新日時や、サイズなどを表示してくれます。

ファイルの更新日時やサイズなどが表示される

Various improvements

CanIUse

CanIUse

Can I useで、ブラウザのサポート状況を手軽に調べることができます。

CanIUseで手軽にサポート状況を調べられる

CanIUse Extension

QuickDocsPHP

QuickDocsPHP

PHPのクイックドキュメントです。

PHPのクイックドキュメント

QuickDocsPHP

QuickDocsJS

QuickDocsJS

JavaScript、jQueryのクイックドキュメントです。

JavaScript、jQueryのクイックドキュメント

QuickDocsJS

QuickDocsRegEx

QuickDocsRegEx

正規表現のクイックドキュメントです。

以下は、URL正規表現のクイックドキュメント。

正規表現のクイックドキュメント

QuickDocsRegEx

まとめ

Bracketsには、数百もの拡張があるので、まだまだ知らないだけで良い拡張は沢山あるかもしれません。

良い拡張を見つけたら、また追加していきたいと思います。何か他に良い拡張をご存知でしたら、コメントなどで教えていただけると幸いです。

Bracketsには、Sublime Textには存在しないような拡張もいろいろあります。(知らないだけかも)逆に、Sublime TextにはあってBracketsには無い拡張や機能もあるわけですが。

とはいえ、双方とも独特な進化をしている良いエディターだと思います。どちらとも、いじっていてとても楽しいですから。