Edited at

VS Code の便利なショートカットキー

Visual Studio Codeを自分が使用する際に便利なショートカットキーを、忘れないようにまとめておく。Windows版。バージョン1.31で確認。


編集系



  1. Ctrl + Enter カーソル行の下に空行を挿入


  2. Ctrl + Shift + Enter カーソル行の上(というかカーソル行?)に空行を挿入


  3. Alt + / カーソル行/選択行をまるっと移動(複数行対応)


  4. Alt + Shift + / カーソル行/選択行をまるっとコピー(複数行対応)


  5. Ctrl + C 選択範囲をコピー。非選択状態で使用すると行コピーになる


  6. Ctrl + X 選択範囲を切り取り。非選択状態で使用すると行切り取りになる

1.は次の行を入力したい時、今まではカーソルを一旦行末に持っていってからEnterとかやっていたが、カーソルが行の途中にあってもパッと次の行が入力できるので便利。

3.は移動距離が近ければいちいちコピペしなくてよいので便利。


移動/スクロール系



  • Ctrl + Home/End ファイルの先頭/末尾に移動


  • Home 行頭に移動。


    • インデントされている行の場合は文字の先頭に移動する。もう一度Homeを押すと行頭に移動する。さらにHomeを押すとまた文字の先頭に移動する。

    • さらに、折り返し表示の行の場合は、物理行の文字の先頭→論理行の文字の先頭→行頭と移動する。




  • End 行末に移動。


    • 折り返し表示の行の場合は、物理行の行末→論理行の行末と移動する。




  • Alt + Z 折り返しする/しないの切り替え


  • Ctrl + / 単語の先頭にジャンプ


  • Ctrl + / カーソル位置はそのままで上下にスクロール


  • Alt + PgUp/PgDn カーソル位置はそのままでPgUp/PgDn


  • Ctrl + Shift +  対応する括弧にジャンプ(言語によっては対応していない)


    • Windowsの日本語キーボードの場合、は右上の円記号のキーを使用する。右下にバックスラッシュのキーがあるがこちらは反応しないので注意。




  • Ctrl + G 指定した行にジャンプ


    • 行番号を入力するとその行に仮ジャンプする。Enterを押すと行移動が確定し、Escを押すと元の位置に戻る。

    • 行番号にマイナス値を指定すると、最下行からの相対行にジャンプできる(v1.38以降)

    • 行番号の後ろにカンマ区切りで桁位置も指定できる。




  • Ctrl + K Ctrl + Q 最後の編集位置に移動(ver1.28以降)


    • 間違えて変な場所にジャンプしてしまった時に便利!



なお、キャメルケースやスネークケースの単位で移動や選択などを行うコマンドも存在するが、デフォルトではキー割り当てはされていないため、使用したい場合は自身でキー定義を行う必要がある。


  • 左へ移動(cursorWordPartLeft)

  • 右へ移動(cursorWordPartRight)

  • 左へ選択(cursorWordPartLeftSelect)

  • 右へ選択(cursorWordPartRightSelect)

  • 左へ削除(deleteWordPartLeft)

  • 右へ削除(deleteWordPartRight)

ちなみに、これらのコマンドが追加された当初は、左への移動や選択のコマンド名は~Left/~LeftSelectではなく、~StartLeft/~StartLeftSelectだったが、分かりづらいためStart無しに変更された。ただし互換性を考慮して以前のコマンド名もエイリアスとして残されているため、ショートカットの設定画面ではこれらの旧コマンド名も表示される。

image.png


選択系



  • Shift + / カーソル移動しつつ文字選択


  • Ctrl + Shift + / 単語単位でカーソル移動しつつ選択


    • 上記2つのコマンドは非選択状態で使用すると現在のカーソル位置を起点に選択が始まる。選択状態で使用するとその選択をキープしたままの追加選択となる。さらに/の代わりに/キーを押すとカーソルを行移動しつつの選択となる。




  • Ctrl + D 単語選択。本来は複数選択のためのキーだが1回だけ使用する場合は実質的な単語選択として使える(ことが多い)。


  • Ctrl + L 行選択してカーソルを下の行に移動。つまり連続して押していくと1行ずつ行選択が増えていく。


    • ver1.31以前はCtrl + Iだった




  • Shift + Alt + / スマート選択の範囲の拡大/縮小


    • どのような単位で選択されるかは言語モードによって異なる。

    • IntelliJ IDEAでいうところのCtrl + Wに相当。

    • Javaのスマート選択については今まではなんとなくな感じの対応だったが最近正式に対応になった。



