Visual Studio Code for the Web (vscode.dev) が Public Preview になりました

皆さんごきげんよう。米国時間 10 月 20 日、Visual Studio Code for the Web (vscode.dev) の パブリックプレビューを発表しました。今日はこの [**vscode.dev**](https://vscode.dev/) について紹介いたします。
(2021/10/21 20:37 Update)
(2022/02/18 12:20 Update)

https://vscode.dev/

VS Code の January 2022 Update で、vscode.dev および github.dev での署名付き GitHub Commit がサポートされるなど、いくつかのアップデートを本記事に反映しました。

https://code.visualstudio.com/updates/v1_64

記事の該当箇所リンク

https://qiita.com/uikou/items/b5f6a0cd4228c46159dc?fbclid=IwAR06WxMLTBgUrUHYNA_EgrnjciUA1kqgypcHlfWfOw0E_Pvh7mT3S9UOAo8#vscode-january-2022-update-%E3%81%A7%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%8820220208-update

(2022/02/08 Update)

#vscode.dev とはなにか
vscode.dev は、インストール不要、完全ブラウザーベースの**コードエディタ**です（無料）。
![img](https://code.visualstudio.com/assets/blogs/2021/10/20/vscode-dev.png)
10 年以上前から、Visual Studio 開発チームでは、サーバーレスで動作する開発ツールを実現したいという野望がありました。試行錯誤など多くの歴史がありましたが、Azure が出てきてから、クラウドツールを使ったローカル開発という方向性が固まったようです。（その辺りの歴史は以下の YouTube でうかがい知れます）

https://youtu.be/hilznKQij7A?list=PLj6YeMhvp2S6uB23beQaffszlavLq3lNq

##vscode.dev、GitHub Codespaces との違い
###vscode.dev でできること
ローカルマシン、あるいは *GitHub* や Azure DevOps の一部である *Azure Repos* でホストされているソースコードを参照し、ちょっとした変更を加えて Commit するといったことが可能です。インストールは不要です。
https://vscode.dev にアクセスすると、ブラウザ上で動作する "軽量版" の Visual Studio Code (VS Code) エディタが表示されます。ローカルマシンでフォルダを開き、コーディングを始めることができます。

ブラウジングや編集中の検索やシンタックス ハイライト、コードベースでの作業や、よりシンプルな編集を行うための拡張機能サポート（※1）など、VS Code で利用できる機能のうち、かなりのものを利用いただけます (※2)。

また、GitHub や Azure Repos (プレビュー中）などのソース コントロール プロバイダからリポジトリ、フォーク、プルリクエストなどを開くことができるだけでなく、ローカル マシン上に保存されているコードを編集するなどの対応だけでなく、自分のコードのコーディングやデバッグを離れたチームメンバーと共有して開発できる機能 [Live Share](https://visualstudio.microsoft.com/ja/services/live-share/) ももちろん利用いただけます。

> (※1) 拡張機能の実装によって使えないものもあります。
> (※2) Web ブラウザ上で動作が完結するため、デスクトップ版 VS Code と比較して、いくつかの制限事項が存在します。(後述 ["VScode.dev をローカル開発ツールとして使用する際にできること"](https://qiita.com/uikou/items/b5f6a0cd4228c46159dc#vscodedev-%E3%82%92%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A8%E3%81%97%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8)、["拡張機能について"](https://qiita.com/uikou/items/b5f6a0cd4228c46159dc#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6) など参照)

#### 利用可能なブラウザ
Edge や Chrome のような、`File System Access API` を通じてローカルのファイル システムにアクセス可能なブラウザから利用可能です（利用時にアクセス許可をセットする必要があります。後述 [File System API](https://qiita.com/uikou/items/b5f6a0cd4228c46159dc#file-system-api)を参照ください）。

####vscode.dev をローカル開発ツールとして使用する際にできること

* **ローカル ファイルの表示と編集**。Markdown で素早くメモを取り、プレビューすることができます。PC に VS Codeをインストールできない環境であっても、`vscode.dev` ではソースコードのトークン化やシンタックスカラー化、補完、そして多くのシングルファイル操作（ファイルを表示・編集すること）ができます。(※)
    * vscode.dev では、ほとんどのプログラミング言語において、コードの構文の色付け、テキストベースの補完、ブラケットペアの色付けを行うことができます。また、Tree-sitter 構文ツリーを使用することで、C/C++、C#、Java、PHP、Rust、Go などの一般的な言語に対して、アウトライン/シンボルへの移動、シンボル検索などの機能を提供することができます。
    * **TypeScript、JavaScript、Python** は、すべてブラウザ上でネイティブに動作する言語サービスによって実現されています。これらのプログラミング言語では上記基本機能に加えて、シングル ファイル補完機能、セマンティックハイライト、シンタックスエラーなどを利用することができます。
    * **JSON、HTML、CSS、LESS** などは、vscode.dev においても、デスクトップ版 VS Code とほぼ同じ対応が可能です（Markdown プレビューも可能）。
    * * **クライアントサイドの HTML、JavaScript、CSS アプリケーションのデバッグ**。ブラウザのツールと連携してデバッグすることができます。
* **低消費電力マシンでのコード編集**。Chromebook などの環境でコードを編集することができます。
* **iPadでの開発**。ファイル アップロード、ダウンロードや、`Files` アプリを使ってクラウドに保存することもできます。ビルトインされた GitHub Repositories エクステンションを使ってリモートでリポジトリを開いたりすることもできます。また、Web ブラウザが`File System Access API` をサポートしていない場合でも、ブラウザを介してファイルをアップロードしたりダウンロードしたりして、ファイルを開くことができます。
![img](https://code.visualstudio.com/assets/blogs/2021/10/20/local-file-system-unsupported.png)
* **Live Share のゲストセッション** :`https://vscode.dev/liveshare` のように、 URL を通じてブラウザでも利用可能です。sessionId は拡張機能に渡され、シームレスな参加を実現します。
![img](https://code.visualstudio.com/assets/blogs/2021/10/20/join-live-share.png)

> (※) なお現在のファイルの言語サポートレベルは、ステータスバーの言語ステータスインジケーターで確認できます。
![img](https://code.visualstudio.com/assets/docs/editor/vscode-web/status-indicator.png)

###デスクトップ版 VS Code との関係
vscode.dev は、前述の通り、ファイルやリポジトリをナビゲートし、ちょっとしたコードの変更をコミットするためのブラウザ ベースの機能を提供します。しかし、**コンピューティング リソースにアクセスすることができません**。（※後述 [GitHub Codespaces との違い、連携](https://qiita.com/uikou/items/b5f6a0cd4228c46159dc#github-codespaces-%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84%E9%80%A3%E6%90%BA) セクション参照）
そのため、以下のような状況では、デスクトップ版 VS Code や [GitHub Codespaces](https://github.com/features/codespaces) で対応する必要があります。

* コードの実行、ビルド、デバッグのためにランタイムへのアクセスが必要
* ターミナルなどのプラットフォーム機能を使用したい
* ウェブ版環境をサポートしていない拡張機能を使用したい
* ブラウザでは制限されていないフルセットのキーボード ショートカットを使用したい

こうした場合は、以下のような対応をしましょう。

* GitHub Repositories　エクステンションを使い、リポジトリをローカルにクローンする
* `Continue Working on...` コマンドを使う。コマンドパレット（`F1`）から利用できるほか、ステータス バーのリモート インジケータをクリックしても利用できます。

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

プロジェクトのリポジトリには、URLから直接、`https://vscode.dev/SOURCE/ORG/REPO` という形式でアクセスできます。

**■ 例 : VS Code のリポジトリの場合**
https://vscode.dev/github/microsoft/vscode

GitHub と Azure Repos の両方に対応するために、vscode.dev は `vscode.dev/github` と `vscode.dev/azurerepos` の 2 つをサポートしています。

* **GitHub** : `https://vscode.dev/github/organization/repo`
* **Azure Repos** : `https://vscode.dev/azurerepos/organization/project/repo`

https://vscode.dev を既に開いている場合は、GitHub Repositories 拡張コマンドを使って別のリポジトリに移動することもできます。ステータスバーの左下にあるリモート インジケータを選択すると、`Open Remote Repository...` コマンドが表示されます。

![img](https://code.visualstudio.com/assets/docs/editor/vscode-web/remote-repositories.png)

*GitHub Repositories* は、エディター内からリモートでリポジトリを閲覧・編集する機能を提供するコア コンポーネントです。作業内容をクローンするのではなく、GitHub Repositories はリポジトリやプル リクエストにアクセスするための仮想ファイル システムを作成します。従って、ローカル マシンにコードを引き込む必要がなく、すぐに生産的な作業ができるようになります。この拡張機能については、[GitHub Repositories ガイド](https://code.visualstudio.com/docs/editor/github#_github-repositories-extension)で詳しく説明しています。

https://code.visualstudio.com/docs/editor/github#_github-repositories-extension

> 注：[GitHub Repositories エクステンション](https://code.visualstudio.com/docs/editor/github#_github-repositories-extension)は、デスクトップ 版 VS Code でも動作します。リポジトリの閲覧や編集を高速に行うことができます。

デスクトップ版 VS Code と同じように、コマンド パレット(`F1`)から `File` → `New File` から、ウェブ上で新規ファイルを作成することができます。

###Azure Repos (プレビュー)
vscode.dev での Azure Repos サポートは 2021 年 10 月 21 日現在、まだプレビュー版です。今後機能もどんどん拡張されていく予定です。
スキーマ `https://vscode.dev/azurerepos/organization/project/repo` を持つ URL に移動すると、リポジトリ内のファイルを読み込んだり検索したりできるようになります。また、変更点の取得、プルリクエスト、同期、ブランチの表示などももちろん可能です。Azure Repos の URL の前に `vscode.dev` を付けることで、任意のリポジトリ、ブランチ、タグを開くことができます。

> **現在の制限事項*
> Azure Repos サポートは、現在読み取り専用です。コミット、ブランチ、フォーク、プルリクエストなどのアクションは、ソース コントロール ビューとコマンド パレットでは無効になっています。

###"カスタム URL"
デスクトップ版 VS Code と同様、あらゆるバックエンド、言語、サービスをサポートする拡張機能のエコシステムを通じ、vscode.dev をカスタマイズすることができます。デスクトップ版とは異なり、前述の `vscode.dev/github`  や `vscode.dev/azurerepos` のような独自の vscode.dev URL を通じ、プリインストールされた拡張機能でカスタマイズすることが簡単にできます。

####テーマ
vscode.dev では、`https://vscode.dev/theme/extensionId` という URL スキームでカラーテーマを共有・体験することができます。[https://vscode.dev/theme/sdras.night-owl](https://vscode.dev/theme/sdras.night-owl) を開いてみてください。カラーテーマ「Night Owl」を、ダウンロードやインストールのプロセスを経ることなく、体験することができます。

![img](https://code.visualstudio.com/assets/blogs/2021/10/20/night-owl-theme-vscode-dev.png)

> 注：カラーテーマのURLスキームは、完全に宣言型（コードなし）のテーマに対して機能します。

ひとつの拡張機能で複数のテーマを定義することができます。スキーマ `/theme/extensionId/themeName` を使用することができます。`themeName` が指定されていない場合、vscode.dev は最初のテーマを採用します。

テーマ作者として、拡張機能の Readme に以下のバッジを追加することで、ユーザーが vscode.dev で簡単にテーマを試すことができます（<extensionId>をテーマ拡張機能の一意の識別子に置き換えてください）。

![vscode.devでのプレビュー](https://img.shields.io/badge/preview%20in-vscode.dev-blue)

````
[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/theme/<extensionId>)
````
Visual Studio Live Share の仕組みも、このカスタム URL を応用しています。Live Shareのゲストセッションは、sessionId は拡張機能に渡されるので、シームレスに参加することができます。

###拡張機能について
あとは気になるのは、VS Code で使えていた拡張機能がどのくらいつかえるかというところでしょうか。
デスクトップと同様に、あらゆるバックエンド、言語、サービスをサポートする拡張機能の豊富なエコシステムを通じて、vscode.dev をカスタマイズすることができます。デスクトップとは異なり、独自の vscode.dev のURL（後述の `vscode.dev/github` や `vscode.dev/azurerepos` のようなかたち）を通じて、プリインストールされた拡張機能を利用することができます。

たとえば、VS Code で直接ラスターイメージを編集することができる [Luna Paint - Image Editor](https://marketplace.visualstudio.com/items?itemName=Tyriar.luna-paint) などは使えるようです。

![img](https://code.visualstudio.com/assets/blogs/2021/10/20/luna-paint-vscode-dev.png)

GitHub Issues にノートブック機能を追加する [GitHub Issue Notebooks](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-github-issue-notebooks) も利用可能です。これにより、vscode.dev でもクエリ、結果、さらにはクエリの目的を記述したMarkdownを、ひとつのエディタにまとめて保存することができます。

![img](https://code.visualstudio.com/assets/blogs/2021/10/20/github-issue-notebooks-vscode-dev.png)

一方で、OS 固有のモジュールを使用するような拡張機能は利用できません。たとえば、Node.js コードを実行する拡張機能や、ローカルの実行ファイルにシェルアウトする拡張機能などがありますが、こうした拡張機能は、検索結果に表示されますが、利用できない旨表示されます。インストールできない拡張機能には、拡張機能の画面に警告アイコンと「Learn Why」リンクが表示されます。
![img](https://code.visualstudio.com/assets/docs/editor/vscode-web/extension-limit.png)
![img](https://code.visualstudio.com/assets/blogs/2021/10/20/extension-not-available.png)
ブラウザのサンドボックスで実行できない拡張機能が Extension Pack に含まれている場合、Pack に含まれる拡張機能を確認するためのオプションを含む情報メッセージが表示されます。
![img](https://code.visualstudio.com/assets/docs/editor/vscode-web/python-extension-limit.png)

> 注：VS Code の拡張機能を作っている方で、ご自分の拡張機能を vscode.dev でも利用できるようにしたいとお考えの方は[こちら](https://code.visualstudio.com/api/extension-guides/web-extensions)を参照ください。

https://code.visualstudio.com/api/extension-guides/web-extensions

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

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

* **Chrome、Edge、Firefox** : ブラウザの設定で `Site permissions` を検索するか、右のアドレス バーで以下のオプションを探します。

![img](https://code.visualstudio.com/assets/docs/editor/vscode-web/allow-clipboard-access.png)

* **Safari** : [Preferences] > [Websites] > [Pop-up Windows] > `vscode.dev` または、`insiders.vscode.dev` （これはインサイダー版の場合です）を選択し、ドロップダウンから [Allow] を選択します。

####キーバインディングの違い
VS Code のキーバインドは、vsvode.dev 上で動作が異なる場合があります。

Issue |動作が違う理由
---|---
Firefox で `Ctrl+Shift+P` を押してもコマンド パレットが起動しない|Firefox では、`Ctrl+Shift+P` は予約されています。回避策 : `F1` キーでコマンドパレットを起動してください。
`Ctrl+N` で新規ファイルを作成する機能が動作しない|`Ctrl+N` では新しいウィンドウが開きます。
`Ctrl+W` でエディタを閉じる機能がWeb上で動作しない|ブラウザでは、`Ctrl+W` は現在のタブを閉じる動作になります。
`Ctrl+Shift+B` で、ブラウザのお気に入りバーが切り替わらない|vscode.dev では、コマンドパレットの「ビルド」メニューにリダイレクトするように設定されています。

###安全な実行環境
vscode.dev は Web ブラウザのサンドボックス内で実行されます。リモート リポジトリからコードにアクセスする場合、ウェブ エディタはリポジトリを「クローン」するのではなく、ブラウザから直接サービスの API を呼び出してコードを読み込みます。ローカルファイルを扱う場合は、ブラウザのファイル システム アクセスの API を介して読み込みますが、この動作はブラウザがアクセスできる範囲に制限されます。

###作業内容の保存と共有
ウェブ上のローカル ファイルで作業しているとき、自動保存を有効にしていれば、作業内容は自動的に保存されます。デスクトップの VS Code で作業するときのように、手動で保存することもできます (例: [File] > [Save])。

リモートリポジトリでの作業では、コミットするまで作業内容がブラウザのローカル ストレージに保存されます。GitHub Repositories を使ってリポジトリやプルリクエストを開いた場合は、Source Control ビューで変更をプッシュして、新しい作業を継続させることができます。

###GitHub Codespaces との違い、連携
ここだけだと、先日リリースされた GitHub Codespaces と何が違うのかよくわからんという方もいらっしゃるのではないでしょうか。

※参考 : GitHub Codespaces についてのまとめ

https://qiita.com/uikou/items/1feb83865f9d638807ad

大きな違いは前述の通り、**コンピューティング リソースにアクセスできない**ということです。
vscode.dev は Web ブラウザ内で動作するものですので、デスクトップにインストールしたアプリケーションでできることと比較すると、いくばくかの制限はあります。
アプリケーションをビルド、実行、またはデバッグしたりすることはできません。コードのビルドとデバッグ、すべての VS Code 拡張機能の使用、統合されたものへのアクセスなど、より完全な VS Code の機能を活用する必要がある場合は、Web 用の VSCode から GitHubCodespaces インスタンスにサインインして使っていただくことも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1529732/6bfc615f-3bd4-eb61-b516-47d19f37e4ad.png)
`Sign in with GitHub to use GitHub Codespaces` を選択すると、リダイレクトされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1529732/ca6a401b-9564-4eac-3aa0-0a9f70b5f3cc.png)
GitHub にログインすると、Permission について問われますので、`Authorize github` ボタンを押すと、GitHub にログインすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1529732/e3b354d5-d339-6719-8989-44dd60842e60.png)
まぁ、[github.dev](https://github.dev/github/dev) みたいなもんですね。
それぞれ並べてみました。(※左 : VScode.dev / 右 : GitHub.dev。GitHub Codespaces と連携済み)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1529732/372c0a15-bbd0-1c3d-0d82-4c277fcb499c.png)

テーマ、キーマップ、スニペットなど、ほとんどの UI カスタマイズ拡張機能は vscode.dev で動作し、`Settings Sync` を通じてブラウザ、デスクトップ、GitHub Codespaces 間のローミングを有効にすることが可能です。

####github.dev との違いのまとめ
このように似ているけれど、やっぱりちがう vscode.dev と github.dev。この違いをまとめてみましょう。

* **github.dev** : GitHub と高度に統合された、ウェブ用にカスタマイズされた VS Code のインスタンスです。ログインは自動的に行われ、URL フォーマットは `github.com` の `/organization/repo` モデルに従っているので、`.com` を `.dev` に変更するだけでリポジトリを編集することが可能です。さらに、ライトテーマとダークテーマで GitHub 用にカスタマイズされています。
* **VS Code for the Web (vscode.dev)** : GitHub 上のリポジトリに*加えて、Azure Repos（Azure DevOpsの一部）もサポート**しています。（`vscode.dev/github` と `vscode.dev/azurerepos` の 2 つのルートをサポートしているということ）

> 注 : ちなみに、この二つの使いわけ、URL の頭に「vscode.dev」を置くことでできるようです。
> 例えば、
> * GitHub の場合 : `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 を利用していない場合
追加のリポジトリ ホスティングサービスのサポートは、デスクトップと同様に拡張機能で提供できます。それらの拡張機能は、上述のように、ブラウザでの完全な実行をサポートする必要があります。

####GitHub
VS Code の多くの拡張機能は、GitHub に保存されているソースコードを扱うことができます。例えば、[CodeTour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) 拡張機能では、コードベースのガイド付きウォークスルーを作成することができますし、[WikiLens](https://marketplace.visualstudio.com/items?itemName=lostintangent.wikilens) 拡張機能では、VS Code とリポジトリを強力なメモ ツールに変えることができます（しかも、双方向リンク付きです）。
では、vscode.dev はどうでしょうか。vscode.dev では、GitHub リポジトリ、Codespaces、Pull Request エクステンションが組み込まれており、GitHub 上にある自分のコードに簡単にアクセスすることができます。
また、コミットをマージする前に変更内容をビルド、実行、テストするなどの場合は、ローカルのクローンやGitHub Codespace で対応することができます。

![img](https://code.visualstudio.com/assets/blogs/2021/10/20/continue-on-dropdown.png)

#VScode January 2022 Update でのアップデート（2022.02.08 Update)

https://code.visualstudio.com/updates/v1_64

##GitHub リポジトリ関連のアップデート
vscode.dev で作成された Commit は、GitHub UI で署名され、Verifed としてマークされるようになりました。また、[GitHub GraphQL createCommitOnBranch API](https://github.blog/changelog/2021-09-13-a-simpler-api-for-authoring-commits/) によって、vscode.dev 使用時、メンテナはフォークから送信された Pull request に Commit できるようになりました。

https://github.blog/changelog/2021-09-13-a-simpler-api-for-authoring-commits/

![img](https://code.visualstudio.com/assets/updates/1_64/github-commit-signing-prs.gif)

また、"Source Control" ビューが複数選択に対応しました。

![img](https://code.visualstudio.com/assets/updates/1_64/remotehub-scm-multiple-selection.gif)

これまでは、empty Commit の作成は、GitHub リポジトリをローカルまたはリモートマシン上に Clone した場合のみサポートされていましたが、vscode.dev でも ` GitHub Repositories: Commit Empty ` コマンドによって、Empty Commit を作成することができるようになりました。

また、リポジトリ全体のテキスト サーチや `Go to reference` といった高度な機能を実現するために、一定のサイズ以下のリポジトリの全てのコンテンツを自動的にダウンロードするための新設定も追加しました。設定 `remoteHub.experimental.fs.maxAutoDownloadSize` は、全コンテンツをダウンロードしようとした際にプロンプトが表示されるまでのリポジトリのサイズ制限を制御します。既定では、`maxAutoDownloadSize` は設定されていないため、プロンプトが表示されずにダウンロードすることはありません。

##プレリリース版エクステンションを採用
`GitHub Pull Request and Issues` と `GitHub Repositories` 機能拡張の両方のプレリリース版がバンドルされるようになりました。

##PWA とオフラインのサポート
vscode.dev は、PWA モデルを採用し、ホスト OS 上の PWA としてインストールできるようになりました。これにより、いくつかのオフライン機能を有効にすることもできるようになりました。かつて [vscode.dev](https://vscode.dev/) や [insiders.vscode.dev](https://insiders.vscode.dev/) にアクセスしたことのあるユーザーは、オフラインでもローカル ファイルの編集に利用できるようになりました。

![img](https://code.visualstudio.com/assets/updates/1_64/pwa.png)

#vscode.dev の日本語入力がおかしくなる件 → Fix されました  (2022.02.18 Update)
後輩君が日本語入力のバグを issue 登録したら、一週間くらいで Close になったそうです。次回の Insider Build で反映されるようです。

https://github.com/microsoft/vscode/issues/142515

#参考情報
https://azure.microsoft.com/en-us/updates/public-preview-visual-studio-code-for-the-web-2/

https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

https://code.visualstudio.com/docs/editor/vscode-web#_themes

それではみなさん、ごきげんよう。