Web 用 Visual Studio Code

Web 用 Visual Studio Code は、ブラウザで完全に実行される、無料でインストール不要な Microsoft Visual Studio Code のエクスペリエンスを提供し、ソース コード リポジトリを迅速かつ安全に参照したり、軽量なコード変更を行ったりすることができます。開始するには、ブラウザで https://vscode.dev にアクセスしてください。

Web 用 VS Code には、検索や構文の強調表示、拡張機能のサポートなど、VS Code デスクトップ版の多くの機能が搭載されており、コードベースで作業したり、簡単な編集を行ったりすることができます。GitHub や Azure Repos などのソース管理プロバイダからリポジトリ、フォーク、プルリクエストを開くだけでなく、ローカル マシンに保存されているコードでも作業できます。

Web 用 VS Code はブラウザで完全に実行されるため、デスクトップ版と比較して特定の制限があります。詳細については、以下を参照してください。

次のビデオでは、Web 用 Visual Studio Code の概要を簡単に説明しています。

VS Code デスクトップ版との関係

Web 用 VS Code は、ファイルやリポジトリをナビゲートし、軽量なコード変更をコミットするためのブラウザベースのエクスペリエンスを提供します。ただし、コードの実行、ビルド、デバッグにランタイムへのアクセスが必要な場合、ターミナルなどのプラットフォーム機能を使用したい場合、または Web でサポートされていない拡張機能を実行したい場合は、作業をデスクトップ アプリケーションの GitHub Codespaces に移行するか、VS Code の全機能を使用するために Remote - Tunnels を使用することをお勧めします。さらに、VS Code デスクトップ版では、ブラウザに制限されない完全なキーボード ショートカットを使用できます。

切り替える準備ができたら、数回のクリックで完全な VS Code エクスペリエンスに 「アップグレード」することができます。

Web 用 VS Code の安定版と Insiders 版は、ギア アイコンを選択し、[Insiders バージョンに切り替える...] を選択するか、https://insiders.vscode.dev に直接アクセスして切り替えることもできます。

プロジェクトを開く

https://vscode.dev にアクセスすると、新しいローカル ファイルまたはプロジェクトを作成したり、既存のローカル プロジェクトで作業したり、GitHub や Azure Repos (Azure DevOps の一部) など、他の場所でホストされているソース コード リポジトリにアクセスしたりできます。

コマンド パレット (F1) から [ファイル] > [新しいファイル] を使用して、VS Code デスクトップ環境と同じように Web で新しいローカル ファイルを作成できます。

GitHub リポジトリ

Web 用 VS Code で GitHub リポジトリを URL から直接開くことができます。スキーマは次のとおりです: https://vscode.dev/github/<organization>/<repo>。VS Code リポジトリ を例にとると、https://vscode.dev/github/microsoft/vscode のようになります。

このエクスペリエンスは、カスタムの vscode.dev/github URL で提供され、GitHub Repositories 拡張機能 (より広範な Remote Repositories 拡張機能の一部) によって提供されます。

GitHub Repositories を使用すると、ローカル マシンにコードをプルすることなく、エディタ内からリポジトリをリモートで参照および編集できます。拡張機能とそのしくみの詳細については、GitHub Repositories ガイドを参照してください。

注: GitHub Repositories 拡張機能は VS Code デスクトップ版でも機能し、迅速なリポジトリの参照と編集を提供します。拡張機能をインストールしたら、[GitHub Repositories: Open Repository...] コマンドでリポジトリを開くことができます。

Chrome および Edge 用の vscode.dev 拡張機能をインストールすることで、ブラウザの検索バー (オムニボックスとも呼ばれます) を介して vscode.dev で GitHub リポジトリを開くこともできます。次に、code と入力してオムニボックスをアクティブにし、その後にリポジトリ名を入力します。候補はブラウザの検索履歴によって入力されるため、目的のリポジトリが表示されない場合は、完全修飾の <owner>/<repo> 名を入力して開くこともできます。たとえば、microsoft/vscode です。

