Visual Studio CodeとWSLで開発する

ここ数回、Visual Studio CodeやWindows TerminalといったWindowsで動作するアプリケーションを取り上げてきた。今回もその流れで、Visual Studio CodeとWSLを組み合わせて開発を行う場合のポイントを紹介しよう。

Visual Studio CodeとWSLを組み合わせて、Windows 10でLinuxアプリケーションの開発を行うというスタイルが普及し始めている。これを受けてか、最近はVisual Studio Code + WSLで開発を行うためのドキュメントの公開が続いている。最近では2019年8月14日(米国時間)に公開された次のドキュメントを紹介しておきたい。

このドキュメントは、Visual Studio CodeとWSLを使ってLinuxアプリケーション開発を行う際に必要になってくるティップスが紹介されている。Visual Studio CodeとWSLを組み合わせて開発する際、1つ注意する必要があるのは、「Windows側」で実行されているのか、「Linux側」で実行されているのかを把握しておくことだ。

上記のドキュメントはその辺りをわかりやすく解説している。また、利用するLinuxディストリビューションを切り替える方法も紹介されている。Visual Studio CodeとWSLを組み合わせた開発を行う場合には押さえておきたい内容だ。

Remote - WSLエクステンション

Visual Studio CodeでWSLを利用した開発を行うということは、Visual Studio CodeがWSLにアクセスしてLinux上でコマンドを実行する必要がある。それを行うための機能を提供するのが、Microsoftが開発を行っている「Remote - WSL」エクステンションだ。

  • Visual Studio Code: Remote - WSLエクステンション

    Visual Studio Code: Remote - WSLエクステンション

「Remote - WSL」エクステンションをインストールしていない場合は、インストールを行う。エクステンションを「wsl」で検索すれば対象のエクステンションはすぐに見つけられる。作業を開始するためにインストールを済ませておこう。

複数のLinuxディストリビューションを切り替えて使う方法

Windows 10に導入されたLinuxバイナリを実行する機能「WSL」は、同時に複数のLinuxディストリビューションを実行することができる。たとえば次のスクリーンショットは対象となるWindows 10にUbuntu 16.04 LTSとUbuntu 18.04 LTSの双方がインストールされていることを意味している。

  • Ubuntu 16.04 LTSとUbuntu 18.04 LTSがインストールされたWindows 10

    Ubuntu 16.04 LTSとUbuntu 18.04 LTSがインストールされたWindows 10

Visual Studio Codeもこうした状況に対応しており、利用するLinuxディストリビューションの切り替えができるようになっている。

使用するLinuxディストリビューションを切り替えるには、F1キーを押してコマンドパレットを表示させ「distro」と入力し、「Remote-WSL: New Window using Distro...」を表示させてから、これを選択する。

  • コマンドパレットから「Remote-WSL: New Window using Distro...」を選択

    コマンドパレットから「Remote-WSL: New Window using Distro...」を選択

「Remote-WSL: New Window using Distro...」を選択すると、次のようにWindows 10にインストールされているLinuxディストリビューションが表示される。ここで、利用するLinuxディストリビューションを切り替えることができる。

  • 利用するLinuxディストリビューションの切り替え

    利用するLinuxディストリビューションの切り替え

Visual Studio Codeでは複数のLinuxディストリビューションを同時に利用することもできる。簡単な方法はコマンドパレットから「Remote-WSL: New Windows using Distro...」を選択して、利用するLinuxディストリビューションを選択して新しくVisual Studio Codeのウィンドウを開くことだ。「Remote-WSL: New Window」を選択して新規ウィンドウを開いてから、先ほどと同じ要領で利用するLinuxディストリビューションを切り替えてもよい。

  • Linuxディストリビューションを指定してVisual Studio Codeの新しいウィンドウを開く

    Linuxディストリビューションを指定してVisual Studio Codeの新しいウィンドウを開く

次のスクリーンショットは、Visual Studio Codeのウィンドウを2つ開き、それぞれで異なるLinuxディストリビューションを使用している状態を示している。

  • 同時に複数のLinuxディストリビューションを使っているサンプル

    同時に複数のLinuxディストリビューションを使っているサンプル

この方法を使うと、同時に複数のLinuxディストリビューションを使用した開発が可能になる。異なるディストリビューションで動作する必要があるアプリケーションを開発する場合など、この方法を使うことで簡単に済む。

WindowsとLinuxのワークスペース切り替え

「Remote - WSL」エクステンションが機能している間、ワークスペースはLinux側が基本となる。例えば、　次のスクリーンショットはUbuntu 16.04 LTSに接続しているVisual Studio Codeだが、開いたフォルダがWindows側ではなくUbuntu側になっている点に注目したい。

  • Remote - WSLエクステンションが動作している間はLinuxのファイルシステム側が基本領域として開かれる

    Remote - WSLエクステンションが動作している間はLinuxのファイルシステム側が基本領域として開かれる

作業によってはWindows側のファイルを開くこともある。直接パスを入力してWindows側を指定してもよいが、次のようにWSLへのリモート接続を切ることでも同じことができる。接続を切るにはコマンドパレットから「Close Remote Connection」を選択すればよい。

  • コマンドパレットから「Close Remote Connection」を選択

    コマンドパレットから「Close Remote Connection」を選択

コマンドパレットから「Close Remote Connection」を選択すると、次のように開く対象がWindows側に戻ってくる。

  • 接続を切るとベースはWindows側に戻ってくる

    接続を切るとベースはWindows側に戻ってくる

Windows 10を使ったまま、Linuxでネイティブにソースコードのビルドや実行ができるというのは魅力的だ。しかも、複数のLinuxディストリビューションを切り分けたり、同時に使用したりすることができる。その点では、Linuxディストリビューションネイティブな環境で開発するよりも便利といえるかもしれない。

もちろん、仮想化アプリケーションを使えば似たようなことはできるが、Visual Studio Codeと「Remote - WSL」のほうが簡単だ。Visual Studio CodeとWSLを使ったLinuxアプリケーションに関するドキュメントは今後も公開されるのではないだろうか。包括的なチュートリアルが公開されるとよいのだが、現在公開されているものでも十分に使い始めることができる。これまでに紹介した記事もあわせて活用しもらえればと思う。