Visual Studio Onlineで、ブラウザ上からVS Codeを使う【Public Preview】

2019年11月4日(米国時間)、Microsoft Ignite 2019にて**Visual Studio Online**がパブリックプレビューになりました。
[Announcing Visual Studio Online Public Preview \| Visual Studio Blog](https://devblogs.microsoft.com/visualstudio/announcing-visual-studio-online-public-preview/)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Just announced! Including a browser-based editor that’s powered by <a href="https://twitter.com/code?ref_src=twsrc%5Etfw">@code</a>. <a href="https://t.co/5OvvEbKCXK">https://t.co/5OvvEbKCXK</a></p>&mdash; Visual Studio Code (@code) <a href="https://twitter.com/code/status/1191386139455819776?ref_src=twsrc%5Etfw">November 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

つまりこのように、ブラウザ上でVS Codeを使って開発をすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/ff738d07-430d-cb52-a8a2-aeafd09ed0a8.png)
コード内容もエディタ設定もすべてクラウドに保存されるので、どんな環境でも作業を再開することができます。

本稿ではエディタのVisual Studio Code(以下"ローカル版VS Code")がWebブラウザ上で動作する環境である**Visual Studio Online(以下VS Online)**を取り扱います。(MicrosoftにはこのVS Onlineと類似していたり同名だったりするサービスが複数あって少々ややこしいのですが...)

また、VS Onlineにはサーバとしてクラウド版とセルフホスト版が、クライアントとしてWebブラウザかローカル版VS Codeを使うか、それぞれ選べるようです。本稿ではブラウザ上から使うというコンセプトのため、以下クラウド版+Webブラウザ版を前提として話を進めていきます。

なお本稿も、一部このVS Onlineを使って書いています。

## 環境
- Windows 10 Pro 1809
- Chrome OS 77

たぶんMacでも一緒です

## 利用方法
[How to use Visual Studio Online with a browser](https://docs.microsoft.com/en-us/visualstudio/online/how-to/browser)に沿って用意していきます。

VS Onlineを利用するには、「Microsoftアカウント」と「Azureサブスクリプション(課金設定)」が必要です。もしAzureのサブスクリプションを持っていない場合、新規作成すると最初1ヶ月は一定量の無料枠がついてくると思います。

VS Onlineを利用するには、下記から「Plan」と「Environment」を作成していきます。
[Visual Studio Online \- Web ベースの IDE と共同コード エディター](https://visualstudio.microsoft.com/ja/services/visual-studio-online/)

Planが課金の設定で、Environmentがエディタ+仮想マシンの設定です。
Planは基本的にひとつ作れば良さそうですが、Environmentは用途に応じて複数作成することになりそうです。

### Planの作成
サブスクリプションとリージョンを選択します。
リージョンは2019年11月4日現在下記から選択できます。特に理由がなければ、日本であれば**Southeast Asia**を選択すればいいと思います。

- East US
- Southeast Asia
- West Europe
- West US 2

### Environmentの作成
下記を設定します。

- Git Repository
    - 指定すると、自動でCloneするようです。
- Put environment to sleep after
    - 指定した時間をすぎるとサスペンドします。
    - (おそらく起動している間だけ課金されるので、不必要な課金を避けたければ適当なタイミングでサスペンドするようにしておいたほうが良いと思います)
- Instance type
    - Standard (4 コア、8 GB RAM)か、Premium (8 コア、16 GB RAM)かを選択できます。どちらもストレージは64 GBのようです。
    - つよいマシンのほうが値段も高いです。

以上の設定をすると完成です。
しばらく待つと、見慣れたVS Codeの画面がブラウザ上で表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/bd609ea7-2623-4217-0722-a4d1e6d9b060.png)

## VS Codeとしての機能を使ってみる
### 拡張機能の利用
普通にローカル版VS Codeと同じ拡張機能がほぼ利用できるようです。
そもそも最初から4つの拡張機能がインストールされています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/9c7c048a-c959-b874-50f7-d2e996c3e803.png)
Azure、LiveShare、IntelliCodeは今までもよく使っていますが、「VisualStudio Online」という見慣れない拡張機能があります。

### ユーザー設定の利用
フォントの設定など多くをローカル版VS Codeから引き継ぐことができました。ローカルにダウンロードしてあるフォントであれば普通に有効になるようです。地味に素晴らしいです。

