説明

Ubuntu上で動いているVisual Studio Code(以下、VSCode)のように開発が行えるようになります。
そのため、開発中、パーミッションや文字コード、改行コードなどにより悩まされることがなくなります。
最も綺麗に少ない手数で環境構築できることを目指して書きました。

構築手順

STEP1

VSCodeに、「Remote-WSL」という拡張機能をインストールしてVSCodeを閉じましょう。

STEP2

PowerShellから下記コマンドで、Ubuntuをインストールしましょう。

wsl --install -d Ubuntu

STEP3

Ubuntuが開くので、そこから以下のコマンドでVSCodeを開きましょう。

code .

これにより、VSCodeとUbuntuが接続され、次回以降はWindows上から開いてもUbuntuに接続されています。

接続中はVSCodeの左下に下の画像のような表示が出ます。

あとは好きにしましょう。

おまけ

以下はおまけです。

追加でやっておくとよいこと

Ubuntuアップデート

Ubuntuをアップデートしましょう。

sudo apt update
sudo apt upgrade

Docker導入

Dockerを導入しましょう。

WSL統合機能を使うことによりWindows上にインストールしたDockerをUbuntu上から利用できるため、UbuntuにDockerを入れる必要はありません。

Docker Desktopをダウンロードしてインストールし、起動後、設定からResources > WSL Integrationを選び、Ubuntuを有効にしましょう。
このままだとDockerコマンドがUbuntuから使えないので、コマンドプロンプトかPowerShellから以下のコマンドでUbuntuを再起動しましょう。

wsl -t Ubuntu

以下のVSCode拡張機能を導入しておけば、コンテナに対する操作や確認などがVSCode上で簡単にできるようになります。

Docker extension

開発上気を付けた方がよいこと

開発コードを置く場所

Windowsと共有している領域にファイルを置くとアクセスが遅いので置かないほうがいいです。
🙅 /mnt/c配下

以下のようなパスにcloneなどしましょう。
🙆 /home配下など

Node.js 14系(LTS)を導入

Ubuntuにデフォルトで入る10系はサポートが終了しているため、node.jsを入れる場合は14系を入れましょう。

sudo curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt install nodejs

予備知識

WindowsからUbuntu上のファイルへアクセスしたい

エクスプローラから下記のパスを開くことでアクセスできます。

¥¥wsl$¥Ubuntu

が、ファイルへのアクセスは極力VSCode上から行った方が余計なトラブルが少ないと思います。

WSLがメモリを思いっきり消費して困る

デフォルトでは、8GBか、搭載メモリの50%の少ない方のメモリ使用量が適用されます。

メモリ使用量に制限を設けたい場合は、下記のファイルを作成しましょう。

%USERPROFILE%¥.wsconfig

下記の通り、記述しましょう。
例：4GBに制限したい場合

[wsl2]
memory=4GB

設定を有効にするためにWSLを再起動します。

wsl --shutdown

localhostForwardingが効かない

本来、localhostFowardingはデフォルトで有効になっており、ディストロ上でlistenしたポートはlocalhostでアクセスできますが、PCを再起動したタイミングなどでこの機能が効かなくなることがあります。
おそらくバグだと思うのですが、WSLを再起動することで直るのでそういう時は再起動を試みてください。

wsl --shutdown

また、この問題はWindowsの高速スタートアップを無効化することによって恒久的に解決できます。