HOME
Visual Studio Code (VSCode) は、多くのプログラミング言語に対応しているソースコードエディタです。本ページは Visual Studio Code の導入から使い方までをわかりやすく解説する入門記事です。
アクティビティバーには、初期状態で 7 つのアイコンがあります。
[Ctrl] + [Shift] + [E]
)[Ctrl] + [Shift] + [F]
)[Ctrl] + [Shift] + [G]
)[Ctrl] + [Shift] + [D]
)[Ctrl] + [Shift] + [X]
)追加した拡張機能によっては、アクティビティバーに更にアイコンが追加されます。アイコンは、ドラッグすることで上下を入れ替えることができます。また、アクティビティバー上で右クリックするとコンテキストメニューが表示され、アイコンの表示・非表示を切り替えることもできます。
サイドバーは [Ctrl] + [B]
で表示・非表示を切り替えることができます。また、メニューから [表示] - [外観] - [サイドバーを右に移動] を選択することにより、アクティビティバーとサイドバーをウィンドウの右側に表示することもできます。
エクスプローラービューは、ワークスペースのファイル一覧や、エディターのファイル一覧、ファイル内のアウトラインをサイドバーに表示します。エクスプローラービューのファイル名をクリックすると、エディターにその内容が表示されます。
ワークスペースとは、開いているフォルダー群を抽象化する概念です。VSCode は、別々の場所にある複数のフォルダーを 1 つのウィンドウで同時に開くことができます。複数のフォルダーを含んだワークスペースをマルチルートワークスペースと呼びます。
複数のフォルダーを開く場合は、メニューから [ファイル] - [フォルダーを開く...] から複数のフォルダーを選択するか、フォルダーを開いた後にメニューから [ファイル] - [フォルダーをワークスペースに追加...] を実行します。[ファイル] - [名前を付けてワークスペースを保存...] を実行すると、マルチルートワークスペースの設定ファイルが保存され、次回以降も同じフォルダーを開けます。
ファイルやフォルダーの追加や削除、名前の変更などエクスプローラービューから行えます。また、ドラッグ&ドロップによるファイルやフォルダーの移動も可能です。
コンテキストメニューでは、ファイルのエクスプローラーでの表示や、パスのコピーなどが可能です。
エクスプローラービューから 2 つのファイルを比較することもできます。ファイルを比較したい場合は、[Ctrl]
キーを押しながら 2 つのファイルをクリックし、コンテキストメニューの「選択項目の比較」を選択します。
選択項目の比較を選択すると、2 つのファイルがエディターで開かれ、並べて比べることができます。
エクスプローラービューのアウトラインビューでは、アクティブになっているエディターのファイル内のシンボルをツリー状に表示します。アウトラインをクリックすることで、エディター内を移動することができます。
シンボルとは、プログラムのソースコード内のクラス名や関数名、変数名などを指します。HTML では各種タグ、JSON ではキー名など、言語やファイルの種類によって指すものが変化します。ファイル内やワークスペースのシンボルには [Ctrl] + [Shift] + [O]
、[Ctrl] + [T]
、クイックオープンなどからジャンプすることができます。
エクスプローラービューに表示されているドキュメントツリーに対してフィルタリングを行うことができます。フィルタリングを行うには、エクスプローラービューをクリックし、任意の文字列をキー入力します。
エクスプローラービューの右上にフィルターボックスが表示され、入力した文字列が表示されます。一致するファイル名は強調表示されます。
フィルタボックスにカーソルを合わせて「型のフィルターを有効にする」アイコンをクリックすると、一致するファイル・フォルダのみが表示されます。「型のフィルターを無効にする」アイコン、または「閉じる」アイコンをクリックするとフィルターがクリアされます。
検索ビューでは、ワークスペース全体の検索と置換ができます。正規表現の使用や、含めるファイル、除外するファイルなどの指定も可能です。検索結果からは、各ファイルの一致した場所にジャンプすることができます。
検索する対象を限定したい場合は、「含めるファイル」にファイル名や、ファイルの拡張子などを指定します。除外するファイルの場合も同様です。
これらの指定方法には、以下のオプションが使用可能です。また、複数指定する場合は、カンマで区切って指定します。
*
: パスセグメント内の 1 つ以上の文字に一致する?
: パスセグメント内の 1 つの文字に一致する**
: 0 を含む任意の数のパスセグメントに一致する{}
: 条件をグループ化する (例えば {**/*.html, **/*.css} など
)[]
: 一致する文字の範囲を指定する (例えば file[1-5].txt
など)Git に関する機能を VSCode 上で使用することができます。拡張機能をインストールすることで、Git 以外のソース管理システムを使用することも可能です。Git を使用したソース管理は別ページで説明します。
デバッガと連携し、ブレークポイントを使ったプログラムのステップ実行や、変数やコールスタックなどの表示が可能です。各プラットフォームのデバッガは、拡張機能で追加できます。デバッグについては別ページで説明します。
拡張機能のインストールや管理を行うことができます。
拡張機能には、新しいコマンドを追加するものや各開発言語用のインテリセンス、スニペット、デバッガを追加するだけでなく、コンテナや Azure コマンドのような外部環境と連携するもの、VSCode の外観を変更するテーマなども含まれます。
インストール済みの拡張機能をすべて無効・有効にするなどの操作も可能です。