すでに https://vscode.dev の Web 用 VS Code にいる場合は、Remote Repositories 拡張機能コマンドを介して異なるリポジトリに移動することもできます。ステータス バーの左下にあるリモート インジケータを選択すると、[リモート リポジトリを開く...] コマンドが表示されます。

Azure Repos

Azure Repos も Web 用 VS Code で GitHub リポジトリと同様に開くことができます。

スキーマ https://vscode.dev/azurerepos/<organization>/<project>/<repo> の URL にアクセスすると、リポジトリ内のファイルを読み取り、検索し、変更を Azure Repos にコミットすることができます。変更のフェッチ、プル、同期、ブランチの表示も可能です。

Azure Repos の URL の前に vscode.dev を付けることで、Web 用 VS Code で Azure Repos の任意のリポジトリ、ブランチ、またはタグを開くことができます。

または、Azure DevOps リポジトリまたはプル リクエストにいるときに (.) を押して、Web 用 VS Code で開くことができます。

その他のカスタム URL

デスクトップ版と同様に、VS Code for the Web は、ほぼすべてのバックエンド、言語、サービスをサポートする豊富な拡張機能のエコシステムを通じてカスタマイズできます。vscode.dev には、一般的なエクスペリエンスへのショートカットを提供する URL が含まれています。

すでにいくつかの URL (vscode.dev/github および vscode.dev/azurerepos) を検討しました。より完全なリストを以下に示します。

一部の URL は特定の形式で入力する必要があることに注意してください (たとえば、vscode.dev/editor/liveshare はアクティブな Live Share セッションを必要とします)。各サービスのドキュメントで、特定のアクセスおよび使用情報をご確認ください。

これらの URL の一部に関する詳細情報は、以下にあります。

テーマ

Web 用 VS Code を介して、URL スキーマ https://vscode.dev/editor/theme/<extensionId> を使用してカラー テーマを共有および体験できます。

たとえば、https://vscode.dev/editor/theme/sdras.night-owl にアクセスすると、ダウンロードとインストール プロセスを経ることなく、Night Owl テーマを体験できます。

注: カラー テーマ URL スキーマは、完全に宣言型 (コードなし) のテーマで機能します。

拡張機能は複数のテーマを定義できます。スキーマ /editor/theme/<extensionId>/<themeName> を使用できます。themeName が指定されていない場合、Web 用 VS Code は最初のテーマを選択します。

テーマの作成者は、以下のバッジを拡張機能の README に追加することで、ユーザーが Web 用 VS Code でテーマを簡単に試せるようにすることができます (<extensionId> をテーマ拡張機能の一意の識別子に置き換えてください)。

[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/editor/theme/<extensionId>)

Visual Studio Live Share

Live Share のゲスト セッションは、https://vscode.dev/editor/liveshare URL を介してブラウザで利用できます。sessionId は拡張機能に渡され、シームレスな参加エクスペリエンスを実現します。

別の環境で作業を続ける

場合によっては、コードを実行できる別の環境にアクセスしたいことがあります。ローカル ファイル システムと完全な言語および開発ツールをサポートする開発環境でリポジトリの作業に切り替えることができます。

GitHub Repositories 拡張機能を使用すると、リポジトリをローカルにクローンしたり、デスクトップで再開したり、現在のリポジトリの GitHub codespace を作成したり (GitHub Codespaces 拡張機能がインストールされており、GitHub codespace を作成するアクセス権がある場合) するのが簡単になります。これを行うには、コマンド パレット (F1) から利用できる [作業を続行...] コマンドを使用するか、ステータス バーのリモート インジケータをクリックします。

作業の保存と共有

Web でローカル ファイルを操作する場合、自動保存 が有効になっていると、作業は自動的に保存されます。デスクトップ版 VS Code で行うのと同様に、手動で保存することもできます (例: [ファイル] > [保存])。

