C++ と WSL を VS Code で使用する

Name: Visual Studio Code
Author: Microsoft

このチュートリアルでは、Windows Subsystem for Linux (WSL) の Ubuntu で GCC C++ コンパイラ (g++) と GDB デバッガーを使用するように Visual Studio Code を構成します。GCC は GNU Compiler Collection の略です。GDB は GNU デバッガーです。WSL は、仮想マシンではなく、マシンハードウェア上で直接実行される Windows 内の Linux 環境です。

注: このチュートリアルの多くは、Linux マシン上で C++ と VS Code を直接操作する場合にも適用できます。

Visual Studio Code は、WSL 拡張機能を使用して WSL で直接作業するためのサポートを備えています。コンパイラに加えて、すべてのソースコードファイルが Linux ディストリビューションでホストされる、このWSL 開発モードをお勧めします。背景の詳細については、VS Code リモート開発を参照してください。

このチュートリアルを完了すると、独自の C++ プロジェクトを作成および構成し、VS Code ドキュメントを調べて、その多くの機能に関する詳細情報を調べることができます。このチュートリアルでは、GCC、Linux、または C++ 言語については説明しません。これらの主題については、Web 上に多くの優れたリソースがあります。

問題が発生した場合は、VS Code ドキュメントリポジトリでこのチュートリアルの問題を提出してください。

前提条件

このチュートリアルを正常に完了するには、次の手順を実行する必要があります

Visual Studio Code をインストールします。
WSL 拡張機能をインストールします。
Windows Subsystem for Linux をインストールし、同じページにあるリンクを使用して、選択した Linux ディストリビューションをインストールします。このチュートリアルでは、Ubuntu を使用します。インストール中に、追加のソフトウェアをインストールするために必要になるため、Linux ユーザーパスワードを覚えておいてください。

Linux 環境をセットアップする

WSL の Bash シェルを開きます。Ubuntu ディストリビューションをインストールした場合は、Windows の検索ボックスに「Ubuntu」と入力し、結果リストでそれをクリックします。Debian の場合は、「Debian」と入力します (以下同様)。

シェルがコマンドプロンプトで表示されます。既定では、ユーザー名とコンピューター名で構成され、ホームディレクトリに移動します。Ubuntu の場合は次のようになります
projects という名前のディレクトリを作成し、その下に helloworld という名前のサブディレクトリを作成します
```
mkdir projects
cd projects
mkdir helloworld
```
VS Code を使用してソースコードを編集しますが、g++ コンパイラを使用して Linux でソースコードをコンパイルします。また、GDB を使用して Linux でデバッグします。これらのツールは Ubuntu には既定でインストールされていないため、インストールする必要があります。幸い、そのタスクは非常に簡単です!
WSL コマンドプロンプトから、まず apt-get update を実行して Ubuntu パッケージリストを更新します。古いディストリビューションは、新しいパッケージのインストール試行を妨げる場合があります。
```
sudo apt-get update
```
必要に応じて、sudo apt-get update && sudo apt-get dist-upgrade を実行して、システムパッケージの最新バージョンもダウンロードできますが、接続速度によっては、これに非常に時間がかかる場合があります。
コマンドプロンプトから、GNU コンパイラツールと GDB デバッガーをインストールするには、次のように入力します
```
sudo apt-get install build-essential gdb
```
g++ と gdb を見つけて、インストールが成功したことを確認します。ファイル名が whereis コマンドから返されない場合は、update コマンドを再実行してみてください。
```
whereis g++
whereis gdb
```

注: g++ コンパイラと GDB デバッガーをインストールするためのセットアップ手順は、WSL ではなく Linux マシンで直接作業している場合に適用されます。helloworld プロジェクトでの VS Code の実行、および編集、ビルド、デバッグの手順は同じです。

WSL で VS Code を実行する

helloworld プロジェクトフォルダーに移動し、WSL ターミナルから code . で VS Code を起動します

cd $HOME/projects/helloworld
code .

"VS Code Server をインストールしています" というメッセージが表示されます。VS Code は、デスクトップ VS Code が通信する Linux 側の小さなサーバーをダウンロードしてインストールしています。次に、VS Code が起動し、helloWorld フォルダーを開きます。ファイルエクスプローラーには、VS Code が WSL のコンテキストで実行されており、タイトルバーが WSL: Ubuntu であることが示されています。

File Explorer in WSL

リモートコンテキストは、ステータスバーからも確認できます。

Remote context in the Status bar

