みなさん、こんにちは。サイオステクノロジー武井です。今回は、導入がカンタンで開発効率爆上げなVisual Studio Code拡張機能をご紹介したいと思います。

※ 本記事は技術評論社出版の「Software Design」2022年10月号(詳細はこちら)に私が寄稿した「エディタこそ開発の要 ［最大活用］Visual Studio Code」の記事をベースとしております。是非、Software Designの方も合わせてご覧ください！！

はじめに

Visual Studio Code はインストール初期でも機能は豊富であり、かつインタフェースもシンプル、そして拡張機能により利用者の環境に合わせて自由にカスタマイズできることが、大きな魅力となっております。

一方で、その機能の豊富さにより、どの機能を使ってよいのかと迷われる方もいると思います。

そこで本記事では、「導入がカンタンで開発効率爆上げな機能」と題しまして、少ない労力で即適用可能な、それでいて開発の効率化を促進する実践的な以下の機能をご紹介致します。

• ワークスペース
• Settings Sync
• Dev Containers
• Live Share

筆者が参加する全てのプロジェクトでは、まず上記の機能を利用できるよう開発環境を整備しています。

複数のプロジェクトをまとめる「ワークスペース」

本章では、Visual Studio Code の標準機能である「ワークスペース」の概要や実践的な使い方をご紹介致します。

ワークスペースとは？

ワークスペースの概要を説明する前に、昨今のアプリケーション開発の現状について、改めておさらいしてみたと思います。

「マイクロサービスアーキテクチャ」の隆盛からも見られるように、昨今のアプリケーション開発は、非常に粒度の細かいサービス群が、メッセージングサービスなどのサービス間連携によって、プロセスまたはサービス間が相互接続をして、システム全体が稼働します。

もしくは、DDD(domain-driven desgin)という設計技法で語られるレイヤードアーキテクチャのように、UI やビジネスロジックをそれぞれ異なる層として扱う開発手法もあります。

これらの開発手法では、それぞれの「サービス」や「レイヤー」単位で開発を行い、その規模によっては 開発プロジェクトがサービスやレイヤー単位で複数発足する場合もあります。

そのような環境において、一人のエンジニアが複数のプロジェクトに携わるときは、Visual Studio Code でも複数のプロジェクトフォルダーを開く必要があります。ワークスペースを使わない場合、複数のプロジェクトフォルダーを開くためには、その数だけ Visual Studio Code を起動する必要があり、デスクトップが煩雑な状態になることは想像に難くないと思います。

ここで、ワークスペースを使いますと、複数のプロジェクトフォルダーを 1 つの Visual Studio Code で扱うことが可能になり、先に説明した煩雑さが解消され、画面がスッキリし、開発効率が向上します。

Visual Studio をご利ようになられた方であれば、ソリューションとプロジェクトの関係に非常に近しいものがあります。

文章だけですと、なかなかにイメージがつかみにくいので、「ワークスペースがない場合」と「ワークスペースがある場合」を比較してみます。

ワークスペースがないとどうなる？

ワークスペースがない場合は、デスクトップはどんな状況になるでしょうか？

ここでは例として、「サービス A」「サービス B」「サービス C」の 3 つのサービス開発を行うプロジェクトがあるとし、以下の構成のように 3 つのプロジェクトフォルダーを作成したとします。

├── ServiceA
├── ServiceB
└── ServiceC

ある一人のエンジニアがこの３つのプロジェクトを操作するとき、ワークスペースがない世界のデスクトップは以下のようになります。

プロジェクトごとに Visual Studio Code のウィンドウが立ち上がっており、もう見ただけでも作業しにくそうなのがわかります。

ワークスペースで改善

一方でワークスペースを使うと、こんなにもスッキリします。

いかがでしょうか？　ワークスペースを使わない場合に比べて、Visual Studio Code のウィンドウが 1 つしかないというのが大きな違いです。

サイドバー(Visual Sutido Code ウィンドウの左部分)に、「serviceA」「serviceB」「serviceC」の３つのプロジェクトが表示されており、サイドバーからそれぞれのプロジェクトのソースファイルをクリックすれば、プロジェクトをまたがって編集が可能です。

画面の例では全て Python になりますが、異なる開発言語(例えば Python と Java など)の組み合わせでも問題はありませんし、プロジェクトごとに独立した Git リポジトリを持つことも可能です。もちろん、デバッグ構成ファイルもプロジェクトごとに構成できるので、プロジェクトごとに異なる引数を渡したり、デバッガーにアタッチするプログラムもプロジェクトごとに変更可能です。

