VS Codeのエージェントモードを拡張するには、を試してください！

vscode.dev(!)

2021年10月20日 Chris Dias (@chrisdias) より

2019年に.devトップレベルドメインが開設された際、私たちはvscode.devを取得し、すぐに駐車（park）しました。これは私たちのウェブサイトcode.visualstudio.comを指していました（あるいは、私のようにボストン出身の方なら、「パーキッ（pahked it）」と言ったでしょう）。多くの人が.devドメインを購入するのと同じように、私たちもそれをどうするつもりなのか全く考えていませんでした。そして、それが10年以上にわたるミッションの達成につながるとは、全く予想していませんでした。

VS Codeをブラウザで利用可能にする

今日に目を向けてみましょう。https://vscode.devにアクセスすると、ブラウザで完全に動作するVS Codeの軽量バージョンが表示されます。ローカルマシンのフォルダを開いて、コーディングを始めてください。

インストールは不要です。

vscode.dev running in the browser

vscode.devが利用可能になったことで、私たちはブラウザで完全にサーバーレスで実行できる開発ツールを構築するという、当初のビジョンをいよいよ実現し始めました。完全な歴史については、Erich GammaによるVS Code Dayの講演「VS Code An Overnight Success…10 Years in the Making」をご覧ください。

では、VS Code for the Webで何ができるのでしょうか？実はかなり多くのことができます…

クラウドツールを使用したローカル開発

"The Cat said No" application source code in vscode.dev

ファイルシステムアクセスAPI（現在のEdgeとChrome）をサポートする最新のブラウザは、ウェブページが（ユーザーの許可を得て）ローカルファイルシステムにアクセスすることを可能にします。このローカルマシンへのシンプルなゲートウェイは、VS Code for the Webをゼロインストールでローカル開発ツールとして使用するいくつかの興味深いシナリオを迅速に開きます。例えば、

  • ローカルファイルの閲覧と編集。Markdownですばやくメモを取ったり（プレビューも可能！）。完全なVS Codeをインストールできない制限されたマシンにいる場合でも、vscode.devを使用してローカルファイルを表示および編集できる場合があります。
  • デバッグ用のブラウザツールと連携して、クライアントサイドのHTML、JavaScript、CSSアプリケーションを構築できます。
  • Chromebookのような低電力マシンでコードを編集できます。これらのマシンではVS Codeを（簡単に）インストールすることはできません。
  • iPadで開発。ファイルのアップロード/ダウンロード（Filesアプリを使用してクラウドに保存することも可能）はもちろん、組み込みのGitHub Repositories拡張機能を使ってリモートでリポジトリを開くこともできます。

また、お使いのブラウザがローカルファイルシステムAPIをサポートしていない場合でも、ブラウザ経由でファイルをアップロードおよびダウンロードすることで、個々のファイルを開くことができます。

Local File System Access is Unsupported message dialog

より軽量な体験

VS Code for the Webは完全にブラウザ内で動作するため、デスクトップアプリでできることと比較すると、一部の機能は当然ながら制限されます。例えば、ターミナルやデバッガーは利用できません。これは、ブラウザのサンドボックス内でRustやGoアプリケーションをコンパイル、実行、デバッグできないため理にかなっています（ただし、PyodideやWebコンテナのような新興技術がいつかこれを変えるかもしれません）。

よりニュアンスがあるのは、コードの編集、ナビゲーション、ブラウジングの体験です。これらはデスクトップでは通常、ファイルシステム、ランタイム、計算環境を必要とする言語サービスやコンパイラによって提供されます。ブラウザでは、これらの体験はブラウザ内で完全に動作する（ファイルシステムもランタイムも不要な）言語サービスによって提供され、ソースコードのトークン化、構文のカラー化、補完、および多くの単一ファイル操作を提供します。

その結果、ブラウザでは、利用体験は一般的に以下のカテゴリに分類されます。

良い: ほとんどのプログラミング言語で、vscode.devはコードの構文カラー化、テキストベースの補完、そして括弧のペアのカラー化を提供します。Tree-sitterの構文ツリーを使用することで、C/C++、C#、Java、PHP、Rust、Goなどの人気のある言語向けに、アウトライン/シンボルへの移動やシンボル検索といった追加の体験を提供することができます。

さらに良い: TypeScript、JavaScript、そしてPythonの体験は、すべてブラウザでネイティブに動作する言語サービスによって提供されます。これらのプログラミング言語では、「良い」体験に加えて、リッチな単一ファイル補完、セマンティックハイライト、構文エラーなどが得られます。

最高: JSON、HTML、CSS、LESSなど、多くの「ウェブ関連」言語では、vscode.devでのコーディング体験はデスクトップ版とほぼ同じです（Markdownプレビューも含む！）。

拡張機能

テーマ、キーマップ、スニペットなどのほとんどのUIカスタマイズ拡張機能はvscode.devで動作し、設定の同期を介して、ブラウザ、デスクトップ、GitHub Codespaces間でローミングを有効にすることもできます。

OS固有のモジュールを使用する、またはローカル実行可能ファイルにシェルアウトするNode.jsコードを実行する拡張機能は、検索結果には表示されますが、利用不可として明確にマークされます。

Notification that extension is not available in Visual Studio Code for the Web

とはいえ、ブラウザで動作するように更新された拡張機能は増え続けており、毎日さらに多くの拡張機能が登場しています。

