【Visual Studio Code】検索・置換方法（初心者向け）

Visual Studio Codeの検索・置換方法を初心者の方向けに紹介します。
検索・置換を思うように扱う事ができれば、圧倒的に効率的にコーディングする事ができ、コーディング以外にも、文章編集などにも応用する事ができます。

検索・置換の基礎知識をつけたい、実践的に活用できるようになりたいとお困りの方にも、
具体例を踏まえ、写真付きで詳しく解説していきます。

1 Visual Studio Code検索
2 Visual Studio Code置換
- 2.1 特定キーワード一括置換・削除
- 2.2 一部だけ置換
3 フォルダ内ファイル、同じ要素一斉置換
4 まとめ

Visual Studio Code検索

Visual Studio Codeの検索は、主に3点あり

1.ファイル内検索
2.選択テキスト内選択
3.フォルダ内検索

上記の3点があり、それぞれ見ていきます。

1.ファイル内検索

ファイル内検索とは、その名の通りファイル内の検索を行います。
下記のように、index.htmlファイルならindex.htmlファイル内、
style.cssファイルなら、style.cssファイル内というファイル内検索です。

検索バーの出し方は、それぞれのファイル内で、ショートカットキーwindows:[Ctrl] + 【F】。mac:[Cmd] + 【F】を入力し表示することができます。

例えば検索バーに「テキスト」と入力すれば、ファイル内「テキスト」にハイライトが付き目立つように表示されます。
下記のような状態です。
検索バーをしまうには、「esc」もしくは検索バー横のバツマークを押します。

2.選択テキスト内検索

検索バーを表示させた最初のデフォルトの検索範囲は、ファイル内全体ですが、
ファイル内でさらに選択範囲を指定し、絞り込む事ができます。

まずは選択したい範囲を選択。

検索バーの横3本線（ハンバーグメニュー）を押す。

ここで例としてaと検索バーに入力。選択した範囲の「a」がハイライトされ表示されました。ファイル内からさらに絞り込みたい時に便利な機能です。

3.フォルダ内検索

フォルダ内検索、下記であれば「sample」フォルダ内を検索します。

フォルダ内検索をするには、ショートカットキーwindows:【Ctrl】+【Shift】+【F】。mac:【Cmd】+【Shift】+【F】。
もしくは、「検索マーク」を押して検索バー表示し、検索バーに検索したいワードを入力します。

Visual Studio Code置換

特定キーワード一括置換・削除

方法は2点あり、2点紹介します。

方法1

ショートカットキー、win:【Ctrl】+【H】。mac:【Ctrl】+【Shift】+【H】を押し、検索・置換バーを表示。

検索バーに一括変換したい文字、置換バーに一括置換したい文字を入力。
今回は、「テキスト」を→「ファイル」に一括置換。
全て置換ボタンを指定し。

置換ボタンクリック。

下記のように、「テキスト」を→「ファイル」に一括置換することに成功。

特定キーワード一括削除するには

検索バーに削除したい特定ワードを記入、置換バーに何も記述せずに、置換ボタンを押します。

確認のポップが出ますので置換ボタンを押す。

下記のように「テキスト」という文字が削除されました。

方法2

ショートカットキーwindows:[Ctrl] + 【F】mac:[Cmd] + 【F】を入力し検索バーを表示。

検索バー左の「＞」マークをクリックし、置換バーを表示。

ここに先程と同じ要領で、検索バーに一括変換したい文字、置換バーに一括置換したい文字を入力。
今回は、「テキスト」を→「ファイル」に一括置換。
全て置換ボタンをし、全て置換ボタンクリック。

下記のように、「テキスト」を→「ファイル」に一括置換に成功。

特定キーワード一括削除するには

こちらも削除方法は同じです、検索バーに削除したい特定ワードを記入、置換バーに何も記述せずに、置換ボタン押せば削除できます。

一部だけ置換

方法は2点あり、2点紹介します。

方法1

一部だけの置換をすることもできます。
例えば下記の「テキスト」の行の先頭の「テキスト」だけをファイルに変えたい場合。

