【VSCode】 関数の「定義」場所に一瞬で移動する方法

こんにちは、さち です。

普段、ウェブサイトを作るときは「Visual Studio Code（以下：VSCode）」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。

VSCode で JavaScript を書いている時に、コードの中で呼び出している「関数」の内容を変更したいことがあります。

その場合、関数が「定義」されている場所に移動する必要がありますが、それが地味に面倒……。

……と思っていたのですが、一瞬で移動できる方法がありました。

直接移動する

1. このような JavaScript があります。
   
2. 呼び出している関数の名前にカーソルを合わせて、F12 キーを押します。
   
3. すると、関数を定義している場所に移動できました。
   
4. Alt + ← キーを押すと、元の場所に戻ります。
   

挿し込み表示する

1. このような JavaScript があります。
   
2. 呼び出している関数の名前にカーソルを合わせて、Shift + F12 キーを押します。
   
3. すぐ下に、その関数がある場所が挿し込み表示されます。
   
4. 右側にある一覧から、定義をクリックすると……
   
5. 関数を定義している場所に移動できます。
   
6. 編集もできます。例えば、新しいコードを追記してみます。挿し込み表示を閉じる時は Esc キーを押します。
   
7. 追記した内容は、実際のファイルにも反映されます。