基本的な使い方

ワークスペースのメリットを感じて頂くことができたかと思いますので、これからはワークスペースの基本的な使い方を説明致します。

まず、上部メニューから「ファイル」→「フォルダーをワークスペースに追加…」の順にクリックします。

ワークスペースに追加したいプロジェクトフォルダーを選択して「追加」をクリックします。

以下のようにワークスペースの配下に serviceA というプロジェクトフォルダーが追加されます。

同様の手順にて、他のプロジェクトフォルダーも追加します。

ワークスペースの名称が「未設定」になっています。この状態ではまだワークスペースの設定が保存されていない状態ですので、名前をつけて保存することとします。上部メニューから「ファイル」→「名前を付けてワークスペースを保存…」をクリックします。

ワークスペースの名称を入力するダイアログが表示されますので、今回は「services.code-workspace」とし、保存する場所を選択して、「保存」をクリックします。

以下のような画面になり、これでワークスペースの設定は完了です。

今回は、3 つのプロジェクトフォルダーがあるディレクトと同じ階層にワークスペースの設定ファイルを「services.code-workspace」として保存しました。

├── ServiceA
├── ServiceB
├── ServiceC
└── services.code-workspace

services.code-workspace はワークスペースの挙動を決定付けるための様々な定義が記載されているファイルになっており、このファイルをダブルクリックするだけで、先程保存したワークスペースを直ぐに開くことができます。

services.code-workspace の中身は以下の様になっており、「パス」は、それぞれのプロジェクトフォルダーのパスであり、ワークスペースの設定ファイルからの相対パスになります。

{
  "folders": [
    {
      "path": "serviceA"
    },
    {
      "path": "serviceB"
    },
    {
      "path": "serviceC"
    }
  ]
}

上記はワークスペースの設定項目のごく一部であり、他にも様々な項目をカスタマイズ可能です。

複数PC間で設定を同期する「Settings Sync」

本章では、Visual Studio Code の設定を PC や Codespaces(GitHub が提供するクラウド開発環境)の間で同期を行う「Settings Sync」をご紹介致します。

Settings Syncとは？

昨今では、テレワークの隆盛も相まって、場所を限定しない開発環境へのニーズが高まっています。会社や自宅、コワーキングスペースなどあらゆる場所でいつでも開発できる環境はもはやエンジニアにとって必須といえるでしょう。

そのニーズに呼応するかのように、Visual Studio Code も進化を続けてきました。後ほどご紹介する Dev Containers や Live Share、クラウド上で Visual Studio Code が実行できる Codespaces、そしてリモート開発向けサーバー機能「Visual Studio Code Server」のプライベートプレビュー版提供開始など、その勢いはとどまるところを知りません。

あらゆる場所で開発が可能となった場合、問題は Visual Studio Code の設定です。フォントやテーマ色の変更といった基本的なものから、拡張機能を利用した本格的なものまで、利用者に合わせて十人十色なカスタマイズができるのが、Visual Studio Code の最大の魅力です。働く場所や働き方が多様になった今では、複数のデバイスや環境でそれらの設定を同期する必要性が出てきます。

例えば、自宅 PC 内の Visual Studio Code で開発を行い、その後出社し会社 PC 内の Visual Studio Code で開発、さらに帰宅中の電車の中で iPad から Codespaces を利用するといったケースがあるとします。その場合、自宅 PC、会社 PC、Codespaces で設定を同じにしておかなければ不便でしょうがありません。しかし、3 台とも同じ設定を手動で行うのはかなりの手間になります。

Settings Sync はそんな問題をスマートに解決し、簡単な手順で以下の設定を PC や Codespaces 間で同期できます。

• 設定
• キーボードショートカット
• ユーザースニペット
• ユーザータスク
• 拡張機能
• UI の状態

設定を同期してみよう

では、Settings Sync を使って、2 台の PC の設定を同期する手順をご紹介します。Microsoft アカウントもしくは GitHub アカウントが必要になりますので、事前にご用意ください。

まず、1 台目(同期元)の PC の Visual Studio Code で、画面左下アクティビティバーにある「設定」(歯車のアイコン)をクリックして、「設定の同期をオンにする…」をクリックします。

以下のような画面が表示されます。「サインインしてオンにする」をクリックして、Microsoft アカウントもしくは GitHub アカウントのどちらかでサインインしてください。

