えにあです。
以前、WSL2上でNode.jsを動かす方法を記事にしました。今回はその続きです。
今回はWSL2で快適に開発するシリーズの第二弾として、VSCodeをWSL2用にセットアップする方法を記載します。VSCodeはWSL2用にセットアップすることで爆速になるのです。
enia.hatenablog.com
この記事は下記公式ドキュメントを参考にしています。当然ですが情報源は公式ドキュメントが一番信頼できます。
code.visualstudio.com
目次
環境
- OS: Windows10 Home Edition (x64)
- WSL2: Ubuntu 20.04
- Visual Studio Code 1.60.0
作業の目的
以下の画像を見てみましょう。この画像はWindows側で行う処理と、Linux側で行う処理を表しています。
Windows側にVS Codeが、WSL側にVS Code Serverがあります。
そして、VSCode ServerがFileSysytemへのアクセスを行っています。ここがポイントです。
Windows側のVSCodeはServerにアクセスするためのUIの役割だけを行って、処理自体はVSCode Serverで行うのです。 VSCodeServerはWSL上で動いているので、WSL上のFileSystemへはLinuxベースの高速アクセスが可能になります。 WindowsのVSCodeから、直接WSL上のFileSystemにアクセスすると、非常に低速になりますし、ファイルが壊れる原因にもなります。 逆もまた然りで、WSL側からWindows側のFileSystemにアクセスすると、ファイルが壊れる原因になります。そのため、VSCodeServerから下に伸びている、WindowsのFileSystemからマウントしたボリュームへのアクセスはグレーになっており、非推奨であることがわかります。
Remote - WSL プラグインをインストールする
VSCodeを起動し、拡張機能で「Remote WSL」と入力します。
表示された「Remote - WSL」のインストールボタンを押下します。
検索ワードを削除して、「Local - インストール済み」の欄に「Remote - WSL」が表示されればインストール成功です。
ここで一度VSCodeを閉じましょう。
WSL2上をRemote起動する
WSL2上で作業ディレクトリを作成して移動します。 私は以下を作業ディレクトリとして進めます。
enia:~/learning/sample$> pwd /home/enia/learning/sample
作業ディレクトリ内でcode .を実行します。
enia:~/learning/sample$> code . Installing VS Code Server for x64 (e7d7e9a9348e6a8cc8c03f877d39cb72e5dfb1ff) Downloading: 100% Unpacking: 100% Unpacked 1828 files and folders to /home/enia/.vscode-server/bin/e7d7e9a9348e6a8cc8c03f877d39cb72e5dfb1ff. enia:~/learning/sample$
vs codeが起動するはずです。
以下の警告が出るので作成者を信頼します。
エクスプローラでプロジェクト名の後ろに[WSL: UBUNTU]とj表示されていればLinux上でWSLが起動しています。
「メニューバー」->「ターミナル」->「新しいターミナル」でターミナルを起動してみます。
WSLのbashターミナルが起動されているのがわかります。ここでビルド等を行うことで、windowsよりもはるかに高速に処理することができます。
終わりに
今回はVSCodeをWSL2用にセットアップする方法を記載しました。 VSCodeでコードを書いて、そのままWSL2のターミナルでビルド処理ができるので、開発効率が格段に上がります。 今回はここまで！