リモートステータスバー項目をクリックすると、セッションに適したリモートコマンドのドロップダウンが表示されます。たとえば、WSL で実行されているセッションを終了する場合は、ドロップダウンから [リモート接続を閉じる] コマンドを選択できます。WSL コマンドプロンプトから code . を実行すると、WSL で実行されている VS Code が再起動されます。

code . コマンドは、現在の作業フォルダーで VS Code を開き、それが "ワークスペース" になります。チュートリアルを進めていくと、ワークスペースの .vscode フォルダーに 3 つのファイルが作成されることがわかります

c_cpp_properties.json (コンパイラパスと IntelliSense 設定)
tasks.json (ビルド手順)
launch.json (デバッガー設定)

ソースコードファイルを追加する

ファイルエクスプローラーのタイトルバーで、[新しいファイル] ボタンを選択し、ファイルに helloworld.cpp という名前を付けます。

C/C++ 拡張機能をインストールする

ファイルを作成し、VS Code がそれが C++ 言語ファイルであることを検出すると、Microsoft C/C++ 拡張機能がまだインストールされていない場合は、インストールするように求められることがあります。

C++ extension notification

[インストール] を選択し、拡張機能ビューにボタンが表示されたら [再読み込みが必要] を選択して、C/C++ 拡張機能のインストールを完了します。

C/C++ 言語拡張機能を VS Code にローカルにインストール済みの場合は、拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) に移動し、これらの拡張機能を WSL にインストールする必要があります。ローカルにインストールされた拡張機能を WSL にインストールするには、[WSL にインストール] ボタンを選択し、[再読み込みが必要] を選択します。

Install in WSL button

hello world ソースコードを追加する

次に、このソースコードを貼り付けます

#include <iostream>
#include <vector>
#include <string>

using namespace std;

int main()
{
   vector<string> msg {"Hello", "C++", "World", "from", "VS Code", "and the C++ extension!"};

   for (const string& word : msg)
   {
      cout << word << " ";
   }
   cout << endl;
}

次に、⌘S (Windows、Linux Ctrl+S) を押してファイルを保存します。追加したばかりのファイルが、VS Code のサイドバーの [ファイルエクスプローラー] ビュー (⇧⌘E (Windows、Linux Ctrl+Shift+E)) に表示されることを確認してください

File Explorer

メインの [ファイル] メニューで [自動保存] をオンにすると、自動保存を有効にして、ファイルの変更を自動的に保存することもできます。

左端のアクティビティバーを使用すると、[検索]、[ソース管理]、[実行] などのさまざまなビューを開くことができます。このチュートリアルの後半で [実行] ビューについて説明します。他のビューの詳細については、VS Code のユーザーインターフェイスドキュメントを参照してください。

IntelliSense を試す

新しい helloworld.cpp ファイルで、vector または string の上にマウスカーソルを合わせると、型情報が表示されます。msg 変数を宣言した後、メンバー関数を呼び出すときのように msg. と入力し始めます。メンバー関数をすべて表示する補完リストと、msg オブジェクトの型情報を表示するウィンドウがすぐに表示されます

Statement completion IntelliSense

Tab キーを押して選択したメンバーを挿入できます。次に、開きかっこを追加すると、関数に必要な引数に関する情報が表示されます。

helloworld.cpp を実行する

C++ 拡張機能は、マシンにインストールした C++ コンパイラを使用してプログラムをビルドします。VS Code で helloworld.cpp を実行およびデバッグする前に、C++ コンパイラがインストールされていることを確認してください。

helloworld.cpp を開いて、アクティブなファイルにします。
エディターの右上隅にある再生ボタンを押します。
システムで検出されたコンパイラの一覧から [g++ ビルドとアクティブなファイルのデバッグ] を選択します。

コンパイラを選択するように求められるのは、helloworld.cpp を初めて実行するときだけです。このコンパイラは、tasks.json ファイルで "既定" のコンパイラとして設定されます。

ビルドが成功すると、プログラムの出力が統合ターミナルに表示されます。

プログラムを初めて実行すると、C++ 拡張機能は tasks.json を作成します。これは、プロジェクトの .vscode フォルダーにあります。tasks.json には、ビルド構成が格納されます。

新しい tasks.json ファイルは、以下の JSON と同様に見えるはずです

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "label": "C/C++: g++ build active file",
      "command": "/usr/bin/g++",
      "args": ["-g", "${file}", "-o", "${fileDirname}/${fileBasenameNoExtension}"],
      "options": {
        "cwd": "/usr/bin"
      },
      "problemMatcher": ["$gcc"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "detail": "Task generated by Debugger."
    }
  ]
}

