8
5

More than 1 year has passed since last update.

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

Posted at

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

リネーム

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

  • 例1
    変更前
    image.png

    変更中
    image.png

    変更後
    image.png

    変更中にShift+Enterでプレビューが表示されます。どこが変わるか一覧になるので便利です。
    image.png

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

  • 例2
    変更前
    image.png

    aを定義側ではなく参照側でリネームします。
    image.png

    import箇所がエイリアスになります。
    image.png

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

宣言or参照箇所に移動

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

  • 例1
    宣言されてるファイルどこだろう?と思ったらカーソルを合わせてF12を押すと…
    image.png

    宣言元のファイルに飛べます。
    image.png

    宣言箇所でF12を押すと、宣言箇所と参照先がリストで表示されます。移動したい場所でEnterキー、もしくはダブルクリックすると移動できます。
    image.png

エラー・ワーニング解消

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

  • 例1
    aは別ファイルに定義されているのですがimportされていないのでエラーになり赤い波線が出ています。ここでCmd+.を押すと
    image.png

    「Quick Fix...」と修正方法の候補が表示されます。ここではimportを追加できます。
    image.png

    importが追加されエラーが解消されます。
    image.png

  • 例2
    未宣言の関数cを呼び出そうとするとエラーなので同じようにCmd+.を押すと
    image.png

    関数cの宣言を追加する?と聞かれます。
    image.png

    クリックすると宣言が追加されます。エラーがスローされるようになってますね。
    image.png

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5