Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

「Adobe Edge Code」で使える、コーディングを加速させる様々なプラグイン

「Adobe Edge Code CC」徹底入門(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/09/26 14:00

 Edge Codeはエディタ自体がHTML5で構築されており、拡張機能もHTML5で作成されています。前回までで触れている通り、Edge CodeはBracketsのディストリビューションであることから、Bracketsの拡張機能はEdge Codeでもほぼそのまま利用可能です。「ほぼ」と書いたのは、Bracketsはバージョンアップの頻度が高く、最新のBrackets用の拡張機能が使えない場合もあるためです。

目次

 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のような操作を可能にしてくれます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5