これで 1 台目の PC の設定は完了です。2 台目も同様の手順でセットアップすると、以下のようなウィンドウが表示されます。

それぞれの選択肢の内容は以下のとおりですので、環境に応じて適切なものを選択します。

• マージ:ローカル(自分の PC)の設定とクラウドの設定をマージします。
• ローカルを置換:ローカル(自分の PC)の設定でクラウドの設定を上書きします。
• 手動でマージする…:マージビューを元に手動でマージします。

これでフォントの設定や拡張機能といった様々な設定が 2 台の PC 間で同期されていることが確認できます。

除外設定

便利な Settings Sync ですが、場合によっては除外したい項目もあります。例えば、フォントサイズなどはデバイスによって解像度も異なるため、それぞれのデバイスで固有の値を持たせたい場合もあります。そんなときは除外設定を行います。

除外設定では、以下の同期対象を除外することが可能です。

• 設定
• 拡張機能
• プラットフォーム別のキーバインド

こちらでは、フォントサイズを除外する例をご紹介します。

まず、Visual Studio Code で、画面左下アクティビティバーにある「設定」(歯車のアイコン)をクリックして「設定」をクリックします。

「Font Size」の項目にある歯車のアイコンをクリックし「この設定を同期する」のチェックを外します。

これでフォントサイズは同期対象外になりました。

同期データの復元

もし何らかの理由により意図しない設定を同期してしまった場合、Settings Sync は過去の任意の時点に復元できます。

コマンドパレット(上部メニュー「表示」→「コマンドパレット」)から、「Settings Sync: Show Synced Data」コマンドを実行します。すると以下のような画面が表示され、サイドバーに過去の同期履歴が表示されます。復元したい部分にカーソルを合わせて、をクリックするとその時点の設定に戻ることができます。

開発環境の構築を劇的にラクにする「Dev Containers」

本章では、開発環境構築のパラダイムシフトと言っても過言ではないほど便利な拡張機能である「Dev Containers」をご紹介します。

今までの開発環境構築の問題点

開発環境構築は、開発を始める上での最初の鬼門になります。OS の違い(Windows と Mac など)を始めとした環境の差異、複雑すぎる手順ゆえの設定ミス、そもそもの構築手順書の誤記載など、様々な要因によって立ち行かないことが多くあり、開発リーダーやエンジニアが頭を悩ませるところであります。

こういった悩みの多くは、その仕事が「人」や「環境」に依存していることが原因であり、それを解決する有効な手段としては「自動化」になります。自動化することにより、属人性を排除、標準化が可能となり、誰が実施しても同じ結果に到達でき、チーム全体としての生産性が向上します。

つまり、「開発環境構築の自動化」が解決の鍵になり、それを実現するのが今回ご紹介する「Dev Containers」です。

Dev Containersの基盤「Docker」とは？

Dev Containers のテクノロジーを支える重要な技術基盤に Docker があります。本記事では、Visual Studio Code がメインテーマのため、Docker の詳細は割愛させて頂きますが、以降の説明のために必要な基礎的な概念をご紹介します。

Docker とは、コンテナ型の仮想環境を作成、配布、実行する仕組みです。では、コンテナとはなんなのかという疑問に至るわけですが、こちらは従来の VMware などの仮想環境と比較して説明致します。説明をわかりやすくするために、コンテナ型の仮想環境を「コンテナ」、従来型の仮想環境を「仮想化」と呼びます。

上図のホスト OS は、仮想化ソフトウェアやコンテナを実行する PC の OS です。仮想化は、仮想化ソフトウェア及びその上で動くゲスト OS が必要なのに比べて、コンテナはホスト OS 上のカーネルを直接参照して動作します。つまり、コンテナは仮想化に比べて軽量であることが大きなメリットであり、社内 LAN などに比べて帯域に制限の多いインターネットを通じて、開発に必要な OS やミドルウェアをダウンロードするのに非常に適しています。

テレワーク隆盛の事情も相まって、エンジニアは社内だけではなく、自宅やコワーキングスペースで開発をするようになりました。そのような状況において、インターネットを経由して、開発環境構築に必要な OS やミドルウェア等をダウンロード可能であり、さらに Dockerfile で環境のカスタマイズも可能な Docker というのは、Visual Studio Code と相性ピッタリといえます。

Dev Containersとは？

