WSL2 + VS Code Remote Development がいい感じだった

前回の記事で WSL2 を雑にお試ししましたが、今回は VS Code の Remote Development と組み合わせて使ってみます。

hanocha.hateblo.jp

VS Code の Remote Development の公式ドキュメントはこちら。

code.visualstudio.com

雑に言うと「VM や WSL 環境上の Linux 上にあるファイルをローカルにあるのと同じように VS Code 上で閲覧・編集できる機能」です。 普通のVM + SSH や Docker でも利用可能みたいですがそちらは試してないのでなんとも。

もしかしたら VM で動かしたほうが早かったり…いや、さすがにそんなことはないか…

とりあえず VS Code に Remote Development 拡張を入れてみる

WSL の導入は済んでいる前提で行きます。

導入と言ってもそんなにややこしいことは特になくて、通常の拡張機能を追加するときと同じように EXTENSIONS から Remote Development 拡張を入れるだけ。簡単ですね。

とりあえず使ってみる

拡張を入れたら実際に使ってみましょう。

WSL 環境を立ち上げて、「編集したいファイルの存在しているフォルダ」、例えば Rails プロジェクトのルートディレクトリとか…に移動します。 移動した先で以下のコマンドを実行します。

$ code .

たったこれだけ。 Remote Development に必要なコンポーネント類が足りない場合は自動的にインストール処理が走り、 VS Code が起動します。

起動するとファイルツリーにちゃんと WSL 環境上にあるファイルやディレクトリが表示されているはず。 このままファイルを開いて、編集して、保存まで、 WSL 環境に居ることを意識せずに操作が可能です。素晴らしいですね。

Git 周りについて

Git 操作も基本的にはローカルの場合とほぼ変わらずできます…が、 Git は Windows 環境上にも導入されている必要があるようです。 エディタ上で Git 操作をした時に使われる Git は Windows 側のもの…っぽい…？ちょっとどういう仕組みになってるのか把握できてないですが…

このあたり を見ると「Windows 側の Git の改行周りの設定しといてね」って書いてあるので、おそらく Windows 側の Git をつかってるんだと思います。たぶん。

あと、ファイルの変更に対する反応が若干鈍いと言うか、ローカルのファイルを編集した時ほど機敏に反応は（今の所）してくれないので、ちまちま差分がないかリロードボタンを押すようにしたほうが良さそうです。

統合ターミナル周りについて

VS Code の便利な機能の一つ「統合ターミナル」ですが、 Remote Development を使うと統合ターミナルで使われるシェルが WSL （Remote Development 接続先？）のものになり、これまたローカルで普通に開発しているのと同じ感覚で使うことができて便利です。最高。

Windows Terminal のプレビュー版が出たりもしてますが、個人的にはこっちの統合ターミナルだけでだいたい事足りそうな予感はしています。 そもそも用途が違うものなので一緒くたにするのもアレですが。

拡張機能について

Remote Development の目玉機能の一つに「VS Code の拡張機能の実行をリモート側に委譲できる」というものがあります。 例えば Windows 環境上に node を入れなくても Prettier をリモート側で実行したり、とか。

この機能の都合で、 Remote Development を有効にした状態だと、拡張機能のインストール先が「リモート側」と「Windows側」の2つに分かれます。 前述の Prettier などは「リモート側」に入れたい拡張になりますね。

この辺、どの拡張をどちらに入れるべきかは VS Code が判定してくれて、例えば UI 周りの拡張は Windows 側に、そうでないものはリモート側に、という感じで振り分けてくれます。

のですが、一部自前でインストール先を切り替えてやる必要が出てくることもあります。例えば Ruby 拡張なんかはシンタックスハイライトのために入れたくなるのですが、 Linter の類を使うのでなければ、別に Ruby の実行環境が必要なわけではないので、これは Windows 側に入れたくなります。 （もしかしたら WSL 側に入れたほうがいいのかもしれないですが…）

拡張機能の導入先は、以下のような設定を記述してやることでどこに入れるかを拡張単位で制御することができます。

{
    "remote.extensionKind": {
        "rebornix.ruby": "ui"
    }
}

remote.extensionKind というオプションに対して、インストール先を制御したい拡張機能とその導入先を列挙することで制御できます。 拡張機能の識別子をキーに、インストール先を値として渡してやるような形です。

ちなみに拡張機能の識別子は、拡張機能の詳細画面のトップ、拡張機能名の右に書いてあります。最初全然気付かずにしばらく彷徨ってしまった。

その他

WSL 環境につないだ状態で VS Code を閉じ、再度 VS Code を起動すると、先程 $ code . して起動したのと同じように WSL と接続されます。 また、前回の作業状態もローカルのときと同じように復元されます。超便利。

まとめ

WSL 2 はまだプレビュー版、 Remote Development も正式版が出て間もない機能ですが、現時点でかなり快適に開発ができるようになってきているので、ぜひ試してみるといいと思います！

今後も継続的に更新のチェックなどをしていきたいと思っているので、お楽しみに。