今回はVisual Studio Codeの便利な検索・置換機能と、ページ内リンクによるコード内ジャンプ機能をご紹介します。
- ページ内リンクを利用するとコード内でもジャンプ可能
- 複数行の検索・置換が可能
- 複数ファイルの一括検索・置換が可能
インストールと日本語化については、以下の記事をご覧ください。
便利機能
リンク先を表示機能
Ctrlを押しながら<a>要素のhref内をクリックするとリンク先を表示します。
これを使うと、開きたいファイルを探して開いたり、スクロールしてコードを探す手間を省くことができます。
外部リンク（絶対パス）の場合
絶対パスを指定した外部リンクを開くと、ブラウザでホームページを表示します。
例
<a href="http:~">リンクテキスト</a>外部リンク（相対パス）の場合
Visual Studio Codeの新規タブとして該当ファイルを開きます。
例
<a href="top.html">リンクテキスト</a>内部リンクの場合
リンク先の要素の位置までカーソルを移動させます。
例
<a href="#MENU_1">リンクテキスト</a>複数ファイルの一括検索・置換
複数ファイル、複数行に跨った検索・置換が可能です。
手順
- アクティビティバーの検索アイコン
をクリック - サイドバーに表示される検索・置換バーにそれぞれ入力する
- 置換バーの右にある置換アイコン
をクリックすると置換を実行する
検索・置換バーで改行をする
検索・置換バーに入力する際は、Ctrl+Enterで改行できます。
また、複数行に跨るテキストをコピー&ペーストして入力することも可能です。
長いテキストの場合は一度エディターでテキストを入力してからコピー&ペーストすると効率的です。
検索ワードを入力した場合の画面表示
検索ワードを入力すると、サイドバーに検索ワードが存在するファイルと、該当箇所の一覧が表示されます。
一覧からファイル、または該当箇所をクリックすると、エディター領域に該当箇所を強調して表示します。
検索ワード＋置換ワードを入力した場合の画面表示
検索ワード・置換ワードを入力すると、検索時と同じようにサイドバーに検索ワードが存在するファイルと、該当箇所の一覧が表示されます。
一覧からファイル、または該当箇所をクリックすると、エディター領域に置換のプレビューが表示されます。
変更箇所の差分が強調されるので、置換して問題がないかどうかを事前に確認できます。
