VSCode上でTypeScriptのコードを実装しているとき、「もうなんかこれが無いと効率悪くて生きていけない!」くらいの感じで使うショートカットキーを3つ紹介しますー。
他の人の作業風景を見てると、意外と使われてなくて教えてあげたりすることが多いです。
リネーム
変数名、関数名上にカーソルがあるときにF2でその名前をリネームできます。
ただ、importしたものや関数の引数などの参照先を変更する時には注意が必要で、参照先で変更して宣言も変更したつもりでいると、宣言元は変わらずにimport箇所にエイリアスが追加されます。
狙って使えるようになると便利ですね。
宣言or参照箇所に移動
リネームと同様ですが、変数名、関数名上にカーソルがあるときにF12で宣言箇所に飛べます。
また宣言箇所でF12を押すとその変数等の宣言箇所と参照先が一覧表示されて、参照先のコードが確認できたり飛んだりできます。
-
例1
宣言されてるファイルどこだろう?と思ったらカーソルを合わせてF12を押すと…
宣言箇所でF12を押すと、宣言箇所と参照先がリストで表示されます。移動したい場所でEnterキー、もしくはダブルクリックすると移動できます。
エラー・ワーニング解消
コード下部に波線が出て、エラーやワーニングになっているときに修正メニューを出したい時はCmd+.(ピリオド)でQuickFixメニューが出せます。
importが足りない時とか、まだ変数・関数が宣言されてないときなどのショートカットメニューが表示されるのでキー操作で選択して簡単に修正できます。
Cmd+.はMacでのショートカットです。WindowsはCtrl+.ですかね。また、設定が変わっている場合もあるので確認してください。