さて、Visual Studio Code と Docker の相性は抜群であることがわかりました。Dev Containers は、そんな Visual Studio Code と Docker の橋渡しをしてくれる拡張機能であり、以下のような機能を持っています。

• あらかじめ定義した設定ファイル(devcontainer.json)に基づいて、Docker コンテナを生成してくれる。
• 拡張機能を Docker コンテナ上で動作できる。
• Docker コンテナ内のソースコードをローカルにマウントできる。

文章だけですと、なかなかにイメージがつかみにくいので、こちらもワークスペースのときと同様に「Dev Containers を使わない場合」と「Dev Containers を使う場合」を比較してみます。

Dev Containersを使わない場合

まずは、Dev Containers を使わない場合の開発環境構築の大変さについて説明します。

では、実例として、Python で MySQL にアクセスするコマンドラインアプリケーションを考えてみます。このアプリケーションを構築するために、開発用 PC にインストールが必要なのは以下のとおりです。

• MySQL
• Python
• Python 用 Visual Studio Code 拡張機能(デバッグや静的解析に必要)

構成は以下の図の通りになります。

この開発環境を構築するには、Python のインストール、MySQL のインストール、必要な拡張機能のインストールや設定と様々な作業が必要になります。まだこの程度なら間違いも少なさそうですが、もっと複雑な開発環境となり手順も多くなりますと、環境差異による想定外の動作、構築手順のミスなどが多発し、その苦労は想像に難くありません。

Dev Containersを使う場合

Dev Containers は、このような問題をスマートに解決します。

まず、百聞は一見にしかずということで、「Dev Containers を使わない場合」で紹介した開発環境を Dev Containers で再構成したものを以下に示します。

上の図を元に Dev Containers 拡張機能がどのように動作するかを説明します。(以下の番号は図中の丸囲いの数字に対応します)

1. Dev Containers 拡張機能が、設定ファイル devcontainer.json を読み込む。
2. devcontainer.json は、その設定ファイルに記載されている docker-compose.yml 及び Dockerfile を読み込む。
3. Dev Containers 拡張機能は、docker-compose.yml 及び Dockerfile の設定に基づき、Docker デーモンに Docker コンテナ作成の指示を送る。
4. Docker デーモンは、指示された内容に基づき、Docker コンテナを生成する。
5. Dev Containers 拡張機能は、devcontainer.json の設定に基づき、VS Coder Server を通じて Docker コンテナに拡張機能をインストールする。

つまり、Dev Containers 拡張機能を実行するだけで、MySQL、Python、拡張機能のインストールを自動化してくれるのです。従来の手順書ベースによる開発環境構築とはサヨナラができ、どなたでも簡単に環境構築が行えます。これは素晴らしいことです。さらに、devcontainer.json などの設定ファイルを Git リポジトリでソースコードとともに管理しておけば、リポジトリから Clone するだけで、開発環境が一丁上がりという便利な使い方も可能です。

そして MySQL や Python などのミドルウェアやランタイムはもちろんのこと、拡張機能までもが VS Code Server により Docker コンテナ側で実行されます。これにより、Docker デーモンさえインストールされていれば、OS の違い(Windows と Mac など)を始めとした環境に依存することなく、どこでも確実に動く開発環境を構築できます。

さらに、Python や MySQL など必要なランタイムやミドルウェアが開発用 PC 側ではなく、Docker コンテナ側で動作するので、開発用 PC にあれこれ色んなものをインストールする必要がありません。PC はインストールされているソフトウェアが多ければ多いほど動作が不安定になりがちですが、Dev Containers を使えばその心配もありません。

開発環境の変更もカンタンです。例えば、Python のバージョンを変えたい場合、Dockerfile の FROM に定義してある Python の Docker イメージを変更するだけです。

いかがでしょうか？　Dev Containers の素晴らしさがご理解頂けたかと思います。私のプロジェクトでも数年前から、Dev Containers 拡張機能を導入していますが、劇的に生産性が向上しました。筆者的に最も推しの拡張機能ですので、ぜひ皆さんにも使ってもらえたらと思います。

Dev Containersによる開発環境構築手順

では、先にご紹介した開発環境(Python で MySQL にアクセスするコマンドラインアプリケーション)の構築手順を説明します。

まずは、以下のリンクより Docker Desktop をダウンロードし、インストールしてください。

https://www.docker.com/products/docker-desktop/

