VS Code を Windows 11 にインストールして WSL Ubuntu とリモート開発する

こんにちは、@studio_meowtoon です。今回は、Windows 11 に VS Code をインストールする手順と、WSL Ubuntu とリモート開発する方法を紹介します。

目的

Windows 11 の Linux でクラウド開発します。

こちらから記事の一覧がご覧いただけます。

実現すること

• Windows 11 に VS Code をインストールします。
• VS Code に リモート拡張機能を導入して WSL Ubuntu とリモート開発をします。

技術トピックス

VS Code とは？

こちらを展開してご覧いただけます。

Microsoft Visual Studio Code

Visual Studio Code (VS Code) は、Microsoft が開発したオープンソースのコードエディタです。軽量で高速、拡張性が高く、豊富な機能を持っています。主要なプログラミング言語のサポートがあり、エディタ内でのデバッグ、Git などのバージョン管理システムの統合、ターミナルなどの機能も提供しています。また、多数の拡張機能を利用することで、自分に合ったエディタ環境をカスタマイズできます。

Visual Studio Code (VS Code) はオープンソースソフトウェアです。VS Code のコードは、Microsoft によってオープンソース化され、GitHub 上で MIT ライセンスの下で公開されています。つまり、VS Code のコードを誰でも自由に閲覧、ダウンロード、改変、再配布することができます。また、VS Code の開発にはコミュニティからの貢献が歓迎されており、開発者は GitHub 上でコードのプルリクエストを行うことができます。

SSH とは？

こちらを展開してご覧いただけます。

SSH (Secure Shell)

SSH は、ネットワークを介して安全な通信を行うためのプロトコルの一つです。 SSH は、通信経路を暗号化し、不正アクセスや盗聴などのセキュリティ上のリスクを低減することができます。SSH は、主にリモートアクセスやファイル転送などの目的で使用されます。

開発環境

• Windows 11 Home 23H2 を使用しています。

WSL の Ubuntu を操作していきますので macOS の方も参考にして頂けます。

WSL (Microsoft Store アプリ版) ※ こちらの関連記事からインストール方法をご確認いただけます

> wsl --version
WSL バージョン: 2.2.4.0
カーネル バージョン: 5.15.153.1-2
WSLg バージョン: 1.0.61

Ubuntu ※ こちらの関連記事からインストール方法をご確認いただけます

No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 24.04 LTS
Release:        24.04
Codename:       noble

この記事では基本的に Ubuntu のターミナルで操作を行います。Vim を使用してコピペする方法を初めて学ぶ人のために、以下の記事で手順を紹介しています。ぜひ挑戦してみてください。

VS Code 環境の構築 (Windows 11)

VS Code をインストール

Microsoft Store から VS Code を検索して [インストール] します。 ※無料です。

VS Code のセットアップ

スタートメニューから Visual Studio Code を起動します。

初回起動時に日本語表示を促すポップアップが開きます。

[インストールして再起動] ボタンを押します。

再起動して立ち上がった VS Code が日本語表示になりました。

次に、左のメニューバーから 拡張機能を選択して以下の二つの拡張機能をインストールします。

WSL

Remote - SSH

インストールが完了したら、このまま VS Code を閉じます。

Ubuntu でプロジェクトを作成する

はじめて Windows 11 と WSL Ubuntu でリモート開発をする場合、Ubuntu 側にプロジェクトを作成してから開始する方が手順が簡単になります。そのため、この方法をご紹介します。

既に WSL Ubuntu 上で他の言語のプロジェクトを作成している場合は、Python のプロジェクトを作成する必要はありません。代わりに、既存のプロジェクトフォルダに移動し、code . と入力してください。これにより、Windows 11 上の VS Code が起動します。

Python の Hello World プロジェクトを作成する

Python を確認します。

通常 Ubuntu 24.04 には、Python はプリインストールされています。

$ python3 --version
Python 3.12.3

プロジェクトフォルダを作成します。
※ ~/tmp/hello-python をプロジェクトフォルダとします。

$ mkdir -p ~/tmp/hello-python
$ cd ~/tmp/hello-python

スクリプトを作成します。

$ vim hello.py

ファイルの内容

hello.py

print("Hello World!")

スクリプトを実行してみます。

$ python3 hello.py
Hello World!

ターミナルに "Hello, World!" が表示されました。

ここまでのまとめ

• Windows 11 に VS Code をインストールして日本語表示を有効にしました。
• VS Code に WSL, Remote - SSH 拡張機能をインストールしました。
• WSL Ubuntu に Python の "Hello World" プロジェクトを作成しました。

VS Code で Ubuntu のプロジェクトを開く

Ubuntu のターミナルで Python の "Hello World" プロジェクトに移動します。
※ 上記の手順を実行してきた場合、既に以下のディレクトリに移動した状態です。

$ cd ~/tmp/hello-python

code コマンドで Ubuntu から Windows 11 の VS Code を起動します。
※ 初回起動時のみ、自動的に追加の拡張要素がインストールされます。

$ code .
Installing VS Code Server for x64 (92da9481c0904c6adfe372c12da3b7748d74bdcb)
Downloading: 100%
Unpacking: 100%
Unpacked 2399 files and folders to /home/username/.vscode-server/bin/92da9481c0904c6adfe372c12da3b7748d74bdcb.

code . は、現在のディレクトリを VS Code で開くためのコマンドです。VS Code が既にインストールされている場合、このコマンドを実行することで、カレントディレクトリ内のファイルやフォルダを VS Code で開くことができます。

セキュリテイのダイアログが開きますが、[はい、作成者を信頼します] を選択します。

VS Code が立ち上がりました。VS Code の左下が以下のような表示に変わります。

WSL: Ubuntu-22.04 と表示されています。

VS Code で新しいターミナルを開いてみます。

以下のように VS Code の中に Ubuntu のターミナルが開きます。

VS Code のターミナルで Python スクリプトを実行してみます

$ python3 hello.py
Hello World!

VS Code のターミナルに "Hello, World!" が表示されました。

今回は、VS Code で WSL Ubuntu リモート開発することが目的です。そのため、Python 用の拡張機能のインストールは必要ありません。 ただし、VS Code では Python でプロジェクトを開発することが可能ですので、興味のある方は別途インストールを行ってください。

別のプロジェクトを開くには？

これで設定が完了しました。これ以降、Ubuntu 上の別のプロジェクトフォルダでターミナルから code . と入力するだけで、VS Code で開発を行うことができます。今後の記事では、Java 開発環境などの構築方法を紹介する予定です。

カスタマイズ

キーボードの F1 キーを押して VS Code のコマンドパレットに以下を入力します。

> settings json

設定を適用する対象を選択します。
※ ここでは 基本設定: ユーザー設定を開く (JSON) を選択しました。

editor.codeLens を OFF にする設定は以下を追記します。

settings.json

}
    ※ 省略
    "editor.codeLens": false
}

まとめ

• Windows 11 に VS Code をインストールすることができました。
• VS Code に WSL, Remote - SSH 拡張機能をインストールしました。
• WSL Ubuntu に作成したプロジェクトフォルダから、Windows の VS Code を起動して開発することができました。

どうでしたか？ WSL を使用することで、Windows 11 上で手軽に Linux の開発環境 (たとえば Ubuntu など) を構築することができます。ぜひお試しください。今後も Java の開発環境などを紹介していきますので、お楽しみに。それでは失礼します。

推奨コンテンツ