VSCode で関数や変数の名前の変更＆ import 文の並べ替え

Today I Learned

TL;DR

  • 変数や関数の名前を変更するには、目的の変数名や関数名を定義している箇所にカーソルをあててから F2 を押す
  • import 文を自動で並び替えるには、Shift + Option + O を押す

関数や変数の名前を変更する

ソースコード上の関数名や変数名を変更するとき、マルチカーソルを使って目的の箇所を選択して変更していた。
この場合、誤った箇所を選択する可能性があったり、依存している他のファイルで変更前の名前が残ってしまったりするため、不便に感じていたが、VSCode の機能で解決できることを知った。

  1. 変更したい関数や変数を定義している名前のところにカーソルを当てる
  2. 右クリックメニューを開き、[Rename Symbol]を選択する
  3. 入力ボックスに変更後の名前を入力する

ショートカットキーでは、目的の箇所をクリックして F2 を押すと、[Rename Symbol] を呼び出しできる。

アニメーション：ショートカットキーを使って関数名をまとめて変換している

import 文を並び替える

JavaScript や TypeScript のコードを書いているとき、ファイル内の import 文が無秩序に並びやすい。
ライブラリの import は上の方、ファイル内の import は下の方に気をつけて書く、を行っていた。
ESLint や Prettier でもプラグインを導入することでも自動で並べ替えできるが、書き捨てのコードの場合はもう少し気軽に行ないたい。
VSCode の機能を使って import 文を自動で並べ替えできることを知ったため、TIL に残す。

  1. ソースコード上で右クリックメニューを開き、[Source Action...]を選択する
  2. [Sort Imports] を選択する

ショートカットキーでは、目的のファイルを開いてエディター内をクリックしてから Shift + Option + O を押す。
アニメーション：ショートカットキーを使って import 文を並べ替えている

ファイルを保存するタイミングで自動フォーマットしたい場合は、VSCode の設定ファイルに次の内容を追記する。

settings.json 
"editor.formatOnSave": true,
"[typescript]": {
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

参考