Visual Studio CodeでRemote WSL拡張機能を使うための初期設定手順

VSCodeで開発をしてみたいけれど、どんな設定をすれば良いかわからないという方、必見です！
 
今回は<b>「RemoteWSL + VSCodeで環境構築の設定」</b>について紹介します。設定をしておくことで何が便利になるのでしょうか？

![AdventCalendar2021.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/54673e59-daef-076d-59be-41f82141ee5c.jpeg)

<h4>・設定をしておくことのメリット</h4>
VSCodeで開発をする際に、設定（RemoteWSLの拡張機能を入れておく）をしておくと、Windows上での作業でありながらターミナルタブを開けば標準的な開発環境を開いて作業することができます。

 
コマンドプロンプトやPowerShellではできないbash操作もWSL(Windows Subsystem for Linuxの略で、Windows上でLinuxを利用できるツール)ならできるようになるので、VSCodeでgit（bash）を使う場合にも開発しやすくなると思います。
 
設定してリモートコンテナを利用できるようにしておけば、パッケージをインストールしたり、デプロイ作業などのコマンド操作もできるようになるので、設定しておいて損はないと思います！
では早速、内容について確認していきましょう！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/0e24ab50-453f-593b-13f4-de8df9c9f6b3.png)

VS Codeでは近頃、「Remote Development」という機能が追加されました。
これによって、<b>ローカルで動いているVS Codeからリモートで別な環境に接続して開発を行うことができるようになります。</b>
Remote DevelopmentのうちWSL(Windows Subsystem for Linuxの略で、Windows上でLinuxを利用できるツール)で接続するものは特に<b>Remote-WSL</b>と呼ばれます。

 
<b>VS CodeでWSL上のリモートコンテナを使用する</b>為には、以下のような前準備が必要になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/a7a653c3-8672-a109-9ae4-a8cf2a03d6c3.png)

実際に、VSCodeでRemoteWSL拡張機能を使うにあたって行う初期設定（Windows10版）の実行環境セットアップについてみていきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/e3d88622-4122-cd8d-dc80-4c43565bab94.png)
[コントロールパネル>> プログラム>> <b>Windowsの機能の有効化または無効化</b>] からWindows設定のウィンドウを開き、
・Linux用Windowsサブシステム
・仮想マシン プラットフォーム　　　の2つにチェックを付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/42f4c3cd-501e-cacf-3de9-e7378122213d.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/e2d91bac-4e3e-ed40-2243-9afc97f7c1b6.png)

WSL2Linux カーネルの更新ページ（<a href="https://aka.ms/wsl2kernel" target="_blank">https://aka.ms/wsl2kernel</a>）から、WSL2用Linuxカーネルプログラムパッケージをダウンロードして、インストールします。

Windows PowerShell を管理者権限で開き、「<b>wsl –set-default-version 2」</b>とコマンド入力します。

＊上記のLinuxカーネルをインストールしていない場合にコマンドを入力すると、インストールするURLを含むメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/668b801f-3e29-e2e9-57fc-f15e05ee90d7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/e92216f5-febe-bb62-beab-c0bac1ab0a9a.png)

次は、Microsoft Storeにて「(ここでは) <b>Ubuntu 20.04 LTS</b>」 をインストールします。
＊追加で <b>Windows terminal</b> もインストールしておくのがオススメです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/728186ae-8fb2-b637-c3b2-174634c249a4.png)

　Ubuntuを起動します。最初の起動には1,2分かかることもあります。
はじめにユーザー名とパスワードを設定して、以下のように表示されれば、インストール成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/ae6ce606-3e82-9075-8ae0-49dc36472dc5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/61184924-65b1-0970-d01d-dec947808b7d.png)

1～3までの手順を実施した後にVSCodeを起動すると、以下の赤枠のポップアップが表示されます。
このときインストールを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/dba52879-23b2-9093-0b08-e453ddb2674c.png)

RemoteWSL拡張機能がインストールされることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/8a1b865a-e5a7-cf31-3307-df69b18ba8f8.png)

Visual Studio Codeはプログラミングに特化したエディタとして大変便利で人気があります。
このエディタで開発をしてみたいと考えている方は、この機会に標準の開発環境が得られる<b>「RemoteWSL拡張機能」を使う設定</b>をしておいて損はないと思います。

以上となります。