how to

【Visual Studio Code】サイト管理がちょっと楽になるおすすめのソースコードエディタ

【Visual Studio Code】サイト管理がちょっと楽になるおすすめのソースコードエディタ

Visual Studio Code

おすすめポイント
  • 動作が軽い
  • 拡張機能で日本語対応可能
  • ページ内リンクを利用するとコード内でもジャンプ可能
  • 複数行の検索・置換が可能
  • 複数ファイルの一括検索・置換が可能

画面説明

覚えなくて大丈夫です◎
説明の中でアイコンの場所がわからなかった時に参考にしてください。

VSCODE 画面説明

日本語化

手順
  1. アクティビティバーの拡張機能アイコンをクリック
  2. サイドバーに表示される検索バーに「Japanese Language Pack for Visual Studio Code」と入力し、Enterキーを押す
  3. エディター領域に表示される拡張機能説明内のInstallボタンをクリック
  4. Visual Studio Codeを再起動する
VSCODE日本語化

便利機能

リンク先を表示機能

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

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

VSCODE リンク先を表示する機能

外部リンク(URL)の場合

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

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

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

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

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

内部リンクの場合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

VSCODE 検索・置換