その他の特徴
ブラウザ上で該当CSS箇所のハイライト
Edge Codeには、Google Chrome Developer Toolsにおける要素の検証に似た機能が備わっています。ライブプレビュー中にCSSファイルの定義にカーソルを合わせるとブラウザ内の該当箇所がハイライトされます。
Developer Tools上で編集した場合、最終的にファイルに反映する必要がありますが、Edge Codeではその手間が省け、かなりの開発効率向上につながります。
JavaScriptコードサポート
Edge CodeのJavaScriptコードサポートは、Tern projectをベースに作られています。Tern ProjectはオープンソースのJavaScriptコードサポートエンジンです。Edge CodeはRequireJSやjQueryの標準サポートやキャメルケースのサポートもサポートしています。
画像の直接プレビュー
地味に嬉しい機能が、画像パスを記述したコードの上にカーソルを合わせるだけでコード上に直接サムネールが表示される機能です。別のイメージが入っていないか分かりやすい上に、正しいパスが挿入されているかどうかを確認できるので、重宝する機能です。
相対パスのコードヒント
地味に嬉しいシリーズでもう一つ、相対パスの候補をコードヒントで出してくれる機能が便利です。CSSやJavaScriptで使うのと同じように、imgのソース指定やaタグのリンク指定などでcontrol+spaceを押すと、パスの一覧を候補で表示してくれます。
モバイルファースト開発の万能エディタ
Edge Codeの機能を駆け足で見てきましたが、いかがでしたでしょうか。軽量にリッチな機能を備えているため、さまざまな活用シーンが想定されます。何よりも気軽にモバイルサイト開発向けの環境が整うことはAdobeのエディタならではの優位性だと感じます。次回はEdge Codeをより便利に使うために入れておきたい拡張機能を紹介します。