リモート リポジトリで作業する場合、コミットするまで作業はブラウザのローカル ストレージに保存されます。GitHub Repositories を使用してリポジトリまたはプル リクエストを開いた場合、ソース管理ビューで変更をプッシュして、新しい作業を永続化できます。

作業を続行 を介して他の環境で作業を続けることもできます。

未コミットの変更がある状態で [作業を続行] を初めて使用すると、VS Code サービスを使用して保留中の変更を保存する [クラウドの変更] を使用して、編集内容を選択した開発環境に持ち込むオプションが表示されます。これについては、GitHub Repositories ドキュメントで詳しく説明されています。

Remote Tunnels で独自のコンピューティング インスタンスを使用する

Remote - Tunnels 拡張機能を使用して、Web 用 VS Code で別のマシンに対して開発できます。

Remote - Tunnels 拡張機能を使用すると、デスクトップ PC や仮想マシン (VM) などのリモート マシンに安全なトンネルを介して接続できます。これにより、SSH を必要とせずに、どこからでもそのマシンに安全に接続できます。これにより、vscode.dev に「独自のコンピューティングを持ち込む」ことができ、ブラウザでコードを実行するなどの追加のシナリオが可能になります。

Remote - Tunnels の詳細については、ドキュメント を参照してください。

安全な探索

Web 用 VS Code は、ブラウザのサンドボックス内で完全に動作し、非常に限定された実行環境を提供します。

リモート リポジトリからコードにアクセスする場合、Web エディタはリポジトリを「クローン」せず、ブラウザから直接サービスの API を呼び出してコードをロードします。これにより、信頼できないリポジトリをクローンする際の攻撃対象がさらに減少します。

ローカル ファイルを操作する場合、Web 用 VS Code はブラウザのファイル システム アクセス API を介してファイルをロードします。これにより、ブラウザがアクセスできる範囲が制限されます。

どこでも実行可能

GitHub Codespaces と同様に、Web 用 VS Code は iPad などのタブレットでも実行できます。

言語サポート

言語サポートは、Web 上ではコード編集、ナビゲーション、ブラウジングを含め、少し微妙な違いがあります。デスクトップ エクスペリエンスは通常、ファイル システム、ランタイム、コンピューティング環境を期待する言語サービスとコンパイラによって提供されます。ブラウザでは、これらのエクスペリエンスは、ソース コードのトークン化と構文の色付け、補完、および多くの単一ファイル操作を提供するブラウザ内で実行される言語サービスによって提供されます。

一般的に、エクスペリエンスは以下のカテゴリに分類されます。

• 良好: ほとんどのプログラミング言語で、Web 用 VS Code はコード構文の色付け、テキストベースの補完、括弧ペアの色付けを提供します。anycode 拡張機能を介した Tree-sitter 構文ツリーを使用することで、C/C++、C#、Java、PHP、Rust、Go などの人気のある言語向けに アウトライン/シンボルへ移動 や シンボル検索 などの追加のエクスペリエンスを提供できます。
• より良い: TypeScript、JavaScript、Python のエクスペリエンスはすべて、ブラウザでネイティブに実行される言語サービスによって提供されます。これらのプログラミング言語では、「良好」なエクスペリエンスに加えて、リッチな単一ファイルの補完、セマンティックな強調表示、構文エラーなどが得られます。
• 最高: JSON、HTML、CSS、LESS などの多くの「Web っぽい」言語では、vscode.dev のコーディング エクスペリエンスはデスクトップ版とほぼ同じです (Markdown プレビューを含む!)。

現在のファイルの言語サポートレベルは、ステータス バーの言語ステータス インジケータで確認できます。

制限

Web 用 VS Code は完全にブラウザ内で実行されるため、デスクトップ アプリでできることと比較して、一部のエクスペリエンスが自然に制限されます。たとえば、ターミナルとデバッガは利用できません。これは、ブラウザのサンドボックス内で Rust または Go アプリケーションをコンパイル、実行、デバッグできないため、理にかなっています。

