【Visual Studio Code】「検索・置換」機能 複数ファイル・正規表現 も完全攻略

「検索・置換」機能は日々のコーディング作業を効率化するうえで欠かせない存在です。本ブログでは、初心者にも分かりやすく、VSCodeの検索・置換機能の基本から応用までを、下記内容も含めて体系的に紹介します。

  • 特定のファイルに絞った検索
  • プロジェクト全体での一括置換
  • 正規表現を活用した検索

VSCode 単一ファイル内での「検索と置換」

VSCode 検索機能 

検索方法

  • 検索欄の表示
    • ショートカット:Ctrl+F
    • メニュー   :「編集」 ⇀ 「検索」
  • 検索文字入力欄に検索文字を入力
    大文字の「P」を入力すると、大文字小文字関係なくすべての「P」がヒット

「大文字/小文字」を区別して検索

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

単語単位で検索する

検索語が独立した単語として存在する場合のみ一致します。

  • ショートカット:alt+w
  • 単語境界として認識される記号(=区切りになる)
記号説明
スペースuser nameuser と 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+数字の連続12342999
^abc行頭がabcabc defABC
<[^>]+>HTMLタグ<div><span> etc.タグ削除
(\w+)@(\w+\.\w+)メールアドレスuser@example.com$1 [at] $2

サンプル1:「HTMLタグ」を消去する

  • ショートカット:Ctrl + R
  • ①「正規表現を使用する」をクリック
  • 「検索欄」に「HTMLタグの正規表現」<[^>]+>を入力
  • 「置換欄」には何も入力しない
  • 実行結果

トラブルシュート

複数ファイルにまたがる検索で、閉じているファイルが検索対象にならない

原因は、主に「除外設定」や「検索対象の制限」によるものです。以下に、原因と対策を紹介します。

ファイル・フォルダ名称が .gitignore に記載されている

  • VSCodeはデフォルトで .gitignore に記載されたファイル・フォルダを検索対象から除外します。
  • 対策
    • .gitignore の除外を無視する
      • 設定画面で、検索>gitignoreによる除外を無視 をONにする

search.exclude設定による除外

  • .vscode/setteigs.json やユーザー設定で search.exclude が指定されていると、対象外になります。
  • 対策
    • ファイルの内容を確認し除外対象から外します

search.excludeの例

"search.exclude": {
  "**/node_modules": true,
  "**/dist": true
}

インデックスの破損

  • VSCodeの検索は内部的にインデックスを使って高速化しています。これが破損していると検索結果が不完全になることがあります。
  • 対策
    • インデックスの不具合が疑われる場合は、VSCodeを再起動してみてください

まとめ

  • 検索オプション
    大文字小文字の区別、単語単位、正規表現などを柔軟に切り替え可能。
  • 正規表現
    パターン検索やグループ置換で複雑な編集も一括処理できる。
  • 複数ファイル対応
    未開ファイルも検索対象になるが、.gitignoresearch.exclude に注意。
  • 拡張機能
    検索対象の拡張やプレビュー機能でさらに効率化。
  • 設定管理
    検索除外パターンは settings.json に保存可能。精度の高い検索には明示的な指定が有効。

タイトルとURLをコピーしました