【gif付でユースケース別】VSCodeでマウスを使わないエンジニアになるために必須級のショートカットキー

環境

• windows10
• macOS Monterey 12.0.1
• VsCode 1.67.1

この記事で扱うこと

本記事では、VsCodeを使用して効率的に開発業務を行うために欠かせないショートカットキーを、ユースケース別にgifを使ってわかりやすくご紹介します。

また、キーバインドのカスタマイズ方法やマウスを使わない開発を行うために必要な便利拡張機能も紹介しています。

この記事で扱わないこと

Ctrl + Cでコピー等は別のソフトウェアでもよくやるかと思いますので、こういった類のショートカットキーは基本的には割愛しています。

では、以降ではユースケース別にショートカットキーを紹介していきます。

特定のファイルを開きたい

ファイル名がある程度わかる場合

ファイル名で検索して開きましょう

ファイル名がわからない場合

エクスプローラーを開いて、プロジェクトディレクトリを該当のファイルを探索しましょう

command + b でも、エクスプローラーを開くことは可能ですが、フォーカスがエクスプローラーに対してあたらないため、ctrl + shift + eのほうが便利です。

探したいファイル内の何かしらのキーワードがわかっている場合

プロジェクトディレクトリ全体でキーワードを検索し、該当のファイルを探索しましょう

お目当てのファイルが開けたら次はエディター上の操作に関するショートカットを紹介します

エディターのカーソール行に対する操作

カーソール行を複製したい

ちなみに、範囲選択せずにctrl + c (macならcmd + c) すると、アクティブな行がコピーできます。

カーソール行を上下に移動したい

カーソール行を削除したい

ちなみに、範囲選択せずにctrl + x (macならcmd + x) すると、アクティブな行が削除できます。

カーソル行の下に空白行を挿入したい

特定のキーワードに対する選択・検索・置換

特定のキーワードに一致する箇所を複数選択したい

この複数選択の処理中に特定の箇所のみ選択をスキップしたい場合があると思います。例えば、nameというキーワードを複数選択してリネームしたい場合等が想定されますが、このキーワードの中に、getNameというキーワードも含まれていた場合、ctrl + Dで複数選択の対象とされてしまいます。選択したくない場合は、ctrl + Dした後にctrl + kを押すと、その対象のみスキップすることが可能です。

なお、「キーワード」単位ではなく、シンボル単位としたい場合は、対象の変数名や関数名にカーソールを合わせた上でF2キーを押す。例えばnameという変数とgetNameという関数名が宣言されている場合、Nameを選択し実行するとCtrl + Dでは両者がヒットするのに対し、F2ではgetNameのみが対象となります。なお、F2で修正をかけた場合、関数であれば定義元の名称も変更されるので、これらのコマンドはユースケースに応じて使い分けが必要になリます。

ファイル内でキーワード検索したい

ファイル内でキーワード置換したい

カーソール・ファイル移動・定義元へのジャンプ

素早くカーソール移動したい

以下のキーで、文字単位ではなく単語単位でカーソールを移動することができます。

ファイルの先頭、末尾に素早く移動したい

変数・関数等の定義元へジャンプしたい

ファイルが増えてくると、いかに素早く定義元にジャンプできるかが効率的な開発を行う上でのポイントになってきます。

※私は少しキーバインドを変えています。(キーバインドについては記事後半で紹介しています)

特定のファイルにフォーカスを切り替えたい

各種メニュー・ヒントの表示

右クリックメニューを開きたい

※私は少しキーバインドを変えています。

問題ビューを表示したい

クイックフィックスを表示したい

操作・処理の取り消し/キャンセル

何かしらの処理をキャンセルしたい場合は、エスケープキーで可能です

特定の操作を取り消したい

アクティブなファイルに対する操作

アクティブなファイルを閉じたい

エディターでアクティブなファイルのパスをコピーしたい

2023.7.1６追記

エディターでアクティブなファイルをFinderで表示したい

2023.7.1６追記

コメントアウト/コメントアウト解除したい

ターミナルの操作

ターミナルを開閉したい

エクスプローラー上の操作

エクスプローラー場で開いたディレクトリ・ファイルを全て折りたたみたい

2023.7.12追記

エクスプローラーからエディターでファイルを開きたい

2023.7.12追記

ちなみに、spaceで開いたファイルはファイル名が斜体になっており、この状態では別のファイルを開くと閉じてしまいます。開いたままにしたい場合は、cmd + kを押してからenterを実行する必要があります

特定のファイル名をリネームしたい

ctrl + shift + eでエクスプローラーにフォーカスをあてた状態で、以下キーを押下

ユーザー設定画面を開きたい

困ったときの万能ショートカット

コマンドパレット

クイックオープンビューの表示

キーバインドの設定

デフォルトで割り当てられているショートカットキーをキーバインドの設定からカスタマイズすることが可能です。(わかりにくいキーの組み合わせなど)

一例ですが、私は定義元へのジャンプ(F12)をctrl + jに、右クリックメニューの表示(shift + F10)をctrl + mに変更しています。

設定方法は、以下の通りです。

1. 左下の歯車マークをクリックし、キーボードショートカットを選択

   

2. キーバインドの一覧が表示される

   

3. 変更したいコマンドの行をダブルクリックし、指定したいキーの組み合わせを入力する

   

4. キーバインド設定に応じて、keybindings.jsonに変更が適用される。元のコマンドの先頭に-がついており、これはこのキーバインドが無効になっているという意味。
   

   copy[
   // 右クリックメニュー表示
     {
       "key": "ctrl+m",
       "command": "editor.action.showContextMenu",
       "when": "textInputFocus"
     },
     {
       "key": "shift+f10",
       "command": "-editor.action.showContextMenu",
       "when": "textInputFocus"
     },
     // 定義元にジャンプ
     {
       "key": "ctrl+j",
       "command": "editor.action.revealDefinition",
       "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
     },
     {
       "key": "f12",
       "command": "-editor.action.revealDefinition",
       "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
     },
     {
       "key": "ctrl+j",
       "command": "-workbench.action.togglePanel"
     },
   ]

おすすめの拡張機能 jumpy

jumpyをインストールします

https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy

jumpy拡張により、エディターを開いてshift + enterを実行するとマウスを使わず、所定のソースコード位置にジャンプすることが可能になります。

例えば、25行目のメソッドの引数の部分にマウスを使わず、カーソールを合わせたい場合

設定方法

keybindings.json(ファイル -> 環境設定 -> キーボード ショートカット)に以下のような記述をするだけ。

1つめは、ジャンプモードに切り替えるためのショートカットキーの指定、2つめはジャンプモードを終了するためのショートカットキーの指定です。

また、extension.jumpy-wordでは、特定のワード単位でジャンプしますが、extension.jumpy-lineにすることで、ワード単位ではなく、行単位でジャンプするように変更することも可能です

copy　 //jumpy
  {
      "key": "shift+enter",
      "command": "extension.jumpy-word",
      "when": "editorTextFocus"
  },
  {
    "key": "Escape",
    "command": "extension.jumpy-exit",
    "when": "editorTextFocus && jumpy.isJumpyMode"
  }

以上です。開発効率をあげるためにぜひ本記事で紹介したショートカット/拡張機能を検討してみてください。

まとめ

いかがでしたでしょうか。本記事では、マウスを使わないエンジニアを目指すための一歩として、必須級のVSCodeショートカットキーと拡張機能をgif付きでユースケース別に紹介しています。開発効率をあげるためにぜひ本記事のショートカットを参考にしてみてください。