みなさん，Chromebook使ってますか？
僕はちょうど昨日から使い始めてるんですが，とても満足しています😁
ただ，VSCodeがちょっと重くて...
ということでめちゃくちゃ軽くする方法を考案してみました．
え？デベロッパーモードでごにょごにょやる？そんな複雑なことは一切致しませんよ！ちゃんと公式のLinux環境(Crostini)で動きます．
最終的にはこんなかんじにPWAになります！
結論
以下のことをするだけです．
- 何らかの方法でVSCodeをホストする
- Chromeで開く
これだけです．Chromeが超快適に動く環境なんだから，VSCodeもChrome上で動かせば超快適なんじゃね？という発想です．
手段
最近現れたGitHub Codespaces(旧Visual Studio Codespaces)という公式のツールを使った方法や，VSCodeの最新ソースでyarn webを実行するといった方法がありますが，サブスクリプションが必要だったり手順が複雑だったりするので，今回はcode-serverという比較的簡単にホストできるツールを使うことにしました．
メリット
こんないいことがありました
- とにかく軽い！！！！！！！！！
- 本家VSCodeだとタッチパネルから操作するとスクロールできなかったけど，こっちだとできる！！
- なんかタイトルバーまでダークテーマに準じててかっこいい！！
- LinuxのMozcとかに依存しない日本語！！(Chrome OSの方の入力メソッドが使えます)
- 何よりもとにかく軽い！！！！！！！
デメリット
- 公式のVSCodeじゃないから使えない拡張機能がある...
- 今までのVSCodeの設定を引き継げない...1
- てかそもそも公式のVSCodeじゃないこと自体がデメリット...
実際にやってみる
やってみましょう
Linux環境をインストールする
Chrome OSにLinux環境をまだインストールしていない場合はここで準備しておきましょう．設定→Linux(ベータ版)からオンにするだけです．OSが最新でない場合は先に最新にしておくことをおすすめします2．
(ここで本来であればVSCodeのために日本語のセットアップをするのですが，今回はあくまでもChrome上で動かすためしなくてもOKです)
code-serverをインストール
先に後で使うためのツールをインストールしておきます3．
$ sudo apt install screen
次にcdr/code-serverのREADME.mdに載っているコマンドを実行します．たったこれだけ．
$ curl -fsSL https://code-server.dev/install.sh | sh
実行 / 動作チェック
起動は以下．
$ screen -S codeServer code-server
起動したらCtrl + A，次にDでもとの画面へ戻れます．
もし停止したい場合には以下．
$ screen -r codeServer
でアクセスした後にCtrl + C．
デフォルトではlocalhost:8080でホストしていると思うので，アクセスしてみます．
初回ではパスワードを要求されます．~/.config/code-server/config.yamlに載っているそうなので確認してみましょう．
$ cat ~/.config/code-server/config.yaml
↓結果
bind-addr: 127.0.0.1:8080
auth: password
password: xxx
cert: false
pasword: xxxのxxxがパスワードです．もしこの認証方法に不安があれば後で変えておきましょう．
こんな感じに出てくればOK．最低限は完了しました．
もっと使いやすくする
上の方法でも十分ですが，毎回code-server実行したりlocalhost:8080を入力する必要があります．もっといろいろ便利にしたいですよね？ということでいくつか．
- アプリ一覧に追加する / アプリっぽく表示する(PWA化)
- VSCode本家のアイコンにする(
manifest.json編集) - ホスト鯖の起動を自動化
- カスタムフォント(firacode, powerline)の適用(別記事)
アプリ一覧に追加する / アプリっぽく表示する(PWA化)
といっても実はもとからPWAに対応しているのでクリックするだけです．うれしいね😁
ただしVSCode本家のアイコンにする場合はここでインストールを実行しないでください(仮にしちゃってもそこまで問題ではない．対処法は後述)．
いい感じの見た目になってくれます．
VSCode本家のアイコンにする(manifest.json編集)
code-serverさんのアイコンも素敵ですが，せっかくなら本家VSCodeのアイコンと名前を使いたいですよね？ということでmanifest.jsonをいじって変えてみましょう．
manifest.jsonは/usr/lib/code-server/src/browser/mediaにあります．
(ついでにバックアップも取ります)
$ cd /usr/lib/code-server/src/browser/media
$ sudo cp manifest.json manifest.json.old
次にVSCodeのアイコンを探してきます．直リンがある場合は以下のコマンドが便利です．このときファイルはPNGのものを選んでください4．ダウンロードしたらvscode.pngに名前を変えます．
以下はvscode.pngとしてファイルをダウンロードするコマンド．
$ sudo wget -O vscode.png {アイコンのリンク.png}
manifest.jsonを編集します．僕が作ったやつはこれです．
{
"name": "Visual Studio Code Lite",
"short_name": "VSCode Lite",
"start_url": "{{BASE}}",
"display": "fullscreen",
"background-color": "#fff",
"description": "Start VSCode on a remote server.",
"icons": [
{
"src": "{{CS_STATIC_BASE}}/src/browser/media/vscode.png",
"type": "image/svg+xml",
"sizes": "48x48 72x72 96x96 128x128 256x256 512x512 1024x1024"
}
]
}
GitHub Gistはこちら
自分で作るのが面倒であれば僕のファイルを直接落としてください．
$ sudo wget -O manifest.json https://gist.github.com/BonyChops/45ec811fc48d173548c2171d7508147b/raw/
これで完了です．localhost:8080を開いて確かめてみましょう．code-serverを再起動する必要はありません．
このとき，すでにインストールを行ってしまった場合は，一度code-serverを**アプリ一覧から5**アンインストールし，Ctrl + Shift + Rです．
変更が反映されない！！
もしまだこのように変更が反映されていなければ，一度Chromeのキャッシュを更新してあげる必要があります．
Ctrl + Shift + I，または，右上の三点リーダー(︙)→その他のツール→デベロッパーツールより，manifest.jsonを探します．
見つけたらリンクを右クリックしてOpen in new tab．そして出てきたタブで再読み込みをすると変更が反映されると思います(されなかったらmanifest.jsonが本当に変更できていません！やりなおしてください...)．
ホスト鯖の起動を自動化
当然ですが，鯖を起動していない状態でVSCodeを起動するとこうなります．
ということでこれをsystemdのサービスとして登録して，自動で起動するようにしてみましょう．以下の2つのファイルを作成してください．要rootです．
#!/bin/bash
code-server --bind-addr localhost:8080
[Unit]
Description = codeserver daemon
[Service]
ExecStart = /opt/codeserver.sh
Restart = always
Type = simple
User=your_username
Group=your_username
[Install]
WantedBy = multi-user.target
User=your_usernameとUser=your_usernameのyour_usernameは，Linuxでのユーザー名ですが，もしrootとして鯖を起動させたい場合はその2行ごと消してください．
あとは，以下のコマンドで起動時に実行するサービスに登録 & 実行．
$ sudo systemctl enable codeserver
$ sudo systemctl start codeserver
これでいつでもVSCodeが開けます！
ただ，Linuxコンテナが起動していないと使えないので，最初使うときだけターミナルを開いて起動してください．