スマート選択の例(Javaコードの場合)

リテラル値にカーソルがある状態で選択範囲を広げると、まずリテラル値全体が選択され、次に引用符までが選択され、次にステートメント全体まで、...と拡がっていく。

java_smart.gif


マルチカーソル/複数選択/矩形選択系


マルチカーソル



  • Alt + Ctrl + / マルチカーソルを上/下に広げる。


    • マウス操作の場合はAlt+クリックでカーソル追加。コマンドマルチカーソル修飾子の切り替え(Toggle Multi-Cursor Modifier、メニューバーの場合は選択-マルチカーソルをCtrl+Clickに切り替える)を実行するとCtrl+クリックに切り替わる。




複数選択



  • Ctrl + D 選択されている文字列(あるいはカーソル周辺の単語)を選択に追加。複数回追加するとマルチカーソル状態になる。Ctrl+Shift+Lの個別版。


  • Ctrl + Shift + L 選択されている文字列(あるいはカーソル周辺の単語)と一致する文字列をすべて選択する。複数個選択した場合はマルチカーソル状態になる。Ctrl+Dの一括版。


矩形選択



  • Ctrl + Shift + Alt + /// 現在のカーソル位置を起点に矩形選択。選択が複数行の場合はマルチカーソル状態になる。


    • マウス操作の場合はAlt+Shift+ドラッグ。



  • 矩形選択された状態で Ctrl + Shift + Alt + PgUp/PgDn を押すと、上/下方向にページ単位で選択を拡張する。

いずれもESCを押すかあるいはマウスクリックで解除される。

マルチカーソル機能はすべてのカーソル位置に対して同じキー操作が行われるので、コードの中の複数箇所を同じように修正したい場合などに結構便利。


検索系


エディタ内検索



  • Ctrl + F エディタ内の検索


  • Ctrl + H エディタ内の置換


検索中の操作



  • F3 / Shift + F3 次の/前の検索結果にジャンプ


    • 検索条件フィールドにフォーカスがある時はEnter / Shift+Enterでも可。



  • エディタにフォーカスがある時に検索条件フィールドにフォーカスを移動させるにはCtrl+Fを押す。


  • Alt + C 大文字小文字の区別をする/しないの切り替え


  • Alt + W 単語単位で検索する/しないの切り替え


  • Alt + R 正規表現で検索する/しないの切り替え


  • Alt + L エディタ全体を検索/選択範囲を検索の切り替え


フォルダ/ワークスペース全体



  • Ctrl + Shift + F フォルダ/ワークスペース全体を検索


    • 特定のフォルダ配下を検索したい場合はファイルエクスプローラでフォルダを右クリックして「フォルダー内を検索」




  • Ctrl + Shift + H フォルダ/ワークスペース全体を置換


  • F4 / Shift + F4 次の/前の検索結果にジャンプ


共通


  • (検索ボックス内で)(Alt +) / 検索履歴の表示


