【Visual Studio Code】便利機能(リンク先を表示・検索・置換・複数行検索・複数行置換)

制作環境

Visual Studio Codeには便利な機能がたくさんあります。
今回はその便利機能の使い方についてご紹介します。

  • ページ内リンクを利用するとコード内でもジャンプ可能
  • 複数行の検索・置換が可能
  • 複数ファイルの一括検索・置換が可能

インストールと日本語化については、以下の記事をご覧ください。

便利機能

リンク先を表示機能

Ctrlを押しながら<a>要素のhref内をクリックするとリンク先を表示します。

これを使うと、開きたいファイルを探して開いたり、スクロールしてコードを探す手間を省くことができます。

VS Code リンク先を表示機能

外部リンク(URL)の場合

URLを指定した外部リンクを開くと、ブラウザでホームページを表示します。

<a href="http:~">リンクテキスト</a>

外部リンク(相対パス)の場合

Visual Studio Codeの新規タブとして該当ファイルを開きます。

<a href="top.html">リンクテキスト</a>

内部リンクの場合

リンク先の要素の位置までカーソルを移動させます。

<a href="#MENU_1">リンクテキスト</a>

複数ファイルの一括検索・置換

複数ファイル、複数行に跨った検索・置換が可能です。

手順
  1. アクティビティバーの検索アイコンをクリック
  2. サイドバーに表示される検索・置換バーにそれぞれ入力する
  3. 置換バーの右にある置換アイコンをクリックすると置換を実行する

検索・置換バーで改行をする

検索・置換バーに入力する際は、Ctrl+Enterで改行できます。

また、複数行に跨るテキストをコピー&ペーストして入力することも可能です。
長いテキストの場合は一度エディターでテキストを入力してからコピー&ペーストすると効率的です。

検索ワードを入力した場合の画面表示
VS Code 検索・置換 検索ワードを入力した場合の画面表示

検索ワードを入力すると、サイドバーに検索ワードが存在するファイルと、該当箇所の一覧が表示されます。

一覧からファイル、または該当箇所をクリックすると、エディター領域に該当箇所を強調して表示します。

検索ワード+置換ワードを入力した場合の画面表示
VS Code 検索・置換 検索ワード+置換ワードを入力した場合の画面表示

検索ワード・置換ワードを入力すると、検索時と同じようにサイドバーに検索ワードが存在するファイルと、該当箇所の一覧が表示されます。

一覧からファイル、または該当箇所をクリックすると、エディター領域に置換のプレビューが表示されます。
変更箇所の差分が強調されるので、置換して問題がないかどうかを事前に確認できます。

VS Code 検索・置換 置換プレビュー
タイトルとURLをコピーしました