なお私がローカル版VS Codeで使っている下記設定をそのまま使って試しました。
https://github.com/s2terminal/visualstudiocode-usersetting/blob/master/User/settings.json

### Terminalの利用
VS Onlineでは最初からTerminalで**Bash**が利用可能です。
環境はDebianのようです。

```bash
vsonline:~/workspace$ cat /etc/os-release  | grep NAME
PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
NAME="Debian GNU/Linux"
VERSION_CODENAME=stretch
```
あまりDebianは詳しくないのですが、例えば`less`が入っていないなど最低限の環境のようです。普通に`sudo apt install`は実行できました。

```bash
vsonline:~/workspace$ sudo apt install less
```
nodeが入っているので、例えばここから`$ npm install ts-node`してTypeScriptを実行したりできました。

## VS Onlineの値段は？
[Visual Studio Online の価格](https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-online/)を見てください。

ちょっとややこしいのですが、基本的には、VS Onlineを起動していた時間に対する従量課金のようです。例として環境の有効時間が730時間(丸1ヶ月)で、うちアクティブ時間が100時間(5時間×20営業日程度)で**約5,628円**とあり、一般的な開発にフルで使った場合はだいたいこれくらいになるのではないかと思います。

### 自動サスペンドによる節約と懸念点
(※このセクションには未確認の情報を含みます)

VS Onlineには作成時に設定したようにAuto Suspendの設定があります。この設定によってたとえば「5分間使用していない時はSuspendになって料金を節約する」という事ができるようです。

しかしSuspendに入る条件が不明瞭で、かつSuspendとは別で「接続・切断」という概念があるようです。Auto Suspendの時間を過ぎても**VS Onlineのタブを開いている間は接続したままでSuspendもしなかった**ため、もしかしたらタブを開きっぱなしだとVS Onlineを使っていなくても課金し続けられるかもしれません。**利用しない場合はタブを閉じるか[手動でSuspend](https://docs.microsoft.com/en-us/visualstudio/online/how-to/browser#suspend-an-environment)する**癖をつけたほうが良さそうです。SuspendやDisconnectについては[VS Onlineの環境一覧ページ](https://online.visualstudio.com/environments)かVS Onlineのコマンドパレットから手動実行することができます(おそらく拡張機能の追加コマンドです)。

この「有効時間」「アクティブ時間」「サスペンド」「接続」あたりの定義がはっきりしないので、ノウハウが出揃うまでの間は料金面について慎重に確認しながら使ったほうが良いと思います。

## Tips
- 表示言語の変更はできず英語のみのようです。
    - `ext install MS-CEINTL.vscode-language-pack-ja`で日本語のLanguage Packはインストールできるのですが、切り替えるための`>Configure Display Language`コマンドが出てきませんでした。
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/d812f00d-bcbc-a57c-70c9-410ad16e4617.png)
    - 参考: ローカル版VS Codeでは下記のようなコマンドを使って言語を切り替えられます。
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/663e7e6e-3996-1ca8-9366-235e2d4284c0.png)
- ショートカットキーがブラウザと衝突することがあります
    - VS Codeの命とも言うべき**コマンドパレットの呼び出し**のショートカットキーが、**「印刷」と衝突する**のが致命的です。
        - どうやらファイル編集中はVS Codeの「コマンドパレット呼び出し」が優先され、そうでない場合(拡張機能画面など)では「印刷」が優先されるようです。
- コマンドパレット自体は利用可能です。
    - コマンドパレットさえ呼び出すことができれば、衝突を気にすることはありません。
    - カラーテーマの変更もできます。
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/31bb8d8c-26a0-4f6e-d845-1810d532b6dd.png)

## 参考
- [VSCode で覚えるべき、たったひとつのショートカットキー \- Qiita](https://qiita.com/suzuki_sh/items/248a254788c599a0dc32)
- [Azure Cloud Shellで、ブラウザ上からVSCodeを使う \- Qiita](https://qiita.com/suzuki_sh/items/026522bc64072e6d1ebd)
- [VSCode公式の機能で、リモートサーバにSSHして編集する【Insiders Preview】 \- Qiita](https://qiita.com/suzuki_sh/items/245b9817536eba808842)