Bracketsのプラグインのラインナップはとても充実しており、うまく組み合わせればパワフルなエディタを構築することができます。今回はフロントエンド開発に役立つであろうプラグインをピックアップして紹介します。気になった機能は試しにインストールしてみることをおすすめします。
拡張機能のインストール方法
現在のEdge Code CC Preview 5では、拡張機能のインストールパネルが表示されません。拡張機能はオンラインの一覧からURLを取得してインストールすることもできますが、エディタ内からシームレスにインストールしたいので、パネルを表示させる方法をこちらを参考にして有効にしてください。
有効にできない場合は、Brackets Extension RegistryからインストールしたいプラグインのURLを、［File］-［Extension Manager…］より入力してインストールしてください。
UI関連
Themes
CodeMirrorベースのテーマセットを使えるようになるプラグイン。インストールするとThemesというメニューが追加され、Sublime Textなどでおなじみの、Monokaiなどのテーマが選べるようになります。
brackets-code-folding
Edge Codeにはデフォルトでコード折りたたみ機能がついていないため、このプラグインを入れておくと良いでしょう。js/json/css/html/less/xmlファイルに対応しています。
Markdown Preview
Markdownファイルをプレビューするパネルを表示してくれるプラグイン。インストールすると、右のメニューにボタンが追加され、Markdownファイルを開いている時のみ有効になります。
Vimderbar
Edge Codeをvim化してくれるプラグイン。挿入モード、ヴィジュアルモードの切り替えができ、基本のキーバインディングや:コマンドも使えるようになり、vimのような操作を可能にしてくれます。
ユーティリティ
To Gist
EditメニューにCreate Gistというメニューが追加されます。エディタ上の選択エリアを新規ウィンドウで開き、匿名のGist URLを生成して表示してくれるプラグイン。
Todo
TODO/NOTE/FIXME/CHANGESの4種類のTODOコメントの一覧を出せるようにするプラグイン。コメントの行頭に各キーワードを付記するだけで、一覧にTODOが出るようになります。とても管理しやすく、カラーリングも見やすい。
Brackets Key Remapper
FileメニューにRemap Keys…というメニューが追加されます。これはキーボードショートカットを設定する機能を追加してくれるプラグインです。Edge Codeはデフォルトでキーボードショートカットのカスタマイズができないので重宝します。
Close Others
サイドナビのコンテキストメニューに、Close Othersというメニューが追加されます。今開いているファイル以外を一括で閉じる機能を追加してくれるプラグイン。
コード整形
Emmet
もはや説明は不要ですね。これがないと始まりません。
Prefixr
http://prefixr.com/のプリフィックス機能をエディタ上で使えるようにするプラグイン。EditメニューにGenerate CSS Prefixesというメニューが追加されます。選択した範囲のCSSコードに、ベンダープリフィックスを追記してくれます。
コード向けユーティリティ
Beautify
alt+command+LでJavaScript/HTML/CSSファイルを整形してくれるプラグイン。使いやすいです。
W3CValidation
リアルタイムでHTMLバリデーションをしてくれるプラグイン。
Snippets
f myFuncと打つと、下記のようにfunction定義を展開してくれます。
function myFunc () {
}
for x myArrayと打つと変数定義して、for文を展開してくれます。
var x;
for (x = 0; x < myArray.length; x++) {
}
ImageToData
インストールすると、右のメニューにボタンが追加されます。ボタンクリックで表示されるダイアログで直接画像のURLを指定すると、Data URIに変換してくれます。
Image dimension extractor
このプラグインをインストールすると、コンテキストメニューにGet image dimensionというメニューが追加されます。また、CSSファイル上の画像パスを記述している箇所で実行すると、画像の幅と高さのプロパティが追加されます。
String Convert
文字列を変換するメソッドを、Editメニュー/コンテキストメニューに追加してくれるプラグインです。
以下のメニューが使えるようになります。
To Upper Case/To Lower Case/HTML Entity Encode/HTML Entity Decode/Double to Single Quotes/Single to Double Quotes/Toggle Quotes/Encode URI Component/Decode URI Component Strip Trailing Whitespace/Convert Tabs to Spaces/Convert Spaces to Tabs
Special Html Characters
コンテキストメニューに、特殊文字を表示するHTMLのショートカット機能を追加してくれるプラグイン。コピーライトやトレードマークなどの特殊文字を簡単に挿入できるようにしてくれます。
JSHint
標準ではJSLintのパネルのみ搭載されています。このプラグインでJSHintのエラーパネルを追加できます。少しLineの列幅が広いのはご愛嬌です。
Interactive-Linter
自前のlinterをプロジェクト単位で使えるようにしてくれるプラグイン。プロジェクトフォルダに.jshintrc/.jslintrc/.coffeelintrcを用意することで有効になり、エラー箇所の行頭にアテンションを出してくれます。
xUnit&Blanket
Jasmine/QUnit/YUI3などのテストをサポートしてくれるプラグイン。JSのコードから自動でテスト定義を生成してくれる機能を備えています。詳しくは、YouTubeの紹介映像でご覧いただけます。
プロジェクトテンプレート
Brackets New Project Creator
プロジェクトファイルのブートストラップ機能を追加してくれるプラグイン。デフォルトでHTML5/HTML5 with jQuery/Brackets Extensionのプロジェクトテンプレートが利用できます。これは便利です。
Creative Cloud Extension Builder
Photoshop/Illustrator/Premire/Prelude/InDesignの拡張機能を作成するビルダーを提供してくれるプラグイン。ダイアログで対象にしたいアプリケーションと拡張機能名、IDを入力して作成するだけで、ひな形が対象アプリケーションにインストールされます。Edge Code上でそのままひな形のプロジェクトが開かれ、すぐに開発を始めることが可能です。
入れておくと便利かも？
Column Ruler
これはちょっと面白いプラグイン。有効にすると文字数のガイドとルーラーを表示してくれます。ただし、フォントをsource code proで表示している場合は、うまく動かないようです。
Unused Files
プロジェクト内で利用されていないファイルを検索して、一覧で表示してくれるプラグイン。あくまで一覧表示してくれるだけですが、うっかり残してしまっているゴミファイルなどを探すときには重宝するかもしれません。
PageSuck
alt+Sで表示されるダイアログにWebサイトのURLを入力するだけで、当該のページのhtmlを抜き出し、Edge Code上に新規ファイルで表示してくれます。
Lorem Ipsum
ダミーテキストを生成してくれるプラグイン。lorem+Tabでダミーテキストを展開してくれます。その他にも文字数の制限を切り替える記法が用意されています。詳しくはgithubのページを確認してみてください。
HTML製エディタならではの統合性
いかがでしたでしょうか。うまくプラグインを組み合わせると、かなり豊富な機能を備えたエディタが構築できることを実感できたと思います。これからプラグインの数がもっと増えていくことで、より可能性が増していくのではないでしょうか。Extension Managerで簡単に管理できるので、ぜひ試しに使ってみてください。次回は、自前のプラグインを作成する方法を見ていきたいと思います。
