【Mac】VSCodeのキーボードショートカット設定してますか？僕の設定を全公開！
どうも、フロントエンドエンジニアのおいなりです。
今回はテキストエディタのVSCodeのキーボードショートカットについての記事になります。
最近、無料のテキストエディタであればVSCodeの一択のような気がします（自分の周りだけか）。
かくいう僕も、これまでSublime Textから入り、atomを使い、Emacsに移って、さらにatomに戻ってきた、という経緯があります。その後、よく聞くようになっていたVSCodeに完全に移行してしまいました。
キーボードショートカットに興味を持った理由
僕がキーボードショートカットに興味を持った理由として、Emacsを使っていたということが挙げられます。
数年前の職場の先輩がEmacsを使っているのを見て、「めちゃめちゃかっこいい！！」と思い僕も使い始めました。よかったらみなさんもぜひ一度インストールして使ってみてください。
『GNU Emacs』
このEmacsというものは結構な曲者で、基本的に左側にツリー構造の表示もなければ、ワークスペース的な概念もありません。
キーバインド（キーボードショートカット）を駆使しなければ、ほぼ使い物になりません。
そんな経緯がありEmacsを使い始め、嫌でもキーボードショートカットを使わなければならず、そこからキーボードショートカットに興味を持つようになりました。
前置きはこのくらいにして、実際の確認・設定方法を見ていきましょう。
キーボードショートカットの確認
VSCodeを開いて、「shift + cmd + p」を押してください。 そうすると下記のようにコマンド入力の表示がVSCodeの画面上部に表示されます。日本語表示にしている方は日本語で表示されているはずです。
そこに「keyboard」と入力します。
この中にある「Open Default Keyboard Shortcuts (JSON)」がデフォルトのショートカットの設定で、「Open Keyboard Shortcuts (JSON)」が自分で設定するものになります。
下記のように左側にデフォルトの設定ファイル、右側に自分の設定ファイルを開くとわかりやすいです。
ショートカットの基本はこのような書き方になります。
//でコメントを残せるkeyの部分にキーの組み合わせを入力（例：shift + cmd + u、\は記号のエスケープに使用）commandはキーが押されたときに実行されるものの指定whenはそのコマンドが有効になるときの指定（指定なしの場合はいつも有効）
{
// エディタの分割
"key": "ctrl+\\",
"command": "workbench.action.splitEditor",
// "when": "" そのコマンドが有効になるとき
},では、試しに↑のショートカットを設定して使ってみましょう。
早速設定して使ってみよう
前述で右側に開いた自分の設定ファイルを下記のように変更してください。
変更したら保存しましょう。
たったこれだけです。
これで自分で設定したキーボードショートカットが使えるようになりました。
「ctrl」キーを押しながら「\」を押すと、画面が分割されたはずです
このようにして、自分でどんどん設定していくことが可能です。
デフォルトの設定を自分の使いやすいショートカットに上書きすることも、デフォルトには存在しないショートカットを設定することも可能です。
デフォルトのキーボードショートカットの設定ファイルの下のほうに、下記のような記述がされています。
// Here are other available commands: これより下はデフォルトでは定義されていないが、設定が可能なものが書かれているのでそこを参考にしてみましょう。
まとめ
かなり簡潔に書いてしまいましたが、設定すること自体は本当に簡単です。
デフォルトで設定されていても自分で設定しても、使わなければ意味がありません。数種類使いこなせるようになったら、さらに数種類使えるようにすることを意識してみましょう。
キーボードショートカットを使いこなせるようになれば、マウスや方向キーなどホームポジションから移動せざるを得ない動作を減らすことが可能です。
そうなると確実に作業は早くなり作業効率が上がるはずなので、使いこなせるようにしていきましょう。
最後に僕が設定している、キーボードショートカットを載せておきますので参考にしていただければと思います。
ちなみに、noteでも下記のように、それっぽいことを書いてます。
僕のショートカットキーの全て
結構長いです。
また、Emacsを使っていたときのものを踏襲していることが多いので、このまま流用すると慣れるまで大変だと思うのでおすすめはできません。。。
コメントは一応載せているので、それを参考にしてもらいるとという感じです。
// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
// ------------------------------------------------------
// 取り消し系
{
"key": "ctrl+g",
"command": "-workbench.action.gotoLine"
},
{
"key": "ctrl+g",
"command": "closeParameterHints",
"when": "editorFocus && parameterHintsVisible"
},
{
"key": "ctrl+g",
"command": "closeFindWidget",
"when": "editorFocus && findWidgetVisible"
},
{
"key": "ctrl+g",
"command": "closeReferenceSearchEditor",
"when": "inReferenceSearchEditor && !config.editor.stablePeek"
},
{
"key": "ctrl+g",
"command": "closeReferenceSearch",
"when": "referenceSearchVisible && !config.editor.stablePeek"
},
{
"key": "ctrl+g",
"command": "removeSecondaryCursors",
"when": "editorHasMultipleSelections && editorTextFocus"
},
{
"key": "ctrl+g",
"command": "closeBreakpointWidget",
"when": "breakpointWidgetVisible && editorFocus"
},
{
"key": "ctrl+g",
"command": "leaveSnippet",
"when": "editorTextFocus && inSnippetMode"
},
{
"key": "ctrl+g",
"command": "closeMarkersNavigation",
"when": "editorFocus && markersNavigationVisible"
},
{
"key": "ctrl+g",
"command": "closeParameterHints",
"when": "editorTextFocus && parameterHintsVisible"
},
{
"key": "ctrl+g",
"command": "hideSuggestWidget",
"when": "editorTextFocus && suggestWidgetVisible"
},
{
"key": "ctrl+g",
"command": "cancelRenameInput",
"when": "editorFocus && renameInputVisible"
},
{
"key": "ctrl+g",
"command": "closeAccessibilityHelp",
"when": "accessibilityHelpWidgetVisible && editorFocus"
},
{
"key": "ctrl+g",
"command": "closeReplaceInFilesWidget",
"when": "replaceInputBoxFocus && searchViewletVisible"
},
{
"key": "ctrl+g",
"command": "workbench.action.closeQuickOpen",
"when": "inQuickOpen"
},
{
"key": "ctrl+g",
"command": "search.action.cancel",
"when": "listFocus && searchViewletVisible && !inputFocus"
},
{
"key": "ctrl+g",
"command": "cancelSelection",
"when": "editorHasSelection && textInputFocus"
},
// 取り消し系
// ------------------------------------------------------
// ------------------------------------------------------
// 画面操作
{
// エディタの分割
"key": "ctrl+\\",
"command": "workbench.action.splitEditor"
},
{
// フォーカスしてるエディタの切換（次）
"key": "ctrl+o",
"command": "workbench.action.focusNextGroup"
},
{
// サイドバーにフォーカス
"key": "ctrl+0",
"command": "workbench.action.focusSideBar"
},
{
// エディタにフォーカス
"key": "ctrl+cmd+0",
"command": "workbench.action.focusActiveEditorGroup"
},
{
// サイドバーメニュー（一番左）の下移動
"key": "ctrl+u",
"command": "workbench.action.nextSideBarView"
},
{
// サイドバーメニュー（一番左）の上移動
"key": "ctrl+cmd+u",
"command": "workbench.action.previousSideBarView"
},
{
// 検索
"key": "ctrl+s",
"command": "actions.find",
"when": "!findWidgetVisible"
},
{
// 先のものの検索
"key": "ctrl+s",
"command": "editor.action.nextMatchFindAction",
"when": "findWidgetVisible"
},
{
// 検索
"key": "ctrl+r",
"command": "actions.find",
"when": "!findWidgetVisible"
},
{
// さかのぼって検索
"key": "ctrl+r",
"command": "editor.action.previousMatchFindAction",
"when": "findWidgetVisible"
},
{
// パネル（タブはprobleems）の開閉
"key": "cmd+j",
"command": "workbench.action.tasks.toggleProblems",
"when": "textInputFocus"
},
{
// ホバーして確認できるツールチップとかの表示
"key": "cmd+i",
"command": "editor.action.showHover",
"when": "editorTextFocus"
},
// 画面操作
// ------------------------------------------------------
// ------------------------------------------------------
// undo / redo
{
"key": "ctrl+z",
"command": "undo",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "ctrl+z",
"command": "editor.action.webvieweditor.undo",
"when": "!editorFocus && !inputFocus && activeEditor == 'WebviewEditor'"
},
{
"key": "ctrl+/",
"command": "redo",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "ctrl+/",
"command": "editor.action.webvieweditor.redo",
"when": "!editorFocus && !inputFocus && activeEditor == 'WebviewEditor'"
},
// undo / redo
// ------------------------------------------------------
// ------------------------------------------------------
// 移動（右・左・上・下・文末への移動はデフォルトでついてる）
{
// 文頭
"key": "ctrl+a",
"command": "cursorHome",
"when": "textInputFocus"
},
{
// 一番上
"key": "ctrl+shift+.",
"command": "cursorBottom",
"when": "textInputFocus"
},
{
// 一番下
"key": "ctrl+shift+,",
"command": "cursorTop",
"when": "textInputFocus"
},
{
// 1単語右
"key": "alt+f",
"command": "cursorWordRight",
"when": "editorTextFocus"
},
{
// 1単語左
"key": "alt+b",
"command": "cursorWordLeft",
"when": "editorTextFocus"
},
{
// ページ送り下
"key": "ctrl+v",
"command": "cursorPageDown",
"when": "textInputFocus"
},
{
// ページ送り上
"key": "alt+v",
"command": "cursorPageUp",
"when": "textInputFocus"
},
{
// カーソルの位置はそのままで1行下にスクロール
"key": "ctrl+l",
"command": "scrollLineDown",
"when": "textInputFocus"
},
{
// カーソルの位置はそのままで1行上にスクロール
"key": "ctrl+cmd+l",
"command": "scrollLineUp",
"when": "textInputFocus"
},
{
// 上にカーソル追加
"key": "ctrl+cmd+p",
"command": "editor.action.insertCursorAbove",
"when": "editorTextFocus"
},
{
// 下にカーソル追加
"key": "ctrl+cmd+n",
"command": "editor.action.insertCursorBelow",
"when": "editorTextFocus"
},
// 移動（右・左・上・下・文末への移動はデフォルトでついてる）
// ------------------------------------------------------
// ------------------------------------------------------
// 選択系
{
// いい感じに選択してくれる
"key": "ctrl+shift+x",
"command": "editor.action.smartSelect.expand",
"when": "editorTextFocus"
},
{
// いい感じに選択してくれたやつをいい感じに縮めてくれる
"key": "ctrl+shift+s",
"command": "editor.action.smartSelect.shrink",
"when": "editorTextFocus"
},
{
// 右1文字選択
"key": "ctrl+shift+f",
"command": "cursorRightSelect",
"when": "editorTextFocus"
},
{
// 左1文字選択
"key": "ctrl+shift+b",
"command": "cursorLeftSelect",
"when": "editorTextFocus"
},
{
// 1単語右選択
"key": "alt+shift+f",
"command": "cursorWordRightSelect",
"when": "editorTextFocus"
},
{
// 1単語左選択
"key": "alt+shift+b",
"command": "cursorWordLeftSelect",
"when": "editorTextFocus"
},
{
// カーソルから下の行の選択
"key": "ctrl+shift+n",
"command": "cursorDownSelect",
"when": "editorTextFocus"
},
{
// カーソルから下の行の選択
"key": "ctrl+shift+p",
"command": "cursorUpSelect",
"when": "editorTextFocus"
},
{
// カーソルから文頭まで選択
"key": "ctrl+shift+a",
"command": "cursorHomeSelect",
"when": "editorTextFocus"
},
{
// カーソルから文末まで選択
"key": "ctrl+shift+e",
"command": "cursorEndSelect",
"when": "editorTextFocus"
},
// 選択系
// ------------------------------------------------------
// ------------------------------------------------------
// マークダウン（プラグインのMarkdown all in oneも含め）
{
"key": "ctrl+shift+m",
"command": "-editor.action.toggleTabFocusMode"
},
{
"key": "ctrl+shift+m",
"command": "markdown.showPreviewToSide",
"when": "editorLangId == 'markdown'"
},
{
"key": "shift+cmd+v",
"command": "-markdown.showPreview",
"when": "!editorLangId == 'markdown'"
},
{
"key": "cmd+k v",
"command": "-markdown.showPreviewToSide",
"when": "!editorLangId == 'markdown'"
},
{
"key": "cmd+m",
"command": "-markdown.extension.editing.toggleMath",
"when": "editorTextFocus && !editorReadonly && editorLangId == 'markdown'"
},
// マークダウン（プラグインのMarkdown all in oneも含め）
// ------------------------------------------------------
// ------------------------------------------------------
// ファイル操作
{
// 最近開いたもの検索
"key": "ctrl+x ctrl+f",
"command": "workbench.action.quickOpen"
},
{
// ツリービューから開く
"key": "enter",
"command": "macros.openFileAndKeep",
"when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"
},
{
// ツリービューから開く
"key": "ctrl+m",
"command": "macros.openFileAndKeep",
"when": "explorerViewletFocus && explorerViewletVisible && !inputFocus"
},
{
// ツリービューで名前変更
"key": "alt+r",
"command": "renameFile",
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
},
{
// ツリービューでファイル作成
"key": "cmd+n",
"command": "explorer.newFile",
"when": "explorerViewletFocus"
},
{
// ツリービューのフォルダを閉じる
"key": "ctrl+b",
"command": "list.collapse",
"when": "listFocus && !inputFocus"
},
{
// ツリービューのフォルダを開ける
"key": "ctrl+f",
"command": "list.expand",
"when": "listFocus && !inputFocus"
},
{
// 何かを閉じる（何だろ？）
"key": "ctrl+b",
"command": "notification.collapse",
"when": "notificationFocus"
},
{
// 何かを開ける（何だろ？）
"key": "ctrl+f",
"command": "notification.expand",
"when": "notificationFocus"
},
// ファイル操作
// ------------------------------------------------------
// ------------------------------------------------------
// 候補の中からctrl+mで選択
{
"key": "ctrl+m",
"command": "acceptSelectedSuggestion",
"when": "suggestWidgetVisible && textInputFocus"
},
// ------------------------------------------------------
// debugger
{
"key": "ctrl+shift+d",
"command": "workbench.action.debug.start",
"when": "!inDebugMode"
},
{
"key": "ctrl+shift+d",
"command": "workbench.action.debug.continue",
"when": "inDebugMode"
},
{
"key": "ctrl+shift+cmd+d",
"command": "workbench.action.debug.stop",
"when": "inDebugMode"
}
]