拡張機能

ブラウザで実行できる拡張機能は一部のみです。拡張機能ビューを使用して Web に拡張機能をインストールでき、インストールできない拡張機能には警告アイコンと [理由を学ぶ] リンクが表示されます。今後、より多くの拡張機能が有効になる予定です。

拡張機能をインストールすると、ブラウザのローカル ストレージに保存されます。設定同期を有効にすることで、異なるブラウザやデスクトップを含む VS Code インスタンス間で拡張機能を同期させることができます。

Extension Pack にブラウザのサンドボックスで実行されない拡張機能が含まれている場合、パックに含まれる拡張機能を表示するオプションを含む情報メッセージが表示されます。

拡張機能がブラウザのサンドボックス内で実行される場合、より制限されます。ほとんどのテーマ、スニペット、文法など、純粋に宣言的な拡張機能は、変更なしで実行でき、拡張機能の作成者による変更なしで Web 用 VS Code で利用できます。コードを実行する拡張機能は、ブラウザのサンドボックスでの実行をサポートするために更新する必要があります。ブラウザで拡張機能をサポートするために必要なことについては、Web 拡張機能作成者ガイドで詳しく読むことができます。

また、部分的にのみサポートされているブラウザで実行される拡張機能もあります。良い例は、単一ファイルまたは現在開いているファイルにサポートを制限する言語拡張機能です。

ファイル システム API

Edge と Chrome は現在 ファイル システム API をサポートしており、Web ページがローカル ファイル システムにアクセスできるようにします。ブラウザがファイル システム API をサポートしていない場合、フォルダをローカルで開くことはできませんが、代わりにファイルを開くことができます。

ブラウザーのサポート

Web 用 VS Code は、Chrome、Edge、Firefox、Safari の最新バージョンで使用できます。各ブラウザの古いバージョンでは動作しない可能性があります。最新バージョンのみをサポートすることを保証します。

ヒント: 互換性のあるブラウザ バージョンを確認する1つの方法は、現在 VS Code のテストに使用されている Playwright のバージョンを確認し、サポートされているブラウザ バージョンをレビューすることです。現在使用されている Playwright のバージョンは、VS Code リポジトリの package.json ファイルの devDependencies/@playwright/test にあります。Playwright のバージョンがわかったら (たとえば 1.37)、リリース ノートの Browser Versions セクションを確認できます。

ウェブビューは、Firefox と Safari で異なって表示されたり、予期しない動作をしたりする可能性があります。Safari ラベルや Firefox ラベルなど、特定のブラウザに関連する問題を追跡するために、VS Code GitHub リポジトリで問題クエリを表示できます。

Web 用 VS Code を使用する際のブラウザ エクスペリエンスを向上させるための追加の手順があります。詳細については、追加のブラウザ設定セクションを確認してください。

モバイル対応

Web 用 VS Code はモバイル デバイスでも使用できますが、画面が小さいと特定の制限がある場合があります。

キーボードショートカット

一部のキーボード ショートカットも、Web では動作が異なる場合があります。

追加のブラウザ設定

ブラウザで VS Code を操作する際に、追加のブラウザ設定手順を実行できます。

新しいタブとウィンドウを開く

場合によっては、Web 用 VS Code で作業中に新しいタブまたはウィンドウを開く必要があることがあります。VS Code は、クリップボードから読み取る際に、クリップボードへのアクセス許可を求める場合があります。ブラウザによっては、クリップボードへのアクセスを許可したり、ポップアップ ウィンドウを異なる方法で許可したりできます。

• Chrome、Edge、Firefox: ブラウザの設定で「サイトの権限」を検索するか、アドレスバーの右側にある以下のオプションを探してください。

• Safari: Safari ブラウザで、[環境設定...] > [Web サイト] > [ポップアップ ウインドウ] > アクセスしているドメイン (例: vscode.dev) に移動し、ドロップダウンから [許可] を選択します。