注: tasks.json 変数の詳細については、変数リファレンスを参照してください。

command 設定は、実行するプログラムを指定します。この場合は g++ です。args 配列は、g++ に渡されるコマンドライン引数を指定します。これらの引数は、コンパイラが予期する順序で指定する必要があります。

このタスクは、g++ にアクティブなファイル (${file}) を取得し、コンパイルして、アクティブなファイルと同じ名前で拡張子のない実行可能ファイルを現在のディレクトリ (${fileDirname}) に作成するように指示します (${fileBasenameNoExtension})。これにより、この例では helloworld になります。

label 値は、タスクリストに表示されるものです。これは、好きなように名前を付けることができます。

detail 値は、タスクリストでタスクの説明として表示されるものです。類似のタスクと区別するために、この値を名前変更することを強くお勧めします。

今後は、再生ボタンは tasks.json からプログラムのビルドおよび実行方法を把握します。tasks.json で複数のビルドタスクを定義でき、既定としてマークされているタスクが再生ボタンで使用されます。既定のコンパイラを変更する必要がある場合は、[タスク: 既定のビルドタスクの構成] を実行できます。または、tasks.json ファイルを変更し、このセグメントを置き換えることで既定を削除できます

    "group": {
        "kind": "build",
        "isDefault": true
    },

これで

    "group": "build",

tasks.json の変更

tasks.json を変更して、"${file}" の代わりに "${workspaceFolder}/*.cpp" のような引数を使用することにより、複数の C++ ファイルをビルドできます。これにより、現在のフォルダー内のすべての .cpp ファイルがビルドされます。"${fileDirname}/${fileBasenameNoExtension}" をハードコーディングされたファイル名 (たとえば、'helloworld.out') に置き換えることで、出力ファイル名を変更することもできます。

helloworld.cpp をデバッグする

コードをデバッグするには、

helloworld.cpp に戻って、アクティブなファイルにします。
エディターの余白をクリックするか、現在の行で F9 キーを使用してブレークポイントを設定します。
再生ボタンの横にあるドロップダウンから、[C/C++ ファイルのデバッグ] を選択します。
システムで検出されたコンパイラの一覧から [C/C++: g++ ビルドとアクティブなファイルのデバッグ] を選択します (コンパイラを選択するように求められるのは、helloworld.cpp を初めて実行またはデバッグするときだけです)。

再生ボタンには、[C/C++ ファイルの実行] と [C/C++ ファイルのデバッグ] の 2 つのモードがあります。最後に使用したモードが既定になります。再生ボタンにデバッグアイコンが表示されている場合は、ドロップダウンメニュー項目を選択する代わりに、再生ボタンを選択してデバッグできます。

デバッガーを試す

コードのステップ実行を開始する前に、ユーザーインターフェイスのいくつかの変更点に注目してみましょう

統合ターミナルがソースコードエディターの下部に表示されます。[デバッグ出力] タブには、デバッガーが起動して実行されていることを示す出力が表示されます。
エディターは、デバッガーを開始する前に設定したブレークポイントである 12 行目を強調表示します
左側の [実行とデバッグ] ビューにデバッグ情報が表示されます。チュートリアルの後半で例を示します。
コードエディターの上部に、デバッグコントロールパネルが表示されます。左側のドットをつかむことで、画面上でこれを移動できます。

ワークスペースに launch.json ファイルが既にある場合、再生ボタンは、C++ ファイルの実行とデバッグの方法を把握するときに、そこから読み取ります。launch.json がない場合、再生ボタンは一時的な "クイックデバッグ" 構成をオンザフライで作成し、launch.json を完全に不要にします!

コードをステップ実行する

これで、コードのステップ実行を開始する準備ができました。

デバッグコントロールパネルで [ステップオーバー] アイコンをクリックまたは押します。

これにより、プログラムの実行が for ループの最初の行に進み、msg 変数が作成および初期化されたときに呼び出される vector クラスと string クラス内のすべての内部関数呼び出しがスキップされます。サイドの [変数] ウィンドウの変更に注意してください。
[ステップオーバー] をもう一度押して、このプログラムの次のステートメントに進みます (ループを初期化するために実行されるすべての内部コードをスキップします)。これで、[変数] ウィンドウにループ変数に関する情報が表示されます。
[ステップオーバー] をもう一度押して、cout ステートメントを実行します。(C++ 拡張機能は、最後の cout が実行されるまで、[デバッグコンソール] に出力を出力しないことに注意してください。)
必要に応じて、ベクター内のすべての単語がコンソールに出力されるまで [ステップオーバー] を押し続けることができます。ただし、興味がある場合は、[ステップイン] ボタンを押して、C++ 標準ライブラリのソースコードをステップ実行してみてください!