注: 拡張機能の作成者で、ご自身の拡張機能をブラウザで利用可能にしたい場合（ぜひそうしてください！）、弊社のWeb拡張機能作成ガイドをご覧ください。

例えば、Luna Paint - Image Editor拡張機能を使えば、VS Code内で直接ラスター画像を編集できます。この拡張機能は、リッチなデザインツール（例えば、レイヤーやブレンドツール）をVS Codeにもたらし、もちろん画像をローカルディスクに保存することもできます。

Luna Paint - Image Editor extension running in vscode.dev

HREF="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-github-issue-notebooks" CLASS="external-link" TARGET="_blank">GitHub Issue Notebooks拡張機能は、GitHub Issuesにノートブック体験をもたらします。これにより、クエリ、結果、さらにはクエリの目的を説明するMarkdownを、単一のエディタにまとめて混在させることができます。

GitHub Issue Notebooks extension running in vscode.dev

GitHub

VS Codeの多くの拡張機能は、GitHubに保存されたソースコードと連携します。例えば、CodeTour拡張機能を使用すると、コードベースのガイド付きウォークスルーを作成でき、WikiLens拡張機能はVS Codeとリポジトリを強力なノート作成ツール（双方向リンク付き）に変えます。GitHubのコードに簡単にアクセスできるように、VS Code for the WebにはGitHub Repositories、Codespaces、およびPull Request拡張機能が組み込まれています。迅速な編集、PRのレビューができ、より強力な言語体験を望む場合や、コミットをマージする前に変更をビルド、実行、テストする必要がある場合は、ローカルクローンまたはさらに優れたGitHub Codespaceで続行できます。

Continue on dropdown showing Clone Repository Locally or Create New Codespace

ほう、github.devとよく似ているように聞こえますね？これらは違うのでしょうか？同じなのでしょうか？なぜ2つもあるのですか？？！！

良い質問ですね！github.devは、GitHubに深く統合されたVS Code for the Webのカスタマイズされたインスタンスです。ログインは自動で行われ、URL形式はgithub.comの/organization/repoモデルに従っているため、.comを.devに変更するだけでリポジトリを編集できます。また、GitHub向けにライトテーマとダークテーマがカスタマイズされています。

GitHubのリポジトリに加えて、VS Code for the WebはAzure Repos（Azure DevOpsの一部）もサポートしています。両方で作業するために、VS Code for the Webはvscode.dev/githubとvscode.dev/azurereposの2つのルートをサポートしています。ただし、これらを覚える必要はなく、持っているURLの先頭に「vscode.dev」を付けるだけで構いません。

例えば、https://github.com/microsoft/vscodeを「https://vscode.dev/github.com/Microsoft/vscode」に変更します。

Azure Reposでも同様です。https://dev.azure.com/…を「https://vscode.dev/dev.azure.com/…」に変更します。

現在、Azure Reposのサポートはリポジトリの読み取りのみプレビューモードですが、できるだけ早く完全な読み書き機能を提供できるよう努力しています。

GitHubやAzure DevOpsを使用していない場合でも、デスクトップ版と同様に、拡張機能を通じて追加のリポジトリホスティングサービスのサポートが提供されます。これらの拡張機能は、上述のとおり、ブラウザで完全に動作するようサポートする必要があります。

URLといえば…

デスクトップ版と同様に、VS Code for the Webは、ほぼすべてのバックエンド、言語、サービスをサポートする豊富な拡張機能のエコシステムを通じてカスタマイズできます。デスクトップ版とは異なり、ユニークなvscode.devのURL（上記のvscode.dev/githubやvscode.dev/azurereposなど）を通じて、プリインストールされた拡張機能でカスタマイズされた体験を提供することは容易です。

例えば、https://vscode.dev/theme/sdras.night-owlにアクセスしてみてください。

Night Owl color theme in vscode.dev

ここでは、@sarah_edoによる人気のあるNight Owlカラーテーマを、「ライブ」で体験できます。ダウンロードやインストールプロセスを経ることなく、気に入るかどうかを確認するだけです。インストールは不要です！テーマの作成者であれば、README.mdにバッジを作成して、ユーザーがマーケットプレイスから直接テーマを試せるようにすることもできます（詳細はVS Code for the Webユーザーガイドをご覧ください）。

このURLを使って、お気に入りのテーマを友人と自由に共有してください。個人的には、@wesbosのCobalt2テーマの大ファンです。https://vscode.dev/theme/wesbos.theme-cobalt2をご覧ください。なお、themeのURLは、完全に宣言型（コードなし）のテーマでのみ動作します。

ご覧のように、vscode.devのURLは、新しい軽量な体験を提供する強力な方法です。もう一つの例は、Live Shareのゲストセッションもhttps://vscode.dev/liveshareのURLを通じてブラウザで利用可能になることです。sessionIdは拡張機能に渡され、シームレスな参加体験を実現します。

Live Share dialog with option to join session from the browser

vscode.devのURLの可能性は無限大であり、今後数ヶ月のうちに皆様と共有できる多くのアイデアがあります。

次は何が？

VS Codeをブラウザにもたらすことは、この製品の当初のビジョンの実現です。それは同時に、全く新しいビジョンの始まりでもあります。ブラウザとインターネット接続があれば誰でも利用できる一時的なエディタは、どこからでも何でも真に編集できる未来の基盤となります。

今後の情報にご期待ください… 😉

ハッピーコーディング、

Chris

追伸：見逃した方のために、弊社のVS Code for the Webライブストリームを視聴できます。