「検索・置換」機能は日々のコーディング作業を効率化するうえで欠かせない存在です。本ブログでは、初心者にも分かりやすく、VSCodeの検索・置換機能の基本から応用までを、下記内容も含めて体系的に紹介します。
- 特定のファイルに絞った検索
- プロジェクト全体での一括置換
- 正規表現を活用した検索
VSCode 単一ファイル内での「検索と置換」
VSCode 検索機能
検索方法
- 検索欄の表示
- ショートカット:Ctrl+F
- メニュー :「編集」 ⇀ 「検索」
- 検索文字入力欄に検索文字を入力
大文字の「P」を入力すると、大文字小文字関係なくすべての「P」がヒット

「大文字/小文字」を区別して検索
- ショートカット:
alt
+c
- 検索欄に大文字の「P」を入力し「Aa」を選択
大文字の「P」のみがヒット

単語単位で検索する
検索語が独立した単語として存在する場合のみ一致します。
- ショートカット:
alt
+w
- 単語境界として認識される記号(=区切りになる)
記号 | 例 | 説明 |
---|---|---|
スペース | user name | user と nameは別単語 |
ドット . | user.name | 同上 |
ハイフン - | user-name | 同上 |
スラッシュ / | user/name | 同上 |
括弧()[]{}<> | user(name) | 同上 |
カンマ , やセミコロン; | user,name | 同上 |
- 検索欄に小文字の「p」を入力して「大文字/小文字の区別」と「単語単位」で検索
本例では、括弧<>で区切られた小文字の「p」のみヒット

選択範囲だけを検索
- 検索範囲をカーソルで指定し、①「検索範囲を検索」オプションをクリック
指定した範囲内の「class」のみがヒット

VSCode 置換機能
置換方法
- 置換欄の表示
- ショートカット:Ctrl+H
- メニュー :「編集」 ⇀ 「置換」
- 検索欄(上)に置換したい文字を入力し、置換欄(下)に置換文字を入力する
- ①は1語ずつ確認しながら置換
- ②は全てを同時に置換

- 置換後

- ABオプション(置換時の大文字/小文字)
- オプションをクリックしない場合
- 置換文字通りに置換される
- オプションをクリックした場合
- 置換前の大文字/小文字の状態で置換される
- オプションをクリックしない場合
VSCode 複数ファイルにまたがる検索・置換
VSCodeでは、プロジェクト全体を対象に検索・置換が可能です。
検索・置換 画面の表示
- ショートカット:Ctrl + Shift + F
- サイドバーの虫眼鏡アイコンをクリック
- 下図のような「検索/置換」欄が表示される
- 三点リーダーをクリック
- 「対象とするファイル」「除外するファイル」の入力欄が表示される
基本的な使用方法は、単一ファイルと同様。

「検索・置換」の手順
- ①「画像」の文字を検索欄に入力
- index.html、policy、stile.css の3ファイルに含まれている事が確認できた
- ②をクリックすると、上記3ファイルが同時に更新されて保存される
- ③検索している最中に変更中のファイルがある場合に、置換直前にクリックする事で最新の状態で置換ができる
- ④検索結果のクリア

- ⑤「リストとして」で表示
フォルダー体系として表示します

- ⑥エディターで開く
エディターで詳細を確認できます。

- 全て折りたたんで表示

VSCode 正規表現を使用した検索
正規表現(Regular Expression)とは、文字列のパターンを表現するための記法です。
簡単に言えば、「こういう形の文字列を探して!」と指示するためのルールです。
VSCode 正規表現での検索方法
- 良く使用する正規表現と具体例
正規表現 | 意味 | 検索例 | 置換例 |
---|---|---|---|
\d+ | 数字の連続 | 123 42 | 999 |
^abc | 行頭がabc | abc def | ABC |
<[^>]+> | HTMLタグ | <div><span> etc. | タグ削除 |
(\w+)@(\w+\.\w+) | メールアドレス | user@example.com | $1 [at] $2 |
サンプル1:「HTMLタグ」を消去する
- ショートカット:Ctrl + R
- ①「正規表現を使用する」をクリック
- 「検索欄」に「HTMLタグの正規表現」
<[^>]+>
を入力 - 「置換欄」には何も入力しない

- 実行結果

トラブルシュート
複数ファイルにまたがる検索で、閉じているファイルが検索対象にならない
原因は、主に「除外設定」や「検索対象の制限」によるものです。以下に、原因と対策を紹介します。
ファイル・フォルダ名称が .gitignore に記載されている
- VSCodeはデフォルトで
.gitignore
に記載されたファイル・フォルダを検索対象から除外します。 - 対策
- .gitignore の除外を無視する
- 設定画面で、検索>gitignoreによる除外を無視 をONにする
- .gitignore の除外を無視する
search.exclude設定による除外
- .vscode/setteigs.json やユーザー設定で
search.exclude
が指定されていると、対象外になります。 - 対策
- ファイルの内容を確認し除外対象から外します
search.exclude
の例
"search.exclude": {
"**/node_modules": true,
"**/dist": true
}
インデックスの破損
- VSCodeの検索は内部的にインデックスを使って高速化しています。これが破損していると検索結果が不完全になることがあります。
- 対策
- インデックスの不具合が疑われる場合は、VSCodeを再起動してみてください
まとめ
- 検索オプション
大文字小文字の区別、単語単位、正規表現などを柔軟に切り替え可能。 - 正規表現
パターン検索やグループ置換で複雑な編集も一括処理できる。 - 複数ファイル対応
未開ファイルも検索対象になるが、.gitignore
やsearch.exclude
に注意。 - 拡張機能
検索対象の拡張やプレビュー機能でさらに効率化。 - 設定管理
検索除外パターンはsettings.json
に保存可能。精度の高い検索には明示的な指定が有効。