VSCode： 同じスコープにある変数の名前だけを一括変更する

こんにちは、さち です。

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

今回は、この VSCode で、同じスコープにある変数の名前だけを変える方法について書いていきます。

同じスコープのものだけ選択したい

1. 例えば、このような JavaScript があります。
   
2. 4行目の変数の名前 str を変更してみます。
   
3. 変数名を一括変更するために Ctrl + D キー（または Ctrl + Shift + L キー）を押しますが、この方法だと同じ文字列がすべて選択されてしまいます。
   
4. もちろん、この状態で変数名を変えると、すべて変わってしまいます。同じスコープにある変数名だけ変えたいんだけど……。
   

「 Ctrl + D キー」や「 Ctrl + Shift + L キー」は、同じ文字列なら何でも選択するので、変数以外も選択してしまう危険があります。

変数名を変更するときに使うのは、あまり適切ではありません。

解決方法

同じスコープの変数だけを選択

1. カーソルを名前を変えたい変数 str に合わせて、F2 キーを押します。
   
2. 変更後の名前 date を入力して、Enter キーを押します。（Shift + Enter キーを押すと、変更箇所をプレビュー＆指定できる）
   
3. 同じスコープの str だけを date に変更できました。（スコープが異なる関数内の str は変わっていない）
   
4. もちろん、関数内のにある str で同じことをした場合は……
   
5. 同じスコープである関数内の str だけ名前を変えられます。
   

「変数名」以外にも使える

上記の例では「変数」に対して使いましたが、「変数」「関数」「メソッド」「クラス」などに使えます。

実際に、「関数名」に対しても使ってみましょう。

1. カーソルを関数名 func に合わせて F2 キーを押して、変更後の名前 call を入力。Enter キーを押します。
   
2. 関数名を func から call に変更できました。
   

今回は「JavaScript」で使用しましたが、他の言語でも使用できます。ちなみに、「CSS」ではクラス名を一括変更したりできます。

めちゃくちゃ便利な機能なので、知らなかった人はぜひ覚えて使って下さいね。