ちなみにWindows の場合、Docker Desktop インストール中に WSL2Linux カーネルのインストールを要求されますので、その際に表示される以下のダイアログに従い、インストールしてください。

Dev Containers 拡張機能に必要な設定やソースコードを含むプロジェクトを用意します。そのファイル群やディレクトリ構成は以下の通りとなります。

プロジェクトフォルダのトップ
├── .devcontainer
│   ├── devcontainer.json
│   ├── docker-compose.yml
│   └── Dockerfile
└── test.py

それぞれのファイルの内容は以下の通りとなります。

まずは devcontainer.json です。Docker コンテナ内にインストールする拡張機能や、Docker 関連の設定ファイルを指定します。

{
  # 設定を一意に識別する任意の名称です。
  "name": "sampleapp",

  # コンテナを作成するためのdocker-compose.ymlのファイル名を指定します。
  # docker-compose.ymlの内容については後述します。
  "dockerComposeFile": [
    "docker-compose.yml",
  ],

  # docker-compose.ymlで定義しているサービスの中で
  # デバッグ対象のアプリケーションが実行しているサービスを指定します。
  "service": "app",

  # 現在ローカルで開いているワークスペースを
  # コンテナ内のどのフォルダーにマウントするか指定します。
  "workspaceFolder": "/opt/app/src",

  # フォルダーのマウント方法を指定します。
  "mounts": [
    "source=${localWorkspaceFolder},target=/opt/app/src,type=bind,consistency=cached"
  ],

  # Dockerコンテナにインストールする拡張機能を指定します。
  "extensions": [
    "ms-python.python"
  ]
}

Python、MySQL 実行環境の Docker コンテナを生成するDockerfileです。

FROM python:3.10
RUN pip install PyMySQL
RUN pip install cryptography

同じくPython、MySQL 実行環境の Docker コンテナを生成するdocker-compose.ymlです。

version: '3'
services:
  app:
    container_name: 'app'
    build: .
    volumes:
      - ../:/opt/app/src
    tty: true
  mysql:
    image: "mysql:8"
    environment:
      MYSQL_DATABASE: "testdb"
      MYSQL_USER: "user"
      MYSQL_PASSWORD: "password"
      MYSQL_ROOT_PASSWORD: "password"
    ports:
      - 3306:3306
    volumes:
      - "../mysql:/var/lib/mysql"
    tty: true

動作確認を行うためのソースコードです(test.py)。MySQL に接続するだけの簡単なプログラムです。

import pymysql.cursors

# Connect to the database
connection = pymysql.connect(host='mysql',
   user='user',
   password='password',
   database='testdb')

Dev Containers 拡張機能をインストールします。アクティビティバーにあるのアイコンをクリックして、 検索テキストボックスに「dev Containers」と入力します。「Remote – Containers」という名称の拡張機能が表示されますので、インストールします。

コマンドパレット(Visual Studio Code 上部メニュー「表示」→「コマンドパレット」)から、「Remote-Containers: Reopen in Container」コマンドを実行します。

以上で環境構築は終了です。あっという間でしたね。test.py をデバッグ実行すると、データベースに接続できます(接続するだけのソースコードなので特に何か変化はないのですが、エラーが出なければ問題はありません)。

Dev Containers 拡張機能を使うと、いかに簡単に開発環境構築ができるかを体感いただけたかと思います。

テレワーク時代にぴったりの「Live Share」

本章では、テレワーク時代に相性ぴったりの拡張機能である「Live Share」をご紹介します。

テレワーク時代のワークスタイル

テレワークの普及も相まって、我々のワークスタイルはここ数年で大きく変化しました。通常のコミュニケーションはチャットツールにシフトし、会議は Zoom や Teams などによるオンライン会議が主流となりました。

では、開発はどうでしょうか？　オフラインが中心だった頃に比べて、開発の要であるコードレビューやペアプログラミングのハードルが高くなったと感じておられる方も多いのではないでしょうか？

オフラインのときのコードレビューやペアプログラミングは、レビュイー(レビューを受ける人)の端末の前にレビュアが集まり、議論をするといった形式が一般的だったかと思います。レビュアの指摘に基づいてレビュイーがコードを修正し、ときにはレビュアー自身が手本を見せるために自らコーディングするといった場面もありました。

このような方法をオンラインで同じように実施することの難しさは、想像に難くないと思います。コードの共有についてはオンライン会議ツールの画面共有でも何とかなりますが、レビュアとレビュイーが同じソースコードを共有して同時編集するのは、オンライン会議ツールでは厳しいです。

