はじめに

こんにちは。今回 MacBook Pro を新調したのですが、最近 Windows の最新動向が気になるので、 Windows も使えるようにしたいと思い、Bootcampをセットアップすることにしました。その際、とても詳しくて役に立ったのはこの記事です Image may be NSFW.
Clik here to view. :heart_eyes:

https://ascii.jp/elem/000/004/011/4011143/

Mac で Windowsが使えるようになったその勢いで、Windows Insider Programにも登録し、話題の WSL 2 をいち早く試すことにしました Image may be NSFW.
Clik here to view. :v:

今回は MacBook Pro 13 (macOS 10.15.4) + Bootcamp + Windows 10 Home の組み合わせですが、純正の Windows 端末でもやることは同じだと思いますのでご参考になさってください。

今回のゴール

WSL 2 で VS Code を起動し、SFDX コマンドを実行するまでをゴールとします Image may be NSFW.
Clik here to view. :golf:

最初にやること

Windows にログインし、WSL 2 をインストールします。管理者モードの Powershell からコマンドをいくつか実行するだけです。

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
wsl --set-default-version 2

その後、Ubuntu の LTS をインストールして、Linux の世界へ Go Image may be NSFW.
Clik here to view. :airplane:

https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

ターミナルのプロンプトを整える

ターミナルのデザインは大事ですね。コーディングするときのモチベーションにかかわります。

私は時刻や改行を入れたい派なので、次の例のように ~/.bashrcと ~/.bash_profileを作成します。

~/.bashrc

export PS1=$'\n''\D{%Y.%m.%d} \A $ \W\[\033[31m\]\[\033[00m\]'$'\n> '

~/.bash_profile

test-r ~/.bashrc &&. ~/.bashrc

開発環境を整える

余談ですが、どうやら Git は最初から Linux 内にインストールされている模様。

wsl
git --version

Image may be NSFW.
Clik here to view.

Node.js

Node.js LTS のインストールには nvm がおすすめ。

https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2

sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install--lts
nvm ls
node -v
npm -v

Image may be NSFW.
Clik here to view.

Salesforce CLI

npm 経由で Salesforce CLI をインストールします。

npm install--global sfdx-cli
sfdx force

Image may be NSFW.
Clik here to view.

Visual Studio Code

VS Code と WSL 用の拡張機能をインストールします。Linux 内ではなく Windows 内にインストールする点に注意です。

https://code.visualstudio.com/
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

結果発表

VS Code を起動 Image may be NSFW.
Clik here to view. :point_right: 左隅の ><の緑色アイコンをクリック Image may be NSFW.
Clik here to view.Remote-WSL: New Windowをクリックしましょう。