VS CodeとWSL (Ubuntu) を連携|ターミナルでLinux環境を快適操作【設定手順ガイド】

  • URLをコピーしました!

※本ページはアフィリエイト広告を利用しています

Windows上で開発を行っているけれど、Linuxのコマンドラインツールや開発環境を使いたい…そんな悩みを解決するのがWSL (Windows Subsystem for Linux) です。

さらに、Visual Studio Code (VS Code) と連携させることで、Windowsの使い慣れたエディタからシームレスにLinux環境を操作できるようになります。

この記事では、WSL (Ubuntu) をインストールし、VS Codeからそのターミナルを使えるようにするまでの具体的な手順を解説します。

目次

なぜVS CodeとWSLを連携させるのか?

  • Windows上でLinux環境: WSLを使えば、仮想マシンを別途用意することなく、Windows上で直接Linuxディストリビューション(Ubuntuなど)を実行できます。
  • 強力な開発ツール: Linuxには豊富な開発ツールやコマンドラインユーティリティがあります。これらをWindowsの開発フローに簡単に組み込めます。
  • VS Codeの統合: VS Codeの「Remote – WSL」拡張機能を使うことで、VS CodeがWSL内のファイルシステムやツールと直接連携します。あたかもLinuxマシン上でVS Codeを動かしているかのような体験が得られます。
  • ターミナルの統合: VS Codeに統合されたターミナルから、直接WSL (Ubuntu) のシェルを操作できます。ファイル編集とコマンド実行の行き来がスムーズになります。

前提条件

  • Windows 10 バージョン 2004 以降 (ビルド 19041 以降) または Windows 11
    • バージョンの確認: Win + Rキーで「ファイル名を指定して実行」を開き、winverと入力してEnter。
  • Visual Studio Codeがインストール済みであること
    • 未インストールの場合は、VS Code公式サイトからダウンロードしてインストールしてください。

設定手順

ステップ1: WSLとUbuntuのインストール

まず最初にWSLのインストールを行います。

手順は以下の記事を参照してください。

ステップ2: VS Codeに「Remote – WSL」拡張機能をインストール

次に、VS CodeがWSLと連携するための拡張機能をインストールします。

  1. VS Codeを起動します。
  2. 左側のアクティビティバーから拡張機能アイコン(四角が組み合わさったようなアイコン)をクリックします(ショートカット: Ctrl+Shift+X)。
  3. 検索ボックスに WSL と入力します。
  4. 「Remote – WSL」 (発行元: Microsoft) を見つけて、「インストール」ボタンをクリックします。

ステップ3: VS CodeをWSL (Ubuntu) に接続する

拡張機能のインストールが完了したら、VS CodeをWSL環境に接続します。

  1. F1 キーを押すか、Ctrl+Shift+P を押してコマンドパレットを開きます。
  2. WSL と入力し、表示されたコマンドを選択します。
  3. インストールされているディストリビューション(例: Ubuntu)を選択するように求められる場合があります。通常はデフォルトのものが表示されるので、それを選択します。
  4. 新しいVS Codeウィンドウが開き、WSLに接続されます。ウィンドウ左下の緑色の部分に「WSL: Ubuntu」(または選択したディストリビューション名)と表示されていれば成功です。

WSL:ディストリビューションを使用してWSLに接続をクリックします。

Ubuntuをクリックします。

ステップ4: VS Codeの統合ターミナルでUbuntuを使う

VS CodeがWSLに接続された状態(左下に「WSL: Ubuntu」などと表示されている状態)で、統合ターミナルを開くと、それが自動的にWSL (Ubuntu) のシェルになります。

  1. VS Codeのメニューから ターミナル > 新しいターミナル を選択します(ショートカット: Ctrl+@ または Ctrl+` )。
  2. ターミナルが開くと、プロンプト(例: username@hostname:/path$)が表示され、Ubuntuのシェルが実行されていることがわかります。
  3. ここでLinuxコマンド(ls, pwd, apt update, git, node など)を実行できます。

画面上部メニューターミナルから新しいターミナルを選択します。

画面下部にターミナルが表示され、コマンドが入力できるようになりました。

試してみましょう。

# ターミナルで確認してみましょう
uname -a       # Linuxカーネル情報を表示
ls -l          # カレントディレクトリのファイル一覧を表示
pwd            # カレントディレクトリのパスを表示

これで、VS Codeのエディタでコードを書きながら、同じウィンドウ内のターミナルでLinuxコマンドを実行したり、ビルドやテストを行ったりできるようになりました!

簡単な使い方・TIPS

  • ファイルアクセス: VS Codeのファイルエクスプローラーは、WSL内のファイルシステムを直接表示・編集できます。Windows側のファイルは /mnt/c/ などからアクセス可能です。
  • Linuxツールのインストール: Ubuntuターミナルから sudo apt update && sudo apt install <パッケージ名> で必要なツール(例: git, nodejs, python3, dockerなど)をインストールできます。
  • デバッグ: VS Codeのデバッグ機能もWSL内でシームレスに動作します(言語ごとのデバッグ用拡張機能が必要な場合があります)。
  • Git連携: VS CodeのGit機能も、WSL内のGitリポジトリに対して問題なく動作します。

まとめ

WSLとVS Codeの連携は、WindowsユーザーにとってLinux開発環境への扉を大きく開くものです。

VS Codeの使い慣れたインターフェースから、強力なLinuxのコマンドラインやツール群をシームレスに利用できるため、開発効率が格段に向上します。

ぜひこの設定を行って、快適な開発環境を手に入れてください!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次