Live Shareで解決!!

そんなテレワーク時代の開発における問題を解決するのが、「Live Share」という拡張機能です。Visual Studio Code に Live Share という拡張機能をインストールすれば、開発メンバーが同じソースコードを共有して同時に編集することが可能となります。さらには、開発メンバー同士でのチャット機能、ターミナルやサーバーの共有といった機能もあり、オフラインと同等のパフォーマンスを発揮できます。

Live Shareの準備

では、Live Share を利用するために必要な事前準備について説明します。

この作業については、「Live Share に招待する側」「Live Share に招待される側」のそれぞれが必要になりますので、個別に説明します。

Live Shareに招待する側

こちらは、Live Share に招待する側、つまりレビュイー(レビューを受ける人)の操作になります。

アクティビティバーにあるのアイコンをクリックして、 検索テキストボックスに「live share」と入力します。「Live Share」という名称の拡張機能が表示されますので、インストールします。

図 20 のように、アクティビティバーに表示される Live Share のアイコン()をクリックし、「Share」ボタンをクリックします。「Git Hub」「Microsoft」の選択肢が表示されますので、どちらかのアカウントでログインします。

Git Hub アカウントもしくは Microsoft アカウントでのログインが完了すると、自動的にクリップボートに Live Share 招待用 URL がコピーされるので、Live Share に招待したいメンバーにこの URL を送信します。

Live Shareに招待される側

こちらは、Live Share に招待される側、つまりレビュアの操作になります。

まず「Live Share に招待する側」と同じように、Live Share の拡張機能をインストールします。

「Live Share に招待される側」と同様に、図 20 のような画面が表示されますので、アクティビティバーに表示される Live Share のアイコン()をクリックし、「Join」ボタンをクリックします。「Git Hub」「Microsoft」の選択肢が表示されますので、どちらかのアカウントでログインします。

以下のような画面が表示されますので、テキストボックスに Live Share 招待用 URL を入力してエンターを押下します。

成功すればレビュイー側の画面(ソースコード)が表示されます。これで Live Share の準備は完了です。

では、準備ができたところで、Live Share の素晴らしい機能をご紹介します。

Live Shareの機能

では、準備ができたところで、Live Share の素晴らしい機能をご紹介します。

コードの共同編集

Live Share の一番のキモと言っても過言ではない、コードの共同編集です。以下の図は Live Share のセッションに参加しているレビュイーとレビュアの Visual Studio Code を並べたものです。

上図からわかりますようにレビュアが選択したソースコード(hello_world の部分)が、レビュイーのエディタでも選択状態になっているのがわかります。さらにソースコードを編集すれば、お互いのエディタに反映されます。

チャット

Live Share セッションに参加している人たち同士でチャットも可能です。サイドバーの「セッション Chat」をクリックするとチャットウィンドウが表示されます。

ターミナルの共有

Live Share セッションに参加しているメンバー同士でターミナルの共有が可能です。ただし、デフォルトでは Live Share に招待した側しかターミナルを操作できません。Live Share 参加者全員がターミナルを操作できるようにするためには、サイドバーの「Shared Terminals」をクリックして、目的のターミナルを右クリックし、「Make Read/Write」をクリックします。

ただし、Write を許可してしまうと、Live Share に参加しているメンバー全員が任意のコマンドをターミナルで実行できてしまうので、十分気をつけてください。

サーバーの共有

Web アプリケーションの開発などでは、デバッグのためにローカルに Web サーバーを立ち上げることがあります。その Web サーバーを Live Share に参加しているメンバー全員にアクセスさせることができたら、とても便利です。そんな機能が Visual Studio Code にはあります。

サイドバーの「Shared Servers」をクリックしてすると、公開したいポート番号を入力するテキストボックスが表示されますので、ポート番号を入力してエンターを押下します。

上図の例では 5000 と入力しましたので、Live Share に参加しているメンバー自身の PC で localhost:5000 にアクセスすれば、サーバーを公開したメンバーの Visual Studio Code で動作しているサーバーにアクセスできます。

まとめ

いかがでしょうか？Visual Studio Codeは拡張機能がたくさんありすぎて何を使っていいか迷ってしまいます。本記事ではガチげ開発効率爆上げな機能を厳選チョイスしました。Visual Studio Codeガチ勢のお役に立てれば幸いです(^^)