VSCode（Visual Studio Code）では、現在開いているファイルだけでなく、ワークスペース内の複数ファイルに含まれる文字列もまとめて置換できます。
単純な文字列の置換だけでなく、大文字・小文字の区別、単語単位の検索、正規表現、対象ファイルの絞り込みなどにも対応しているため、大規模なプロジェクトでも効率よく文字列を変更できます。
ただし、ワークスペース全体を対象に一括置換すると、多数のファイルが一度に変更されることがあります。
誤置換を防ぐためにも、検索結果や変更内容を確認してから置換を実行することが重要です。
1つのファイル内で文字列を一括置換する方法
検索と置換を開く
現在開いているファイル内だけで文字列を置換したい場合は、「検索と置換」を利用します。
Windows・Linuxでは、次のショートカットで開けます。
Ctrl + HmacOSでは、次のショートカットを使用します。
Option + Command + F検索欄に変更前の文字列を入力し、置換欄に変更後の文字列を入力します。
たとえば、次の文字列を、
oldName以下へ変更したい場合、
newName検索欄にoldName、置換欄にnewNameを入力します。
一致箇所を1件ずつ置換することも、ファイル内の一致箇所をすべてまとめて置換することも可能です。
ワークスペース全体の文字列を一括置換する方法
Replace in Filesを利用する
複数のファイルに含まれる文字列をまとめて変更したい場合は、ワークスペース全体の置換機能を使用します。
Windows・Linuxでは、
Ctrl + Shift + HmacOSでは、
Shift + Command + Hを押します。
VSCodeのサイドバーに検索ビューが表示され、検索文字列と置換後の文字列を指定できます。
たとえば、ワークスペース内にある、
example.comを、
example.jpへ変更したい場合、検索欄にexample.com、置換欄にexample.jpと入力します。
検索結果はファイルごとに表示されるため、どのファイルのどの部分が変更対象になるのかを確認できます。
一括置換する前に検索結果を確認する
ワークスペース検索を利用する
複数ファイルを変更するときは、いきなり「すべて置換」を実行するのではなく、まず検索結果を確認するのがおすすめです。
Windows・Linuxでは、
Ctrl + Shift + FmacOSでは、
Command + Shift + Fでワークスペース検索を開けます。
たとえば、
userを、
customerへ置換したい場合、検索結果には次のような文字列まで含まれる可能性があります。
user
username
userId
superuser単純な文字列検索では、文字列の一部分が一致する箇所も検索対象になることがあります。
そのため、置換前に検索結果を確認し、意図した箇所だけが対象になっているかをチェックすることが重要です。
大文字・小文字を区別して置換する方法
Match Caseを利用する
大文字・小文字を区別して検索したい場合は、「Match Case」を有効にします。
たとえば、
Userだけを検索し、
user
USERを対象外にしたい場合に便利です。
検索欄に表示されるAaのアイコンを有効にすると、大文字・小文字を区別して検索できます。
Windows・Linuxでは、
Alt + CmacOSでは、
Option + Command + Cでも切り替えられます。
完全一致する単語だけを置換する方法
Match Whole Wordを利用する
特定の単語だけを置換したい場合は、「Match Whole Word」を利用します。
たとえば、
userを検索すると、通常の検索では、
username
userId
superuserなどにも一致する可能性があります。
userという単語そのものだけを対象にしたい場合は、Match Whole Wordを有効にします。
Windows・Linuxでは、
Alt + WmacOSでは、
Option + Command + Wで切り替えられます。
正規表現を使って一括置換する方法
Regular Expressionを有効にする
一定のパターンに一致する文字列をまとめて変更したい場合は、正規表現を利用すると便利です。
検索欄にある.*のアイコンを有効にすると、正規表現検索を使用できます。
たとえば、
item1
item2
item3のような文字列をまとめて検索したい場合は、
item\d+と入力します。
\d+は「1文字以上の数字」を表す正規表現です。
そのため、item1やitem25などをまとめて検索できます。
キャプチャグループを利用して置換する方法
検索した文字列の一部を再利用できる
正規表現では、括弧を使って取得した文字列を置換後の文字列に再利用できます。
たとえば、
John Smith
Taro Yamada
Hanako Tanakaという文字列を、
Smith, John
Yamada, Taro
Tanaka, Hanakoのように変更するとします。
検索欄には、
(\w+) (\w+)と入力します。
置換欄には、
$2, $1と入力します。
$1は1つ目の括弧で取得した文字列、$2は2つ目の括弧で取得した文字列を意味します。
この仕組みを利用すると、単純な置換では対応しにくい文字列の並べ替えも可能です。
置換時に大文字・小文字を変更する方法
\uや\Lなどを利用する
正規表現による置換では、キャプチャした文字列の大文字・小文字を変更することもできます。
代表的な指定は次のとおりです。
\u
\l
\U
\Lそれぞれの意味は次のとおりです。
\u：次の1文字を大文字にする\l：次の1文字を小文字にする\U：以降の文字列を大文字にする\L：以降の文字列を小文字にする
たとえば、検索欄に、
(\w+)置換欄に、
\u$1と入力すると、キャプチャした文字列の先頭文字を大文字にするような置換ができます。
元の大文字・小文字を維持して置換する方法
Preserve Caseを利用する
VSCodeには「Preserve Case」という機能もあります。
これは、元の文字列の大文字・小文字のパターンをある程度維持しながら置換したい場合に便利です。
たとえば、複数の表記パターンが存在する文字列を置換する場合でも、元のケースに合わせて置換できることがあります。
単純にすべて同じ表記へ変更したくない場合は、Preserve Caseの利用を検討するとよいでしょう。
特定のファイルだけを一括置換する方法
Files to Includeを利用する
ワークスペース全体ではなく、特定の種類のファイルだけを検索・置換することもできます。
検索ビューで検索詳細を表示すると、「files to include」に検索対象を指定できます。
Windows・Linuxでは、
Ctrl + Shift + JmacOSでは、
Command + Shift + Jで検索詳細の表示を切り替えられます。
たとえばHTMLファイルだけを対象にする場合は、
*.htmlと指定します。
JavaScriptファイルだけを対象にする場合は、
*.jsと指定できます。
Searchビューでは、先頭の**/が暗黙的に補われる場合があるため、*.jsのような簡潔な指定でもワークスペース配下の対象ファイルを検索できます。
複数種類のファイルを対象にする方法
複数のGlobパターンを指定する
複数種類のファイルを検索対象にすることもできます。
たとえば、HTMLとCSSを対象にする場合は、
*.html, *.cssのように指定できます。
また、Globパターンを利用して、
{**/*.html,**/*.css}のように指定することも可能です。
JavaScriptとTypeScriptを対象にする場合は、
*.js, *.tsなどと指定できます。
初心者であれば、カンマ区切りで指定する方法のほうが分かりやすいでしょう。
特定のフォルダーだけを検索する方法
フォルダーを検索対象に指定する
特定のフォルダー内だけを検索・置換したい場合は、Files to Includeに対象フォルダーを指定できます。
たとえばsrcフォルダーだけを検索したい場合は、
src/**などと指定できます。
また、VSCodeのエクスプローラーで対象フォルダーを右クリックし、「Find in Folder」を利用する方法もあります。
大規模なワークスペースでは、対象フォルダーを限定することで誤置換を防ぎやすくなります。
特定のファイルやフォルダーを除外する方法
Files to Excludeを利用する
検索対象にしたくないファイルやフォルダーは、「files to exclude」で指定できます。
たとえば、node_modulesを明示的に除外する場合は、
**/node_modules/**と指定できます。
ビルド済みファイルを含むdistフォルダーを除外する場合は、
**/dist/**などと指定できます。
不要なファイルを除外しておくと、検索結果が見やすくなり、誤置換のリスクも減らせます。
.gitignoreなどで除外されているファイルを検索する方法
検索除外設定を確認する
「対象の文字列がファイル内にあるのに検索結果へ表示されない」という場合は、検索除外設定が影響している可能性があります。
VSCodeでは、
files.exclude
search.exclude
.gitignoreなどの設定によって、一部のファイルやフォルダーが検索対象から除外されます。
検索ビューには、「Use Exclude Settings and Ignore Files」という設定があります。
この設定を変更することで、除外設定や.gitignoreを検索に反映するかどうかを調整できます。
普段は検索対象外になっているファイルも確認したい場合は、この設定をチェックするとよいでしょう。
Globパターンの大文字・小文字に注意する
OSによって挙動が異なる
VSCodeで検索対象ファイルを指定するときに使われるGlobパターンは、OSによって大文字・小文字の扱いが異なる場合があります。
WindowsやmacOSでは、一般的にファイル名の大文字・小文字を区別しない環境が多く、Linuxでは区別されることがあります。
そのため、
*.JSと、
*.jsの扱いが環境によって異なる可能性があります。
これは検索文字列の「Match Case」とは別の仕組みなので注意が必要です。
選択した範囲だけを一括置換する方法
Find in Selectionを利用する
ファイル全体ではなく、選択した範囲だけを検索・置換したい場合は「Find in Selection」を利用します。
Windows・Linuxでは、
Alt + LmacOSでは、
Option + Command + Lで切り替えられます。
たとえば、1,000行あるファイルのうち100～200行だけを対象に置換したい場合に便利です。
editor.find.autoFindInSelectionの設定を変更すると、選択範囲がある場合に自動的にFind in Selectionを有効にすることもできます。
改行を含む文字列を一括置換する方法
複数行検索を利用する
VSCodeでは、複数行にまたがる文字列も検索・置換できます。
たとえば、
<div>
Hello
</div>を、
<p>
Hello
</p>へ置換することも可能です。
検索欄や置換欄に複数行の文字列を貼り付けることで検索できます。
また、FindまたはReplaceの入力欄にフォーカスしている状態で、
Ctrl + Enterを押すと、入力欄の中に改行を入力できます。
通常のエディター上でのCtrl + Enterとは動作が異なるため、検索・置換欄にカーソルがあることを確認して操作するとよいでしょう。
複数カーソルで文字列をまとめて編集する方法
数か所だけ変更する場合に便利
変更箇所が少ない場合は、検索・置換よりも複数カーソルのほうが便利なことがあります。
VSCodeでは、Windows・LinuxでAlt + Click、macOSでOption + Clickなどを利用して複数の場所にカーソルを配置できます。
複数カーソルを配置すると、複数箇所を同時に編集できます。
同じ文字列を数か所だけ修正したい場合には、一括置換よりも柔軟に操作できます。
変数名や関数名はRename Symbolで変更する
単純な文字列置換より安全な場合がある
プログラムの変数名、関数名、クラス名などを変更する場合は、文字列の一括置換よりも「Rename Symbol」を利用したほうが安全なケースがあります。
たとえば、
const userName = "Taro";
console.log(userName);のuserNameを別の名前に変更する場合、単純な文字列置換ではコメントや文字列リテラルなど、関係のない場所まで変更される可能性があります。
言語サポートがRename Symbolに対応している場合は、
F2でシンボル名の変更を実行できます。
Rename Symbolはコードの構造を認識して変更するため、単純な文字列置換より安全にリネームできる場合があります。
基本的には、
文章や固定文字列 → 検索と置換
変数名・関数名・クラス名 → Rename Symbolと使い分けるとよいでしょう。
一括置換する前に差分を確認する
変更予定の内容を確認してから実行する
ワークスペース全体を置換すると、多数のファイルが変更される可能性があります。
そのため、検索結果や変更予定の差分を確認してから置換することが重要です。
VSCodeでは、一致箇所ごと、ファイルごと、ワークスペース全体といった単位で置換できます。
すべてを一度に置換する必要がない場合は、必要なファイルや一致箇所だけを選んで置換するほうが安全です。
Gitを利用している場合は変更前の状態を残しておく
一括置換前に変更状況を確認する
Gitで管理しているプロジェクトでは、大規模な一括置換を行う前に現在の変更状況を確認しておくと安心です。
必要に応じて変更をコミットしたり、一時的に退避したりしておけば、誤置換が発生した場合でも元の状態へ戻しやすくなります。
ただし、GitでコミットすることはVSCodeの一括置換に必須ではありません。
あくまで、誤操作に備えるための安全対策として考えるとよいでしょう。
VSCodeの一括置換でよく使うショートカット
よく使う操作を覚えておく
VSCodeで文字列を一括置換する場合は、次のショートカットを覚えておくと便利です。
| 操作 | Windows / Linux | macOS |
|---|---|---|
| ファイル内検索 | Ctrl + F | Command + F |
| ファイル内置換 | Ctrl + H | Option + Command + F |
| ワークスペース検索 | Ctrl + Shift + F | Command + Shift + F |
| ワークスペース置換 | Ctrl + Shift + H | Command + Shift + H |
| 検索詳細の表示 | Ctrl + Shift + J | Command + Shift + J |
| 大文字・小文字を区別 | Alt + C | Option + Command + C |
| 単語単位で検索 | Alt + W | Option + Command + W |
| 正規表現の切り替え | Alt + R | Option + Command + R |
| 選択範囲内を検索 | Alt + L | Option + Command + L |
VSCodeの一括置換は用途に合わせて使い分ける
VSCodeでは、現在のファイルだけを変更する場合と、ワークスペース内の複数ファイルを変更する場合で検索・置換機能を使い分けられます。
現在のファイルだけならCtrl + H、ワークスペース全体ならCtrl + Shift + Hを利用するのが基本です。
さらに、Match Case、Match Whole Word、正規表現、Files to Include、Files to Excludeなどを組み合わせることで、置換対象を細かく絞り込めます。
一方、変数名や関数名などのコード上のシンボルを変更する場合は、言語機能が対応していればRename Symbolを利用したほうが安全です。
特に複数ファイルを一括置換するときは、検索結果や差分を確認してから実行することが重要です。
検索対象を適切に絞り込み、意図しないファイルや文字列まで変更しないように注意しましょう。
以上、VSCodeで文字列を一括置換する方法についてでした。
最後までお読みいただき、ありがとうございました。
