【VSCode】コードリーディング特化のショートカット集

こんにちは、株式会社Gizumoでエンジニアをしている田中です。

私が複数現場常駐してきた中で、便利なのに使っている人は少なくもったいないなと感じたコードリーディング特化のVSCodeショートカットをピックアップして今回は紹介したいと思います。

前提・対象とする読者

この記事は以下を前提として読み進めてください。

• サンプルコードはReactとTypeScriptで記述
• コードの参考に一部OSSのbulletproof-reactを使用
• コードリーディングに特化したショートカットのみに焦点を当てているため、「option + 上下矢印」など「VSCodeを使用する上で便利」なショートカットについては触れない
• commandはCmd、controlはCtrlと表記
• ※自身のPCやVSCode、それ以外のアプリケーションで独自のキーバインディング設定をしている場合、正常に動作しない可能性がある

また、対象とする読者は以下のような方を想定しています。

• VSCodeを使用している方全般

コードリーディングの手順

実装の参考や設計を勉強する際に、コードリーディングを行うことが多々あります。GitHubでそのまま行うことも可能ですがやはりコードエディター上で行う方が便利です。

何はともあれgit clone

これはOSSのコードもしくは自社のコードを読む場合に限られますが、まずはgit cloneしてローカルにコードを落とします。

git clone hogehoge(githubから取得したurl)

VSCodeで開く

git cloneしたコードをVSCodeで開きます。

code hogehoge(クローンしたディレクトリ)

以上で準備完了

以上でコードリーディングの準備は完了です。あとはVSCodeのショートカットを駆使してコードリーディングを行います。

個人的に大事にしている考え方

「コードはシンボルの集まりであり、それが連続しているものとして捉える」を大事な軸として普段コードリーディングを行っています。「シンボル」はある一定の塊を指し「変数名」「関数名」「クラス名」などの宣言がそれに該当します。連続しているとはパズルのようにシンボルが組み合わさってコードが作られている様を指します。

ファイルを探すときやファイルで宣言を探すときにスクロールで探していくと余計な情報で脳のリソースを浪費してしまいます。スクロールする中で無数のコードに対して必要か不要かの判断を毎度下すのはなかなかの重労働なのでできれば避けたいところです。できるだけコードに対して機械的にアプローチして脳のリソースを節約します。

ショートカット一覧

初めに、今回紹介するショートカットを重要度順に記載します。どれも大事なので、重要度上限を「超」から始め、下限を「中」としています。

定義元へジャンプ 重要度：超

シンボルにカーソルを合わせF12を押すと、定義元にジャンプします。Cmd(or Ctrl) + クリックでも同じことが可能です。気になるコードがあればまずこのショートカットから開始します。とても多用します。

// 定義元
const hoge = () => {
  return 'hoge'
}

// カーソルを合わせてF12を押すと、定義元にカーソルが移動する
hoge()

参照一覧を表示 重要度：超

シンボルにカーソルを合わせてShift + F12を押すと、そのシンボルの参照一覧が表示されます。これを使うことでそのシンボルがどこで使われているのか、どのように使われているのかが把握できます。また、「>」は右矢印で開閉、下矢印で次のファイルを閲覧、エンターでそのファイル（シンボル）にジャンプします。ファイルをジャンプせずに閲覧したいときは多くそのような時に多用します。

前のファイルに戻る 重要度：高

参照先へジャンプした後前のファイルに戻りたい場合使用します。複数回押すことで複数ファイル戻ることも可能です。定義ジャンプとセットで多用します。

カーソル位置を戻す 重要度：高

ファイル間関係なく参照元へ戻りたい時に使用します。複数回押すことで複数カーソル位置を戻すことが可能です。以下のカーソル位置を進めるとセットで多用します。ここまで覚えればほとんどマウス操作することなくコードを追うことが可能になります。

// 2. ctrl + -で元のカーソル位置へ戻る
const foo = () => {...}

hoge(() => {
  // 1. fooの定義元へジャンプ
  // 3. fooの定義元から戻ってくる
  foo()
})

カーソル位置を進める 重要度：高

Ctrl + -の逆です。カーソル位置を進めることができます。

ファイル検索 重要度：高

ファイル名を入力することで、そのファイルを開くことができます。ファイル名の一部を入力することで、そのファイルを絞り込むことも可能です。これを使うことでファイルを開くときにVSCodeのサイドバーをスクロールする必要はなくなります。

※ 未入力状態は直近で開いたファイル順に表示

シンボル検索 重要度：高

シンボル名を入力+Enterを押すことで、そのシンボルにジャンプできます。ファイル検索と同様に、シンボル名の一部を入力することで、そのシンボルを絞り込むことも可能です。未入力状態でシンボル一覧を表示できるためファイル内のスクロールが不要になります。

行検索 重要度：中

行番号を入力することで、その行にジャンプできます。行数が少ないときは不要なことが多いですが、極力スクロールを避け機械的にコードに対してアプローチすることを目指します。Pull Requestの指摘があった行へジャンプする等のユースケースが存在します。

ファイルの横移動 重要度：中

左右のファイルに移動できます。Ctrl + Tab等でファイルへ移動しにくい時に便利です。GoogleChrome等でも同じショートカットが利用できます。

最後に

いかがだったでしょうか？開発系のショートカットは有名かつ語り尽くされていると思い、今回はコードリーディングに絞って紹介してみました。少しでも読んでくださった方のためになれば幸いです。ありがとうございました。

参考

• Key Bindings for Visual Studio Code
• bulletproof-react