べんりワザ・VSCode を速く使う

検索と置換でまとめて直す

「あの単語どこだっけ?」を一瞬で。さらに、同じ言葉をファイル中・フォルダ中でまとめて置きかえる置換まで。手で1つずつ直す時間を、まるごと節約できます。

コードが長くなってくると、「さっき書いたあの文、どこだっけ?」と探し回る時間が増えてきます。さらに「この名前、ぜんぶ別の名前に変えたい」なんてときに、上から目で追って1つずつ直すのは大変。そこで使うのが 検索(さがす)置換(おきかえる) です。

まずは「さがす」— ⌘ + F / Ctrl + F

⌘ + F を押すと、右上に小さな検索ボックスが出ます。ここに探したい言葉を打つと、その言葉がぜんぶ光って、いくつ見つかったかも出ます。Enter を押すたびに、次の場所へ順番にジャンプできます。

長いコードの中から「あのクラス名」「あの文字」を目で探す必要が、もうありません。

検索ボックスの右にある3つのアイコン

検索ボックスの右はしに、小さなアイコンが3つ並んでいます。押すとON/OFFが切り替わり、探し方を絞りこめます。

アイコン名前できること
Aa大文字・小文字を区別ONにするとBoxboxを別物として扱う
ab|単語単位で検索ONにするとboxにヒットしてinboxにはヒットしなくなる
.*正規表現を使うパターンで検索できる(例:\d+で数字だけを探す)

ふだんはOFFのままで十分ですが、「boxだけ探したいのにtoolboxまで光ってしまう」ときは単語単位で検索をONにすると狙った場所だけに絞れます。

つづけて「おきかえる」— ⌘ + ⌥ + F / Ctrl + H

検索ボックスの左にある小さな「>(矢印)」を押すと、下にもう1つの入力欄が開きます。ここが置きかえ先。

  • 上の欄:さがす言葉(例:box
  • 下の欄:新しい言葉(例:card

置きかえには2つのボタンがあります。

ボタンはたらき
1つずつ置換見つかった1か所だけを置きかえる(確認しながら)
すべて置換見つかった場所をいっぺんに置きかえる

たとえば box という名前を全部 card に変えたいとき、「すべて置換」を1回押すだけで完了します。

選んだ範囲の中だけ置換する

「この部分だけ置きかえたいのに、ファイル全体が対象になってしまう」——そんなときは、先に置きかえたい範囲を選択してから、検索ボックス右はしの「選択範囲内で検索」アイコンをONにします。

これで「すべて置換」を押しても、選んだ範囲の外は一切さわられません。「この関数の中だけ」「このブロックだけ」を狙って安全に置きかえられるので、さっきの「すべて置換が怖い」への一番実用的な答えになります。

大文字・小文字を保ったまま置換する

boxcard に変えたいけれど、コードの中には Box(クラス名)や BOX(定数)も混ざっている——というのはよくある話です。ふつうに置換すると、ぜんぶ小文字の card になってしまいます。

そこで、置換欄の右にある AB アイコン(大文字と小文字を保持)をONにします。すると元の大小のクセを保ったまま置きかわります。

元の言葉置換後
boxcard
BoxCard
BOXCARD

これを知らないと、置換したあとに大文字だけ手で直し直す羽目になります。名前の付けかえでは真っ先にONにしたいオプションです。

フォルダ全体からさがす(全文検索)

「どのファイルに書いたか思い出せない!」——そんなときは、左のバーにある虫めがねアイコン(Search)。⌘ + ⇧ + F(Winは Ctrl + Shift + F)でも開きます。

ここで言葉を打つと、開いているフォルダの中のぜんぶのファイルから一気にさがしてくれます。どのファイルの何行目にあるかまで並ぶので、大きくなったサイトでも迷子になりません。

フォルダまるごと置換したいときは ⌘ + ⇧ + H(Winは Ctrl + Shift + H)。ここでも、いきなり全部を置きかえる必要はありません。検索結果の一覧はファイル単位・1件単位でも置換できるうえ、結果の行をクリックすれば置きかえる前と後の差分を確認できます。

応用:正規表現の$1で「見つけた文字」を活かす

検索の.*(正規表現)をONにすると、()で囲んだ部分をそのまま置換に使い回すことができます。たとえば、シングルクォートで書いた文字列をダブルクォートに統一したいとき——

  • 検索欄:'(.+)'
  • 置換欄:"$1"

これで、'box'のような書き方が"box"に変わります。$1は「カッコの中にマッチした文字列」の意味です。最初は難しく感じますが、「同じ形の書きかえを何十か所も手作業で直す」場面に出会ったとき、この技を思い出せると一気に時短になります。

べんりワザ覚えて得するVSCodeショートカット保存やコメントなど、ほかにも覚えて得するVSCodeのショートカットはこちら1

まとめ

  1. ⌘ / Ctrl + F で、今のファイルの中の言葉を光らせて探せる
  2. 単語単位で検索をONにすれば、狙った言葉だけに絞りこめる
  3. 置換を使えば、同じ言葉をまとめて別の言葉へ変えられる
  4. 範囲を選んでから選択範囲内で検索をONにすれば、そこだけ安全に置きかえられる
  5. AB(大文字と小文字を保持)をONにすれば、BoxCardにと大小を保ったまま置きかわる
  6. ⌘ / Ctrl + ⇧ + F の全文検索なら、フォルダ中のファイルから一気に探せる

探す・直すが速くなると、コードが増えても怖くなくなります。

よくある質問

検索しても見つからないときは?
大文字・小文字の区別や単語単位検索のON/OFFが邪魔していることがあります。検索ボックス右の3つのアイコンの状態を確認してください。改行をまたぐ文字列を探したいときは、検索欄に改行ごと貼り付けるか、Ctrl + Enterで欄に改行を入れると検索できます。
正規表現の$1って何?
検索する言葉の中でカッコ()を使うと、そこにマッチした文字列を覚えておけます。置換欄に$1と書くと、その覚えた文字列をそのまま使い回せます。カッコごと検索して置換欄で$1を使うと、囲まれた文字列だけを残して前後の記号を書きかえるようなことができます。
置換される場所を確認しながら進めたい
「すべて置換」ではなく「1つずつ置換」ボタンを使うと、1か所ずつハイライトを確認しながら置きかえられます。慣れないうちはこちらが安心です。