VSCodeとTypeScriptでの開発で便利なショートカットキー

VSCode上でTypeScriptのコードを実装しているとき、「もうなんかこれが無いと効率悪くて生きていけない！」くらいの感じで使うショートカットキーを３つ紹介しますー。
他の人の作業風景を見てると、意外と使われてなくて教えてあげたりすることが多いです。

# リネーム

変数名、関数名上にカーソルがあるときにF2でその名前をリネームできます。

- 例1
  変更前
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/e179a366-a9a5-123a-d5a6-fbb67ed090fe.png)
  
  変更中
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/1745cbb7-a805-52d5-1acf-122b66c76703.png)
  
  変更後
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/1c983e18-1566-c975-8511-b8f9a59c15cd.png)
  
  変更中にShift+Enterでプレビューが表示されます。どこが変わるか一覧になるので便利です。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/9983cf80-f5c5-54ef-c3db-b3fc46c2376a.png)


ただ、importしたものや関数の引数などの参照先を変更する時には注意が必要で、参照先で変更して宣言も変更したつもりでいると、宣言元は変わらずにimport箇所にエイリアスが追加されます。

- 例2
  変更前
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/987818eb-f5c2-b7ec-d2f3-e7098619be71.png)
  
  aを定義側ではなく参照側でリネームします。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/f2a236d7-c7c3-62a8-866f-0575b0234d4e.png)
  
  import箇所がエイリアスになります。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/49ec9f0f-2eab-6a52-d3ef-0c48632afef8.png)

狙って使えるようになると便利ですね。

# 宣言or参照箇所に移動

リネームと同様ですが、変数名、関数名上にカーソルがあるときにF12で宣言箇所に飛べます。
また宣言箇所でF12を押すとその変数等の宣言箇所と参照先が一覧表示されて、参照先のコードが確認できたり飛んだりできます。

- 例1
  宣言されてるファイルどこだろう？と思ったらカーソルを合わせてF12を押すと…
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/7cdb5a02-a4f0-511a-551e-296dc30fd6f7.png)
  
  宣言元のファイルに飛べます。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/75d19fd5-9bda-4263-caed-c049e0faa748.png)
  
  宣言箇所でF12を押すと、宣言箇所と参照先がリストで表示されます。移動したい場所でEnterキー、もしくはダブルクリックすると移動できます。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/0fb92809-1fa5-7872-402b-ebc0e3d9aa80.png)

# エラー・ワーニング解消

コード下部に波線が出て、エラーやワーニングになっているときに修正メニューを出したい時はCmd+.（ピリオド）でQuickFixメニューが出せます。
importが足りない時とか、まだ変数・関数が宣言されてないときなどのショートカットメニューが表示されるのでキー操作で選択して簡単に修正できます。
**Cmd+.はMacでのショートカットです。WindowsはCtrl+.ですかね。また、設定が変わっている場合もあるので確認してください。**

- 例1
  aは別ファイルに定義されているのですがimportされていないのでエラーになり赤い波線が出ています。ここでCmd+.を押すと
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/1f58d740-be3e-f539-c26e-768eb4d296d9.png)
  
  「Quick Fix...」と修正方法の候補が表示されます。ここではimportを追加できます。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/4ec9af8d-7a81-327f-034f-659cb3279b3e.png)
  
  importが追加されエラーが解消されます。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/7d293af3-0752-50a1-ba20-7d7069f8810d.png)

- 例2
  未宣言の関数cを呼び出そうとするとエラーなので同じようにCmd+.を押すと
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/3fa4614f-f35b-1072-a47b-0627e3583913.png)
  
  関数cの宣言を追加する？と聞かれます。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/5c57a4a2-e793-a347-f34d-7baf6a8648d8.png)
  
  クリックすると宣言が追加されます。エラーがスローされるようになってますね。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2835840/b2f7c394-2fb1-d76f-d03e-59d6bb6f0718.png)