win:【Ctrl】+【H】。mac:【Ctrl】+【Shift】+【H】を押し、検索・置換バーを表示。
検索バーに一括変換したい文字、置換バーに一括置換したい文字を入力。
今回は先頭の、「テキスト」を→「ファイル」と入力、1行目の置換バーを押します。

下記のように先頭の文字（特定の文字）だけを置換する事ができました。

方法2

変更したい文字を選択します。
テキスト行の最初の「テキスト」を選択。

ショートカットキーwindows:[Ctrl] + 【F】mac:[Cmd] + 【F】を入力し検索バーを表示。「>」ボタンを押し。
置換バーを出し、変換したい文字、今回は「ファイル」を記入。
置換ボタンを押します。

選択した最初の1行目の文字だけ「ファイル」に変換する事ができました。

一部キーワード一括削除するには

こちらも削除方法は同じです、検索バーに削除したい一部ワードを記入、置換バーに何も記述せずに、置換ボタン押せば削除できます。

フォルダ内ファイル、同じ要素一斉置換

フォルダ内のファイルを一斉に置換することも可能です。
下記フォルダは、sampleフォルダ内に「index.htmlファイル」「style.cssファイル」がある状態です。

sampleフォルダ内の同じ要素を一斉置換します。
編集→フォルダを指定し置換をクリック

検索、置換バーを出し。

変更したい文字、置換したい文字を記入。
今回は、「example」→「sample」を記述し置換ボタンを押す。

確認テロップで「置換」を押す。

下記のようにフォルダ内全てのファイル（今回は、index.htmlファイル、style.cssファイル）の
「example」→「sample」に変更する事ができました。

まとめ

今回は、にVisual Studio Codeの検索・置換方法を初心者の方向けに紹介してきました。

最後にポイントをまとめます。

1.ファイル内検索をするには
ショートカットキー「windows:[Ctrl] + 【F】」、「mac:[Cmd] + 【F】」で検索バーを表示し検索する。

2.選択テキスト内検索するには
検索バーを表示させ、検索バーの横3本線（ハンバーグメニュー）を押し選択する。

3.フォルダ内検索するには
ショートカットキーwindows:【Ctrl】+【Shift】+【F】。mac:【Cmd】+【Shift】+【F】。もしくは、「検索マーク」を押し、検索バーを表示してフォルダ内を検索する。

4.特定キーワード一括置換・削除するには
方法は2つあり
方法1は、ショートカットキー、win:【Ctrl】+【H】。mac:【Ctrl】+【Shift】+【H】を押し、検索・置換バーを表示し、検索バーに一括変換したい文字、置換バーに一括置換したい文字を入力し置換する。
置換に何も記入しなければ削除になる。

方法2は、ショートカットキーwindows:[Ctrl] + 【F】mac:[Cmd] + 【F】を入力し検索バーを表示し、検索バー左の「＞」マークをクリック、置換バーを表示。
検索バーに一括変換したい文字、置換バーに一括置換したい文字を入力し置換する。
置換に何も記入しなければ削除になる。

5、一部だけ置換するには
方法は2つあり
方法1は、win:【Ctrl】+【H】。mac:【Ctrl】+【Shift】+【H】を押し、検索・置換バーを表示。
検索バーに一括変換したい文字、置換バーに一括置換したい文字を入力しサイドバー1行目の置換バーを押す。

方法2は、変更したい文字を選択しショートカットキーwindows:[Ctrl] + 【F】mac:[Cmd] + 【F】を入力し検索バーを表示。「>」ボタンを押し。
置換バーを出し、変換したい文字を入力し、置換ボタンを押す。

6.フォルダ内ファイル、同じ要素一斉置換するには
編集を押し→「フォルダを指定し置換」をクリック、検索、置換バーを出し、変更したい文字、置換したい文字を記入し、置換ボタンを押す。

いかがだったでしょうか？
本記事を参考に、効率的な開発を進めていただけたら幸いです。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。