WSL2 + VSCode でGatsby.jsを使う

2021.03.02 — Gatsby.js, VSCode, Windows10, WSL, Markdown — 1 min read

WSL2 に Ubuntu-20.04 をインストールして、VSCode から Markdown ファイルを編集する環境を作ります。

WSL を有効にしたら、Microsoft Store からインストールしたい Linux ディストリビューションを選ぶだけです。

Microsoft Store で Ubuntu-20.04 を選んでインストールします。

Windows Terminal の設定は、settings.jsonを編集します。

WSL に Ubuntu をインストールすると、settings.jsonの中に以下のような関連するプロファイルが追記されます。

settings.json

1{
2  "guid": "{07b52e3f-ee2c-5db4-bd2d-ba147ed6c273}",
3  "hidden": false,
4  "name": "Ubuntu-20.04",
5  "source": "Windows.Terminal.Wsl"
6}

あとはメニューから、Ubuntu-20.04を選べばWSLに接続できます。

Node.js のバージョン管理にnを使うこととします。

WSL に Ubuntu をインストールしたら、aptコマンドでnodejsとnpmを一度インストールします。

$ sudo apt install nodejs npm

nをnpmからインストールして、lts版のNode.jsをインストールします。

$ sudo npm install -g n
$ n --lts
14.16.0
$ sudo n lts

nodejsと一緒にnpmもインストールされます。

最後にaptで入れたnodejsとnpmをアンインストールします。

$ sudo apt remove nodejs
$ sudo apt autoremove

npmでgatsby-cliをインストールします。

$ sudo npm install -g gatsby-cli

あとはgatsby developコマンドで、作成中の画面を見るころができます。

ありがたいことに、何も考えずにローカル側のWindowsからWWWブラウザでhttp://localhost:8000にそのまま接続できます。

VSCodeにRemote-WSLの拡張機能をインストールすることにより、 VSCodeから直接WSL上のファイルにアクセスして編集することができます。

この拡張機能により、WSLでgatsby developを走らせながら、VSCodeでWSL上のMarkdownファイルを編集し、ビューワーとしてブラウザを見ながら編集することができます。便利。

編集が終わったら、VSCodeのgit機能を使い、リポジトリを操作することもできます。

Windows10でも、この環境であればGatsby.jsでのWebサイトの作成がストレスなくできます。