はじめに
この記事はCCS Advent Calendar 2018 12/8の記事です。みてね！
adventar.org
@MeerIioka 我々の購買情報はもっと価値があるのかもしれない - FragileSky - 別館 - ←前 ｜ 後→@inaenomaki VsVimのすすめ
VSCode のVim 拡張の設定とかの話でもよかったけどいなえさんが布教しそうだったので別のお話。
例によって今回の記事も１万字程度ある。
Visual Studo Code。Microsoft によって開発された高機能テキストエディタ 。2015年初版なので結構新しい。
Windows 、MaxOS X、Linux 全てに対応！とても嬉しい！設定共有できたりもする。
gitにも標準対応です！！！やったー！！
このテキストエディタ 、思いの外気に入ってしまったので最近はよく使っている。Visual Studio には結構文句を言っているけどVSCode については「めっちゃ便利！」とか言ってる。これほんとに同じMicrosoft 製か？？？
2018.stateofjs.com
これツイッター で回ってきたやつだけど、VSCode 圧倒的パワーを誇っていてさすがやなってなっていた
（まあこれ、個人的にはすぐに使い始めることができないVim がかなり利用されてるのが一番意味不明だとはおもっている、恐るべしVim ）
VSCode にはデバッグ 機能が標準で搭載されている。何もしなくてもはじめから搭載されているデバッグ 機能はJavaScript アプリ(Node.jsランタイム)のデバッグ 機能で、ブレークポイント とかウォッチ式とかデバッグ 機能らしい機能はだいたい使える。
本記事では、標準未対応のC/C++ のデバッグ をVSCode ですることを目指す。
ちなみに、本記事の内容をそのままやって動作を確認したのは、
VSCode は2018年12月8日の最新版のはず。Mac はもっていないのでわかりません、すみません。でもLinux のほうと近そう？
始める前に確認
VSCode でデバッグ したりコンパイル するとき、結局裏で動いているのはコンパイラ GCC とデバッガーGDB 。これらが皆さんの環境にインストールされてないと何も始まりません！使えるか確認しましょう！
この記事で使えないと困るコマンドは、
$ g++ -g -O0 sample.cpp
$ gdb
の2つ。コマンドライン でC++ をコンパイル できる環境が整っている人は問題ないはず。端末やコマンドプロンプト で打ってみて実行できればOK。Visual Studio をインストールしてついてくるVisual C++ コンパイラ を使う場合はPATH通してないかもしれないので通しておこう。
一応軽く振れておくと、g++はコンパイラ 、gdbはデバッガーである。g++を使ったことがある人は多くても、もしかするとgdbを使ったことがある人は少ないかもしれない。実はこのgdb を用いることでコマンドライン 上でデバッグ を行うことができる。やってみたい人は少しいじってみるといいかもしれない(「gdb 使い方」などで検索するとわかる。ちゃんとブレークポイント なども設定できることが確認できる)。結果的には、テキストエディタ が裏でデバッガーを動かしてくれている、ということに過ぎなかったりする。本当はコマンドライン でやるところをビジュアル化して、自動化してくれていることになる。
コマンドライン からgdb を用いてデバッグ したときの例(ブレークポイント は9行目に設定)
本記事ではWindows ならMinGW 、Linux ではsudo apt install build-essentialでインストールできたFree Softwere Foundation, Inc.のg++ 7.3.0とGNU gdb 8.1.0で動作確認。どちらもフリー。
まずはVSCode がインストールされてないとはじまりませんね！！！！みなさんこの機会にインストールしましょう！！！！
日本語化までの手順はコチラ↓
mattyan1053.hatenablog.com
その他の設定とかはとりあえず今は割愛。でもテキストエディタ を自分好みにカスタマイズするのはとても楽しいので時間のあるときにいろいろいじくり回してほしい。そのうちおすすめ拡張機能 とかの記事書きたいね。
とりあえずVim 拡張機能 はあります。いつか設定方法まとめるつもり。これでVimmer も安心！
C/C++ をコーディングしてデバッグ するのでとりあえずC/C++ をVSCode が対応できるようにしなければいけない。デフォルトで対応してないものもだいたい拡張機能 で解決できる。日本語化のときと同様に拡張機能 のとこをクリッククリック！検索窓にC/C++ って書いて一番上に出てくるやつをインストールすればOK。
C/C++ 拡張機能
インストールできたら再起動して拡張機能 をアクティブ（有効）にしよう。
サンプルコード
次のようなコードをデバッグ する。ファイル名は「sample.cpp」。
#include <iostream>
#include <vector>
int main(){
int a, b;
std::vector<int > v;
a = 10 ;
std::cin >> b;
v.emplace_back(a);
v.emplace_back(b);
std::cout << "a=" << a << " b=" << b << std::endl;
for (int i = 0 ; i < 2 ; i++) {
std::cout << v[i] << std::endl;
}
return 0 ;
}
変数とインスタンス とforループあればいいかなって。まあこんなのデバッグ することはないけど使い方の記事なので許して。
このファイルを適当な場所につくった作業ディレクト リの中にいれる。(ディレクト リのパスに日本語が混ざっているとうまくいかないことがあるみたいなので注意！Windows のユーザー名とかどうしようもないとこあるのでやっぱりWindows はクソ
[Ctrl+Shift+B]を押してみてほしい。すると次のように表示されると思う。json 」ファイルが、「sample.cpp」と同じディレクト リに生成された「.vscode 」フォルダの中に作られると思う。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version ": "2.0.0 ",
"tasks ": [
{
"label ": "echo ",
"type ": "shell ",
"command ": "echo Hello "
}
]
}
これは、次からこのタスクを実行すると勝手にVSCode のほうでコマンド入力をやってくれるというものだ。ここにそのやってほしいコマンド入力について設定ファイルを書いて登録しておく。この状態だと、単純にシェルで「Hello」と表示するだけのものだ。これをコンパイル 用に書き換えていく。次のように書き換えてほしい。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version ": "2.0.0 ",
"tasks ": [
{
"label ": "g++ compile ",
"type ": "shell ",
"command ": "g++ ",
"args ": [
"-g ",
"-O0 ",
"sample.cpp "
] ,
"group ": {
"kind ": "build ",
"isDefault ": true
}
}
]
}
「label」はタスクの名前なので、ぶっちゃけなんでもよい。自分のわかりやすい名前をつければOK。"tasks":[の下にある{ }が一つのタスクを示しているので、下に追加して同じようなことを書いていくと複数のタスクを登録できたりもする。
"command"はみてわかるとおり実行するコマンドだ。その下の"args":[]がコマンドライン 引数になっている。今回は引数として
-g デバッグ オプションをつけてコンパイル -O0 最適化をしないsample.cpp コードのファイル名
を設定している。出力ファイルの名前をつけたければ、"-o", "output"として`"args":[]"の[ ]の中に書き足して上げれば良い。コンパイル されて、同じディレクト リに実行ファイルが生成されるはずだ。
tasks.json が生成され、タスクを実行したあとの状態
「sample.cpp」を開き、[F5]を押して見る。少しすると、「構成の選択」というのが表示されるので、「C++ (GDB /LLDB)」を選択する。json 」と同じ場所に今度は「launch.json 」が作られ、中身は次のようになっている。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version ": "0.2.0 ",
"configurations ": [
{
"name ": "(gdb) Launch ",
"type ": "cppdbg ",
"request ": "launch ",
"program ": "enter program name, for example ${workspaceFolder}/a.out ",
"args ": [] ,
"stopAtEntry ": false ,
"cwd ": "${workspaceFolder} ",
"environment ": [] ,
"externalConsole ": true ,
"MIMode ": "gdb ",
"setupCommands ": [
{
"description ": "Enable pretty-printing for gdb ",
"text ": "-enable-pretty-printing ",
"ignoreFailures ": true
}
]
}
]
}
ある程度はデバッガーの設定を書いてくれているので、これからここを設定していく。次のように書き換える。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version ": "0.2.0 ",
"configurations ": [
{
"name ": "(gdb) Launch ",
"type ": "cppdbg ",
"request ": "launch ",
"program ": "${workspaceFolder}/a.out ",
"args ": [] ,
"stopAtEntry ": false ,
"cwd ": "${workspaceFolder} ",
"environment ": [] ,
"externalConsole ": true ,
"MIMode ": "gdb ",
"windows ": {
"miDebuggerPath ": "C: \\\\ MinGW \\ bin \\ gdb.exe "
} ,
"setupCommands ": [
{
"description ": "Enable pretty-printing for gdb ",
"text ": "-enable-pretty-printing ",
"ignoreFailures ": true
}
]
}
]
}
"program":の項目は、実行ファイルのある場所を示す。このときの${workspaceFolder}は現在の作業ディレクト リをさす。"windows"のところはWindows 使っている人以外はいらない。勝手にgdb 見つけてきてくれる。というかPath通ってるはずなのにWindows はこれ書かなきゃいけないのよくわからない。"externalConsole"は追加でコンソール画面開くかって設定なのだけど適宜オンオフ切り替えよう。
実行ファイルに対するコマンドライン 引数は"args"に記述する。タスクを作るときと同様にすれば良い。たとえば、
"args ":[
"testfile.txt "
]
などとすることでファイル名を渡すことができる。他にもリダイレクトなどもできるので、
"args ":[
"< ",
"input.txt ",
"< ",
"output.txt "
]
とすれば入力と出力をファイルに出せる。このときはコンソールを追加で開かなくていいので"externalConsole"はfalseで良さそう。競プロなんかはこれが便利。
これがかけて保存できたら、もう一度「sample.cpp」に戻って[F5]を押してみるとデバッグ をしてくれる。今回のコードだと、入力待ちがあるので、そこで一旦止まるはず。裏で起動している端末やコマンドプロンプト を開き、好きな数字を入力しよう。デバッグ 実行して入力待ちの状態
これでデバッグ をするまでの設定は完了した。おつかれ！
一度設定すればあとは
の繰り返しですぐにデバッグ できる。
プログラムの実行を指定の場所で一旦止めたい、そんなときに使えるのがブレークポイント 。行番号の左隣をクリックすることで赤い丸が表示される。これをつけた状態でデバッグ を実行すると、その点で一旦実行を停止してくれる。ブレークポイント の設定ブレークポイント の一覧が出る。ここのチェックを外すとブレークポイント を一時的に無効にできる。また、行番号の左の赤丸を再度クリックすることで、ブレークポイント を削除することができる。
変数の中身を見る
ブレークポイント を設定したら[F5]でデバッグ を実行してみる。すると、一旦停止したとき次のような画面になる。デバッグ 中は下のバーがオレンジ色になる(表示される文字はいれている拡張機能 によっても変わるのであまり器にしなくて良い。ぼくの場合はVim の拡張機能 が入っているのでノーマルモード の表示がある。他にもリポジトリ 化してればブランチが表示されたりする）。デバッグ の画面になり、「変数」というところには停止した時点におけるローカル変数の値を表示することができる。1つめのブレークポイント では初期化をまだどれもしていないので、意味不明な値が入っていることが格納できる。インスタンス 変数の中身や配列の中身なども表示することができるので、一つ一つどんな値が入っているのか確認することができる。ブレークポイント まで進めたり、デバッグ を終了したりできる。
ウォッチ式
変数以外に、ウォッチ式というので値を見ることができる。こちらは式なので、a+bなどの値も見ることができる。dp[i][j]なんかを表示したりすることも可能。
コールスタック
呼ばれた関数がここに表示され、その関数が終了すると表示されなくなる。スタック領域の様子を見ることができるような感じ。再帰 処理とか書くとここがすごいことになったりする。再帰 処理をしているときのコールスタック
最後に
以上がVSCode でデバッグ を行う手順だった。デバッグ を行うまでの設定がVisual Studio などのIDE と違って手動なので少しむずかしい部分があったかもしれない。とはいえVSCode はかなり軽量でストレスフリーなので、学校の課題など短めのプログラムを書いたりするときは便利だと思う。ライブラリなどを使う大きなプログラムを書くときはおとなしくIDE を使うのが固いのはそれはそう。うん。
ちなみに、更に便利なものとしてCMakeとかもあるので調べてみると面白い。
デバッグ 画面、個人的にはこの画面構成のシンプルさが好き。Simple is the best!!!
VSCode はとにかく拡張機能 が豊富で、Java とかPython とか他の言語も使えるようにしたり、TeX を書いたりできる。普段ぼくはVSCode 使ってTeX でレポート書いたりしてる。
みんなVisual Studio Code を使おう！！！！！
