Visual Studio Code (VS Code) のインストール

VS Code を WSL 拡張機能と併用することで、WSL をフルカスタマイズできる開発環境として VS Code から直接使用できます。 以下の手順に従って、Windows に VS Code をインストールし、WSL 拡張機能を追加します。

  1. 以下のことを便利に行えます。
    • Linux ベースの環境で開発する
    • Linux ツールチェーンとユーティリティの使用
    • Outlook や Office などのツールへのアクセスは維持しながら、Linux アプリケーションの実行とデバッグ
    • VS Code のターミナルで Linux ディストリビューションを実行
    • VS Code の Intellisense コード補完、リンティング、デバッグ サポート、コード スニペット、ユニット テスト 機能を利用する
    • VS Code の Git サポートにより、バージョン管理を行う
    • WSL プロジェクトでコマンドや拡張機能を実行
    • OS 間の課題を気にせずファイルを編集 (例: /mnt/c) 内のファイルを編集する

  2. VS Code と WSL 拡張機能をインストール

    • VS Code のインストール ページからインストーラーを選択し、Windows にインストールします。
      • インストール中に [PATH への追加] オプションをオンにします。
      操作画面イメージ

    • Japanese Language Pack for Visual Studio Code をインストールします。
      操作画面イメージ

    • Remote Development 拡張機能パック をインストールします。

      • この拡張機能パックには、WSL、Dev Containers、Remote - SSH 拡張機能が含まれています。

        No 拡張機能名 機能
        1 WSL 拡張機能 VS Code で WSL 上の Linux プロジェクトを開くことができます。(パスの問題、バイナリの互換性、またはその他の OS 間の課題について心配する必要はありません)
        2 Dev Containers 拡張機能 コンテナー内のプロジェクト フォルダーやリポジトリを開くことができます。これにより、VS Code のすべての機能セットを利用して、コンテナー内で開発作業を行うことができます。
        3 Remote - SSH 拡張機能 SSH でリモート マシンに接続し、そのマシン上で VS Code を使用して開発作業を行うことができます。
      操作画面イメージ

    重要: WSL 拡張機能をインストールするには、VS Code のバージョン 1.35 以降が必要です。オートコンプリート、デバッグ、リンティングなどのサポートが失われるため、WSL 拡張機能なしで WSL を使用することはお勧めしません。 ヒント: この WSL 拡張機能は、$HOME/.vscode/extensions にインストールされています (PowerShell でコマンド ls $HOME\.vscode\extensions\ を入力してください)。

  3. Linux ディストリビューションを更新する

    コマンドは以下です。

     sudo apt-get update

  4. VS Code で WSL プロジェクトを開く

    WSL ディストリビューション内のプロジェクトを開くには、次のいずれかの方法を使用します。

    • コマンドラインから

      お使いの WSL ディストリビューションからプロジェクトを開くには、そのディストリビューションのコマンド ラインを開いて、「code .」と入力します。

      Open WSL project with VS Code remote server

    • VS Code から

      VS Code でショートカット CTRL+SHIFT+P を使用してコマンド パレットを起動することで、より多くの VS Code の WSL オプションにアクセスすることもできます。 その後「WSL」と入力すると、利用できるオプションの一覧が表示されます。これにより、WSL セッションでフォルダーを開き直したり、開くディストリビューションを指定したりできます。

      VS Code's command palette

  5. VS Code WSL 内の拡張機能

    WSL 拡張機能によって、VS Code が “クライアントサーバー” アーキテクチャに分割され、クライアント (ユーザー インターフェイス) はご利用の Windows コンピューター上で実行され、サーバー (ご利用のコード、Git、プラグインなど) は WSL ディストリビューション内で “リモート” で実行されます。

    WSL 拡張機能の実行中に [拡張機能] タブで、ローカルと WSL の拡張機能を確認できます。ローカル拡張機能 (例えば、テーマ) は一度のインストールで済みますが、Python 拡張機能など一部の拡張機能は各 WSL ディストリビューションに個別にインストールする必要があります。未インストールの拡張機能には警告アイコン ⚠ と [WSL でインストール] ボタンが表示されます。

    VS Code with WSL extensions vs local extensions

    詳細は VS Code ドキュメントを参照してください。