dev

WSL2 + WindowsTerminal + VSCode で開発環境構築

Keita Imatomi
2021-3-19 13:33

Windows で Linux

重めのデザイン作業用にデスクトップPCを購入しました。とはいえ一応プログラム開発環境も整えておこうかなと調べ始めたところ、Windowsでも簡単にLinux環境を用意できるようになってました。

  • WSL : Windows 上で Linux を動作させる
  • Ubuntu : Linux ディストリビューション
  • Windows Terminal : ターミナルアプリ(Mac専用 iTerm2 の代用)
  • VSCode : Macでも使用しているコードエディタ。Windows にインストールしたものを WSL (Ubuntu) からも使用できるようにする

これで使いなれた Mac とそう大差のない開発環境が用意できそうです。

WSL2

Windows 上で Linux が動作する環境をセットアップするために WSL2 をインストールします。Windows 10 用 Windows Subsystem for Linux のインストール ガイド を参考に、以下の手順で簡単にできました。

インストール

  1. コントロールパネル > プログラム > プログラムと機能 > Windows の機能の有効化または無効化 を選択。
  2. Linux 用 Windows サブシステム仮想マシンプラットフォーム にチェックを入れて OK する。 image image
  3. WSL のインストールが走るので、完了後マシンを再起動。

デフォルトバージョンを2に指定する

  1. コマンドプロンプトを開き、以下のコマンドを実行。
    $ wsl --set-default-version 2 

Ubuntu

Linuxを動かす環境のセットアップができたので、Linux ディストリビューションの1つ、Ubuntuをインストールします。

インストール

  1. Microsoft Store からダウンロード、インストールする。 image
  2. インストールが完了したら、Ubuntu のターミナルが起動する。最初にユーザー名とパスワードを求められるので、任意のものを入力する。

    新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する

  3. ついでにシェルを Mac と同じ zsh にしておく。

    zplug で zsh 環境を管理する

Windows Terminal

Mac で使用しているターミナルアプリ iTerm2 にWindows版はないので、代用として Windows Terminal をインストールします。

インストール

  1. Microsoft Storeからダウンロード、インストールする。 image
  2. インストール後、起動するとデフォルトの Windows PowerShellで起動されるので、次にこれを Ubuntu に変更する。 image

デフォルトプロフィールの変更

  1. タブ横の下矢印をクリックし、設定を選択。 image
  2. setting.json が開かれるので、defaultProfile の値に profiles > list の中にある ubuntuguid をコピペする。

    setting.json

    ... "defaultProfile": "", // ここに入力 ... "profiles": { "defaults": {} "list": [ ...中略... { "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}", // これを↑ "hidden": false, "name": "Ubuntu", "source": "Windows.Terminal.Wsl" }, ...
  3. setting.jsonを上書き保存し、Windows Terminal を再起動する。

ホームディレクトリを変更する。

デフォルトではホームディレクトリが Windows の設定を引き継いでいるため、Ubuntu のホームディレクトリに変更します。

  1. Ubuntu の プロフィールに commandline を追記する。

    setting

    { "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}", "hidden": false, "name": "Ubuntu", "source": "Windows.Terminal.Wsl", "commandline": "wsl.exe ~ -d Ubuntu" // 追記 },
  2. setting.jsonを上書き保存し、Windows Terminal を再起動する。

VSCode

Window にVSCodeをインストールしただけだと、Ubuntu 上での起動はできないので、拡張機能を使ってどこからでも VSCode を起動できるようにします。

インストール

  1. Microsoft のサイトからダウンロード、インストールする。 image

拡張機能 Remote-Development をインストール

Remote-DevelopmentRemote-WSLRemote-ContainersRemote-SSHのセットです。今後Dockerコンテナや接続サーバー上のファイルをVSCodeで編集したくなることもあると思うので、まとめてインストールします。

  1. VSCodeの拡張機能画面で検索して、インストールする。これで完了。 image

Ubuntu から VSCode を開く

  1. WindowsTerminal (Ubuntu) 上で以下のコマンドを実行。
    $ code .
  2. コマンドを実行したディレクトリをルートに、VSCodeが開かれる。VSCode画面左下にWSL: Ubuntuと表示されており、VSCodeがUbuntu上で起動されていることが分かる。 image

感想

WSL2 のおかげで、予想以上に簡単にLinux環境が用意できました。WSL2VSCode の親和性にも問題はなく、普段Macで行ってる操作フローと同じ感覚でコーディング作業ができそうです。

こちらもどうぞ