WSL上のコードをWindowsのVisualStudioCodeから直接編集したいことがありますよね。
ここでは「Remote Development」というVSCode拡張を使ってこれを実現する方法を紹介します。
VSCode拡張「Remote Development」を追加
Ubuntuを起動していない状態で、VSCodeの拡張機能(英語メニューだとExtensions)で「Remote Development」を検索してInstallします。
![](https://exam-knock.com/exam/wp-content/uploads/2023/07/image-7-1024x546.png)
![](https://technote7.com/wp-content/uploads/2024/07/0_2_1_0_23_71_0_20_0_52_0_0_p0.png)
「remote」で検索すると一番上に出てきますよ。
Ubuntu側での設定
Ubuntuを起動します。タスクバーの検索ボックスで「ubuntu」と打つと出てきます。
該当フォルダに移動します。
cd /var/www/html
下記コードを実行するとダウンロードや展開が始まります。
code .
![](https://exam-knock.com/exam/wp-content/uploads/2023/07/image-9-1024x123.png)
![実行結果の参考画面](https://technote7.com/wp-content/uploads/2023/07/remotedevelop2.png)
実行結果の参考画面
完了すると、VisualStudioCodeが自動的に起動します。
![](https://technote7.com/wp-content/uploads/2024/07/0_2_1_0_23_71_0_20_0_52_0_0_p0.png)
左ペインのフォルダ名の後ろにきちんと[WSL:UBUNTU]という表記がでてきてますか?
![](https://exam-knock.com/exam/wp-content/uploads/2023/07/image-10-1024x672.png)
あっという間にWSL上のコードをWindowsのVisualStudioCodeから編集する環境ができあがりました。
![](https://exam-knock.com/exam/wp-content/uploads/2023/07/image-11-1024x672.png)
Windowsをもっと使いたおす方法
Windowsをもっと使いたおすことを学べる方法についてはこちらにまとめています。
![](https://technote7.com/wp-content/uploads/2024/09/windows-recommend5-160x90.png)
Windowsをもっと使いたおすためのUdemy学習教材 5選
本記事では、WindowsユーザがWindowsをもっと使いたおせるようになるためのUdemy学習教材について紹介します。 はじめに このブログでもWindowsに関する話題をかいつまんで取りあげていますが、体系立った知識を得るためには、や...