独自のコードに戻る 1 つの方法は、[ステップオーバー] を押し続けることです。別の方法は、コードエディターで helloworld.cpp タブに切り替え、ループ内の cout ステートメントのどこかに挿入ポイントを置き、F9 を押して、コードにブレークポイントを設定することです。赤い点が表示されます。これは、この行にブレークポイントが設定されていることを示すために左側の溝に表示されます。

次に、F5 を押して、標準ライブラリヘッダーの現在の行から実行を開始します。実行は cout で中断されます。必要に応じて、F9 をもう一度押して、ブレークポイントをオフにすることができます。

ループが完了すると、統合ターミナルの [デバッグコンソール] タブに、GDB によって出力される他の診断情報とともに、出力が表示されます。

ウォッチを設定する

プログラムの実行中に変数の値を追跡するには、変数の ウォッチ を設定します。

挿入ポイントをループ内に配置します。[ウォッチ] ウィンドウで、プラス記号をクリックし、テキストボックスにループ変数の名前である word を入力します。ループをステップ実行しながら、[ウォッチ] ウィンドウを表示します。
実行がブレークポイントで一時停止している間に変数の値をすばやく表示するには、マウスポインターをその上に合わせます。

次に、tasks.json ファイルを作成して、プログラムをビルド (コンパイル) する方法を VS Code に指示します。このタスクは、g++ コンパイラを呼び出して、ソースコードから実行可能ファイルを作成します。

次の手順では、次の手順でビルドタスクを作成するためのコンテキストとしてエディターでアクティブなファイルを使用するため、helloworld.cpp をエディターで開いておくことが重要です。

launch.json でデバッグをカスタマイズする

再生ボタンまたは F5 でデバッグすると、C++ 拡張機能は動的なデバッグ構成をオンザフライで作成します。

実行時にプログラムに渡す引数を指定するなど、デバッグ構成をカスタマイズしたい場合があります。launch.json ファイルでカスタムデバッグ構成を定義できます。

launch.json を作成するには、再生ボタンのドロップダウンメニューから [デバッグ構成の追加] を選択します。

Add debug configuration play button menu

次に、さまざまな定義済みのデバッグ構成のドロップダウンが表示されます。[g++ ビルドとアクティブなファイルのデバッグ] を選択します。

C++ debug configuration dropdown

VS Code は launch.json ファイルを作成します。これは、次のようになります

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "C/C++: g++ build and debug active file",
      "type": "cppdbg",
      "request": "launch",
      "program": "${fileDirname}/${fileBasenameNoExtension}",
      "args": [],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [],
      "externalConsole": false,
      "MIMode": "gdb",
      "miDebuggerPath": "/usr/bin/gdb",
      "setupCommands": [
        {
          "description": "Enable pretty-printing for gdb",
          "text": "-enable-pretty-printing",
          "ignoreFailures": true
        }
      ],
      "preLaunchTask": "C/C++: g++ build active file"
    }
  ]
}

上記の JSON では、program はデバッグするプログラムを指定します。ここでは、アクティブなファイルフォルダー ${fileDirname} と拡張子のないアクティブなファイル名 ${fileBasenameNoExtension} に設定されています。helloworld.cpp がアクティブなファイルの場合、helloworld になります。args プロパティは、実行時にプログラムに渡す引数の配列です。

既定では、C++ 拡張機能はソースコードにブレークポイントを追加せず、stopAtEntry 値は false に設定されています。

stopAtEntry 値を true に変更して、デバッグを開始するときにデバッガーを main メソッドで停止させます。

今後は、再生ボタンと F5 は、デバッグのためにプログラムを起動するときに launch.json ファイルから読み取ります。

C/C++ の構成

C/C++ 拡張機能をより詳細に制御する場合は、c_cpp_properties.json ファイルを作成できます。これにより、コンパイラへのパス、インクルードパス、C++ 標準 (既定は C++17) などの設定を変更できます。

コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) からコマンド [C/C++: 構成の編集 (UI)] を実行して、C/C++ 構成 UI を表示できます。

Command Palette

これにより、[C/C++ 構成] ページが開きます。ここで変更を加えると、VS Code はそれらを .vscode フォルダーの c_cpp_properties.json という名前のファイルに書き込みます。