開く系



  • Ctrl + N 新規にエディタを開く(閉じるのはCtrl + W


  • Ctrl + Shift + N 新規にウィンドウを開く(閉じるのはCtrl + Shift + W


  • Ctrl + , 設定画面を開く


  • Ctrl + K Ctrl + S ショートカットキーの設定を開く(Keyborad Shortcutと覚える!)


  • Ctrl + Q Quick Open ビュー。Ctrlを押しながらQを打つとメニューが表示されるので、そのままCtrlは離さずにQをポンポン打っていくとメニューフォーカスが移動する。開きたい項目までフォーカスが移動した状態でCtrlを離すとビューが開く。


    • フォーカスの移動は/Shift+Qでも可(いずれもCtrlは押しっぱなし)

    • この操作で開けるビューは、サイドバー、パネルはもちろん、エクスプローラやデバッグの中のカスタムビューや、ターミナルや出力パネルの出力内容も直接選択して開くことができるので結構便利。



  • サイドバー系



    • Ctrl + B サイドバーを開く/閉じる


    • Ctrl + Shift + E エクスプローラーを開く


    • Ctrl + Shift + F 検索を開く


    • Ctrl + Shift + G ソース管理を開く


    • Ctrl + Shift + D デバッグを開く


    • Ctrl + Shift + X 拡張機能を開く



      • 検索を開く以外は、もう一度キーを押すとサイドバーを開いたまま、エディタにフォーカスが戻る





  • パネル系



    • Ctrl + J パネルを開く/閉じる


    • Ctrl + Shift + U 出力を開く/閉じる


    • Ctrl + Shift + M 問題を開く/閉じる


    • Ctrl + Shift + Y デバッグコンソールを開く/閉じる


    • Ctrl + @ 統合ターミナルを開く/閉じる


      • 閉じるのは表示を閉じるだけでターミナル自体は終了しない

      • Ctrl+J以外の個別パネル操作については、v1.28から挙動が変わり、パネルが表示されていてフォーカスがパネル以外の場所にある時にキーを押すとそのパネルにフォーカスが移動するようになった






閉じる系



  • Ctrl + F4 アクティブエディタを閉じる。


  • Ctrl + W アクティブエディタを閉じる。開いているエディタが無い場合、VS Code自体を閉じる。


  • Ctrl + K W エディタグループ内をすべて閉じる


  • Ctrl + K Ctrl + W エディタをすべて閉じる


  • Ctrl + Shift + W VS Codeを閉じる

ちなみにショートカットキーではないが、エクスプローラーの「開いているエディター」欄のファイル名の左横に表示される×をクリックしてもエディタが閉じられる。


ファイル保存系



  • Ctrl + S 上書き保存


  • Ctrl + Shift + S 名前を付けて保存


  • Ctrl + K S すべてのファイルを保存


  • Ctrl + K Ctrl + Shift + S 自動フォーマットをせずに保存(v1.28以降)


    • 通常の保存では言語モードごとのフォーマットが自動的に行われるが、それせずにそのまま保存したい時に使う




  • Ctrl + K D 差分ビューが開き、未保存の変更箇所を確認できる



    • Alt + F5で次の変更箇所にジャンプできる

    • また、差分ビューのまま編集をすることも可能

    • 確認が終わったらCtrl+Wなどで閉じる

    • 「あれ?このファイルいつの間にか未保存状態になってるけどどこ直したっけ?」みたいな時に便利




フォーカス移動系



  • Ctrl + 0 サイドバーにフォーカスを移動


  • Ctrl + 1 1つ目のエディタグループにフォーカスを移動


    • エディタグループを1つしか使用していない場合は上記2つのショートカットキーでサイドバーとエディタを行き来できる。

    • +2,+3...,+8まで可能




  • Ctrl + M タブキーによるフォーカス移動モードになる。


    • 解除も同じキー操作だがフォーカスの位置によっては効かない場合もある。




言語モード系



  • Ctrl + K M 言語モード(JavaとかHTMLとか)を変更する



    • で選択、Enterで決定、Escでキャンセル

    • キーワードを入力すると選択肢の絞り込みができる



なお、WindowsでIMEがオンになっている場合、Mの入力がIMEに横取りされてしまい、いちいちIMEをオフにするのは面倒で使い勝手が悪いので、キーバインドをCtrl+K Ctrl+Mに変更すればIMEに邪魔されず、かつキー入力もしやすい。ただしこのキーバインドはすでに定義されている(各種キーマップ定義の拡張機能のおすすめを表示)のでそちらのキーバインドは削除するか、またはエディタにフォーカスがある場合だけ言語モード切り替えが作動するように起動条件にeditorTextFocusを設定する。

change_langmode.jpg


エディタレイアウト系


エディタグループについて


  • 1つのエディタが表示されている領域のことをVS Codeではエディタグループと呼ぶ。

  • 1つのエディタグループ内には複数のエディタを含めることができ、タブ切り替えによってアクティブなエディタを切り替える。

image.png


  • エディタを並べて表示したい場合はエディタグループを分ける。

image.png


  • v1.24まではエディタグループは最大3つまでしか配置できず、また可能な配置も単方向のみだったが、v1.25でグリッドエディタレイアウトが採用されそれらの制限が無くなった。詳しくはこちらの記事を参照。


エクスプローラからの操作


  • ファイルを選択してCtrl + Enter 新規のエディタグループでファイルを開く(開いたファイルがアクティブになる)


    • またはファイル右クリックで横に並べて開く




  • または Ctrl + ファイルクリック(アクティブエディタは変わらず) この機能はv1.20から複数選択の操作に変更になった


エディタ/エディタグループの操作


分割/閉じる系



  • Ctrl +  エディタの分割(設定されている方向)


  • Ctrl + K Ctrl +  エディタの分割(設定とは逆方向)


    • デフォルトの分割方向は設定workbench.editor.openSideBySideDirectionにて指定(右方向or下方向)する。




  • Ctrl + 18 新たにエディタグループを作成する。あるいはすでに表示されているエディタグループにフォーカスを切り替える。


    • 新規の場合は空のエディタグループが作成される。

    • 新規の場合は1つ前のエディタグループが存在する時のみ作成される。




  • Ctrl + W / Ctrl + F4 アクティブなエディタを閉じる


  • Ctrl + K W アクティブなエディタグループ内のエディタをすべて閉じる


  • Ctrl + K Ctrl + Shift + W すべてのエディタグループを閉じる


エディタ移動系(別エディタグループへ)



  • Ctrl + Alt + / アクティブなエディタを隣のエディタグループに移動する。隣にエディタグループが存在しない場合は新たに作成される。


  • Shift + Alt + 1/9 アクティブなエディタを先頭/最後のエディタグループに移動する。新たにエディタグループは作成されない。


フォーカス移動系



  • Ctrl + PgUp/PgDn エディタグループを横断してのアクティブエディタの切り替え


  • Ctrl + Tab エディタグループ内でのアクティブエディタの切り替え


    • 正確には、Ctrlキーを押しっぱなしの状態でTabキーを押して離す。すると、切り替えるエディタを/キーで選択でき、Ctrlキーを離すとエディタが切り替わる。




  • Ctrl + K Ctrl + /// アクティブなエディタグループを切り替える


エディタグループ移動系



  • Ctrl + K /// アクティブなエディタグループをグループごと移動


レイアウト系



  • Alt + Shift + 0 エディタグループの横方向/縦方向の切り替え

なお、エクスプローラからのファイル配置や、エディタグループ間のエディタ移動、レイアウト変更などはドラッグ&ドロップでも行える。エディタの移動はタブをドラッグする。ドロップ先のエディタの選択状態が全面の時にドロップするとそのエディタグループへの移動となり、エディタの選択状態が半分の状態でドロップするとその方向に新たにエディタグループが作られる。


インデントの折りたたみ系



  • Ctrl + K Ctrl + 0 すべてのインデントを折りたたむ


  • Ctrl + K Ctrl + 1 1段目のインデントをすべて折りたたむ(同様に9段目まで指定可)


  • Ctrl + K Ctrl + J すべてのインデントを展開する


  • Ctrl + Shift + [ カーソルのあるインデントを折りたたむ


  • Ctrl + Shift + ] カーソルのあるインデントを展開する


  • Ctrl + K Ctrl + [ カーソルのあるインデントを子インデント含め折りたたむ


  • Ctrl + K Ctrl + ] カーソルのあるインデントを子インデント含め展開する

インデントの対応が正しくなっていないとうまく動作しない場合がある。


設定系


設定画面(Ctrl+,



  • 設定の検索入力フィールドにキーワードを入力して絞り込み


  • Esc 入力フィールドをクリア


  •  設定項目にフォーカス移動


配色テーマの変更(Ctrl+K Ctrl+T

(ショートカットはKolor Themeと無理やり覚えれば覚えやすい?)

- / 配色テーマのプレビュー

- Enter 配色テーマの決定

- Esc キャンセル


フォントサイズ系


画面全体のサイズ変更



  • Ctrl + テンキーの+ フォントサイズ等を大きくする。



    • Ctrl + Shift + ;でも可(つまりCtrl++)


    • Ctrl + ;でも可




  • Ctrl + テンキーの- フォントサイズ等を小さくする。



    • Ctrl + Shift + -でも可


    • Ctrl + -でも可




  • Ctrl + テンキーの0 フォントサイズ等をリセットする。

  • フォントだけでなく、左端や下部のバーのサイズも変わるので、全体的にサイズを変更できる。


エディタフォントのみのサイズ変更(v1.24~)

v1.24からエディタフォントのみのサイズ変更が行えるようになったが、デフォルトではキー設定されていないので自分でショートカットキーの設定を行う必要がある。

ショートカットキーの設定画面にて以下のコマンドにキーを割り当てると使用できるようになる。


  • editor.action.fontZoomIn

  • editor.action.fontZoomOut

  • editor.action.fontZoomReset

設定例(画面全体のサイズ変更のキーにAltを加えた)

change_fontsize.jpg