code-server on WSL(VS Code) を起動し、Chrome アプリケーションモードで利用！

WSL 上で code-server が起動できるようになったため手順を整理します。
code-server on WSL により Windows 上に Linux をベースとした VS Code 開発環境が構築できます。

2019-05-03 追記

もうこの記事の内容は、意味がないかもしれません。。
本家 VS Code の方が、WSL をベースとして開発をサポートしたためです。
以下のリンクを参照して頂けると良いと思います。

• https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl
• https://code.visualstudio.com/blogs/2019/05/02/remote-development
• https://code.visualstudio.com/api/advanced-topics/remote-extensions

モチベーション

本番では Linux で動かすアプリケーションを、ローカルでは Windows や macOS 上で開発している。
アプリケーションのランタイムが、OS の差分を上手く吸収してくれるため、多くの場合問題にならない。
でもたまに、 Linux 上ではビルドが通らなかったり、挙動が違うことがある。
そんな不安をなくすため、 与えられた Windows を使いながらも Linux をベースとした開発環境を構築できないかというのがモチベーションです。

WSLに code-server をインストール & 起動

WSL の Ubuntu 等を起動後、以下のコマンドを実行します。
リリースページを確認し、最新のバージョンで読み替えてください。

$ cd
$ mkdir -p apps
$ cd $_
$ wget https://github.com/codercom/code-server/releases/download/1.939-vsc1.33.1/code-server1.939-vsc1.33.1-linux-x64.tar.gz
$ tar xvf code-server1.939-vsc1.33.1-linux-x64.tar.gz
$ cd code-server1.939-vsc1.33.1-linux-x64
$ ./code-server --allow-http --no-auth

ショートカットアイコンの作成

ショートカットアイコンを作成し、クライアントを簡単に起動できるようにします。

1. デスクトップで右クリック -> 「新規作成(X)」 -> 「ショットカット(S)」 でダイアログを開く。
2. 「項目の場所を入力して下さい(T:)」 に "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=http://localhost:8443/ を入力し「次へ」ボタンをクリックする（chrome.exe へのパスは適切なもの変更してください）。
3. 「このショートカットの名前を入力してください(T:)」に code-client と入力し「完了」ボタンをクリックする。
4. ショートカットアイコンの code-client をダブルクリックする。

アプリケーションモードで起動するため、ブラウザのショートカットが無効になりショートカットの競合を避けることができます。

最小化・最大化・閉じるのコントロールが二重に表示され変な感じではあります。

PWA としてインストール(2019-04-19追記)

バージョンアップにより、PWAとしてインストールできるようになったみたいです。
Google Chrome の設定 -> 「Coder」をインストール...
でインストール可能です。
しかしながら、アドレスバーが表示されたり(localhostだからかな？) 逆に使いにくいかもしれません。

フォントの設定

terminal のフォントが微妙なので変更します。

ctrl + , で User Settings を開きます。

Editor のフォント変更

「Text Editor」 -> 「Font」 -> 「Font Family」 と開き、 Consolas, 'Courier New', monospace を入力。

Terminal のフォント変更

「Features」 -> 「Terminal」 -> 「Font Family」 と開き、 Consolas, 'Courier New', monospace を入力。

以下のような感じになります。

WSL 上の code-server のアンインストール

$ rm -rf ~/apps/code-server1.868-vsc1.33.1-linux-x64 ~/.local/share/code-server

その他メモ

• Webフロンエンドの開発は、この構成でいけそう。
• Vim extension は動くがクリップボードの扱いに難がありそう。
• markdown の preview は現状できないみたい。 (できるようになりました)
• 「Open Recent」に履歴が残らない。
• Java Extension Pack をインストールしてみたが、一括での複数 Extension のインストールが実行されない感じ。
• Java Language Server がクラッシュする。
• Marketplace の検索でヒットしない Extension もある。VS Code で利用できるものがすべて利用できるわけではない。
• キーボードショートカットの設定は、カスタマイズした方が良さそう（特に Vim extension を使う場合）。

おわりに

未来を感じた。