CodeMirrorのショートカット

コードエディタ

CodeMirrorとはブラウザでコーディング用のエディタを実現するためのJavaScriptライブラリです。

多数のプログラミング言語のシンタックスハイライト、自動インデントなどコードエディタに必要な機能を備えています。

ショートカットが使えることが多い

ブラウザで動作するコードエディタにはCodeMirrorで実現されているものが多くあります。

有名なところではWordPressのテーマエディタとプラグインエディタでもCodeMirrorが使われており、PHP、HTML、CSSなどがシンタックスハイライトされます。

こうしたエディタではキーボードショートカットが使えることが多いです。

例えばなんとなくCtrl + Fを押してみると検索ができたりします。

しかし、どんなショートカットが使えるのか明確でないエディタも多くあります。

CodeMirrorのコマンド

そうしたショートカットはCodeMirror.commandsオブジェクトによって定義されるコマンドを実行します。

コマンドもそれに対応するショートカットもCodeMirrorのデフォルトのままというのがほとんどのようです(独自に追加していればさすがにマニュアルなどで明確にするかと)。

下表はデフォルトのコマンドとショートカットです。

CodeMirrorコマンド ショートカット 操作
Windows Mac
save Ctrl+SCmd+S保存
find Ctrl+FCmd+F検索
findNext Ctrl+GCmd+G次を検索
findPrev Shift+Ctrl+GShift+Cmd+G前を検索
replace Shift+Ctrl+FCmd+option+F置換
replaceAll Shift+Ctrl+RShift+Cmd+option+F全て置換
defaultTab Tab選択範囲があれば1インデントする
なければタブ文字を挿入
indentAuto Shift+Tabカーソル行か選択範囲を自動インデントする
indentMore Ctrl+]Cmd+]現在行か選択範囲をインデントする
indentLess Ctrl+[Cmd+[現在行か選択範囲をデデントする
newlineAndIndent Enter改行を挿入し自動インデントする
insertTab タブを挿入する
insertSoftTab タブ幅に合わせてスペースを挿入
killLine Ctrl+K行末まで削除
delLineLeft 行頭まで削除
deleteLine Ctrl+DCmd+D行を削除
delWrappedLineLeft Cmd+delete物理行頭まで削除
delWrappedLineRight Cmd+fn+delete物理行末まで削除
delCharBefore Shift+BackspaceCtrl+H前の文字を削除
delCharAfter DeleteCtrl+D後ろの文字を削除
delWordBefore option+delete前の単語を削除
delWordAfter option+D後ろの単語を削除
delGroupBefore Ctrl+Backspaceoption+deleteグループの先頭まで削除
delGroupAfter Ctrl+DeleteCtrl+option+delete
option+fn+delete
グループの最後まで削除
transposeChars Ctrl+ T前後の文字を入れ替える
undo Ctrl+ZCmd+Zアンドゥ
redo Ctrl+YShift+Cmd+Z
Cmd+Y
リドゥ
toggleOverwrite Insert上書きフラグをON/OFFする
goDocStart Ctrl+HomeCmd+Home
Cmd+
ファイル先頭へ移動
goDocEnd Ctrl+EndCmd+End
Cmd+
ファイル末尾へ移動
goLineStart Alt+Ctrl+A行頭へ移動
goLineStartSmart Home行頭へ移動
goLineEnd Alt+Ctrl+E行末へ移動
goLineRight Cmd+物理行末へ移動
goLineLeft Cmd+物理行頭へ移動
goLineLeftSmart 物理行頭へ移動
goLineUp
Ctrl+P
上へ1行移動
goLineDown
Ctrl+N
下へ1行移動
goPageUp PageUpPageUp
Shift+Ctrl+V
上へ1画面移動
goPageDown PageDownPageDown
Ctrl+V
下へ1画面移動
goCharLeft
Ctrl+B
左へ1文字移動
goCharRight
Ctrl+F
右へ1文字移動
goWordLeft option+B前の単語の先頭へ移動
goWordRight option+F次の単語の末尾へ移動
goGroupLeft Ctrl+option+前のグループの左に移動
goGroupRight Ctrl+option+後ろのグループの右へ移動
goColumnLeft 線境界を越えずに左へ1文字移動
goColumnRight 線境界を越えずに右へ1文字移動
selectAll Ctrl+ACmd+A全選択
singleSelection Escプライマリ以外の選択範囲を解除
undoSelection Ctrl+UCmd+U範囲選択の変更をアンドゥ
redoSelection Alt+UShift+Cmd+U範囲選択の変更をリドゥ

上の表でショートカットが割り当てられているコマンドは実際にショートカットが使える可能性が大きいです。

ブラウザベースのコードエディタを使っているならとりあえず試してみても損はないかと思います。

ショートカットを活用すればコーディングが速くなるためです。

WindowsとMacの判定はできない?

ショートカットはWindowsとMacで別れていますが、実際にはクライアントがWindowsかMacかの判定はできないようです。

例えばfindコマンドはMacだとCmd+Fのはずですが、Windows用のCtrl+Fでも実行されてしまいます。

その代わり、MacではCtrl+Fに割り当てらているはずのgoCharRightが機能していません。

コメント