コーディングを爆速化するショートカット
前項で簡単に触れましたが、Edge Codeで快適にコーディングするためにいくつか抑えておくととても便利で感動するショートカットがあります。そんなに多くはないので、試しに使ってみることをおすすめします。
HTML上でCSSを直接編集？ 「command+E」
Edge Codeの最大の魅力という表現をすると大げさかもしれませんが、私はこれを初めてみた時にとても感動しました。HTMLファイルを開き、スタイルを確認したいタグにカーソルを合わせて、command+Eを押すと、タグのすぐ下に対応するCSSが表示されます。複数にスタイルが分けられている場合は、該当のファイル一覧のナビゲーションと共にスタイルが表示されます。ここでの編集は直接ファイルへ反映されます。
関数宣言へジャンプ 「command+E」
CSS編集と同じように、JavaScriptの関数宣言もまったく同じショートカットで同じようにインライン編集が可能です。呼び出している関数名の上にカーソルを合わせ、command+Eを押すと定義元が真下に展開されます。もちろんビルトイン関数は表示されませんが、ソースの研究や、引き継いだソースコードの編集時に重宝します。
直接色編集 「command+E」
色を指定している箇所で、command+Eを押すと、真下にカラーピッカーが現れます。Adobe Kulerとも連動し、コードを書きながらモックを作るワークフローを想起させてくれます。
Adobe KulerはAdobeが提供するカラーパレットを共有するコミュニティサイトで、カラーパレットをストックしたりダウンロードして、いくつかのAdobeツールとも連携できるサービスです。
なお、プレビュー5の時点で日本語環境ではバグがあるため、うまく連動されていないようです。連動させる方法は下記で詳しく解説されています。
CSSのクイックドキュメント 「command+K」
CSSプロパティの上でcommand+Kを押すことで、WebPlatform.orgのドキュメントを見ることができます。
クイックオープン 「command+shift+O」
フォルダ内のファイルをインクリメンタルサーチで絞込みをしながら、クイックオープンできます。
ファイル内関数クイック検索 「command+T」
ファイル内の関数をインクリメンタルサーチで絞込みをしながら、定義へ移動できます。
その他のショートカット
| 機能 | ショートカット |
|---|---|
| 行の削除 | command+shift+D |
| 行の複製 | command+D |
| ファイル内検索 | command+F |
| フォルダ内検索 | command+shift+F |
| ファイル内文字列置換 | command+option+F |
| 行コメント切り替え | command+/ |
| ブロックコメント切り替え | command+option+/ |
| すべてのウィンドウを閉じる | command+shift+W |
| すべてのファイルを保存 | command+option+S |
| フォルダを開く | command+option+O |
| コードヒントを表示 | control+space |
