こんにちは、Qiita 初投稿です。
私は最近競技プログラミング（競プロ）にはまってきて、EventHorizon という ID で AtCoder に参加している競プロ等初心者です。
C++をメインで使っているのですが、デバッグに長時間とられるためデバッガーを備えるエディタ Visual Studio Code (VSCode) を導入（所謂「環境構築」）しました。
その他、AtCoder に自動でコードを提出する便利ツールの導入まで行いました。
これらの環境構築については既にネット上に記事がいくつもありますが、執筆者と環境が異なっていたり、執筆時から時間が経っていたりすると、紹介されている通りに設定をしたつもりでもうまく動作しないことがあり苦労しました。
この記事では、私が躓いた点とそれをどう解決したかを記します。
目的
- 自分用メモ
- 他の初心者さんの参考の為
- 初心者がどこで躓くか把握したい方の為
注意点
私自身、初心者で色々と理解していないまま書いている部分が多いですので、他の記事を見てどうしても環境構築ができない場合にこの記事を読んで頂ければ幸いです。また、設定は自己責任で行ってください。
また、私が詰まった箇所を重点的に記録していて、必要ステップを全て明記しているわけではない事に注意してください（途中で紹介している他記事を参考にしたり、ご自身でも検索したりしながらご活用ください）。
解説する側の方々（サービス提供者、YouTuber、本の著者等）にとっても、初心者がどこで躓くかというのは知りたい情報だという声も貰ったり見かけたりしましたので、それを記録して公開します。
記事に誤りを見つけた方はお知らせ頂けると幸いです。気付き次第訂正いたします。
私の環境・知識
macOS 11.2
ターミナルは必要な時に使うが、多用はしない。cd や mkdir といった簡単なコマンドは問題無しというレベル。英語は読める。
記事初公開時期
2021年3月。その後、追記と明記していない部分も修正・追記を行いました。
前提
C++ 自体はインストールされている事を想定します。また、デバッガーを使う場合はデバッガーもインストールする必要があります。私はデバッガーについては特に意識せずインストールできていたので、C++と一緒にインストールされているかもしれません。ターミナルでlldb -vとすればデバッガーの一種である LLDB がインストールされているか確認できます。後述の理由で mac 標準の Clang ではなく GCC というタイプの C++ が必要になる場合がありますが、必要になった段階で引用先等を参考にしてインストールしてください。
初心者つまずきポイント１ （１回で成功しない場合に泥沼にはまる可能性がある）
まず「mac 環境構築 VSCode」等で検索をして、でてきた解説記事１の通りに設定してみます。→何故か上手くいかない
解説記事１で必ずしも全て手取り足取り説明される訳ではありません。そこで検索で出てきた別の記事、解説記事２を参考に設定してみます→何故か上手くいかない
・・・
このようになると、それぞれの記事でやろうとしてる設定も微妙に異なってきますし、どこがいけないのかの判断が初心者には難しいと思います。
以下ではこの問題を一般には解決しませんが、私が特に参考にしたサイトを紹介しながら、私の環境でうまくいった方法を紹介します。
Visual Studio Code のインストールと設定
環境構築の第一歩で右往左往し（数回やろうとして諦めてを繰り返しています）、どの手順で何をしたのかを正確に記録できてはいませんが、ツイートを元に再現を試みます。
VSCode の導入・設定で困ったらまずは公式サイトを見るのが良いのではないかと思います。全部読もうとすると長いですが、概要を読むだけでも雰囲気は掴めるかもしれません。基本的な使い方のビデオなどもあります。
code .を使えるようにする
ターミナル上で code . と打つと VSCode がそのディレクトリ上で開かれるという機能があるのですが、はじめ上手くいきませんでした。たしか、上のサイトの Alternative manual instructions のコードをターミナルにコピペして実行したら機能が使えるようになったんだと思います。1
ところで、超ウィザード級ハッカーの皆様は vim や emacs といったエディタを駆使するようですが、その使用法を覚えるのも骨が折れます。初心者の場合、macOS の . で始まる隠しファイルを編集する必要がある場合は Command+Shift+. で表示・非表示の切り替えができますので、普通に ~/.bash_profile とかを表示させてクリックして開いてテキストエディットか何かで編集する事も可能です。
初心者つまずきポイント2 (VSCode の設定に関する基礎知識)
VSCode の設定は全体設定とワークスペース毎の設定があるようです。
これのせいで解説記事の settings.json の設定をどこに反映させれば良いのか間違えがち。
多分まずは全体設定の settings.json に書き込んでおけば良いでしょう。
ただ、開いているワークスペースに設定ファイルがあるとそちらの設定が優先されるでしょうから、そちらにも設定すると良いかもしれません。
全体設定は Code > Preferences > Setting （または対応する日本語メニューの項目）から設定項目を検索して設定できます。検索すると、setting.json の関係ある部分しか表示されないようなので、setting.json ファイルの大部分が削除されてしまった！と焦って勘違いしないようにしましょう。
ワークスペース毎の設定ファイルは、VSCode の左側の Explorer タブにファイル一覧が表示されます。 .vscode フォルダ内の設定ファイルから設定可能です。c_cpp_properties.json, tasks.json, launch.json の設定をしますが、これらはワークスペースとして開いた階層の .vscode 内に作ります。
統合ターミナルを使えるようにする
VSCode を使うならこれができると便利です。VSCode 内でターミナルが使えます。（細かい事を言うと、普通に使うターミナルと内部設定が異なるとかがあるようですが、そこまでは解説できません。）
先ほどはターミナルから VSCode を開けるようにしたわけですが、ここでは VSCode からターミナルが使えるようになるというわけです。
VSCode に関する詳細な日本語のメモがあります。
この統合ターミナル関連の部分を参考にさせて頂きました。
まず、統合ターミナルを使うという設定をオンにする必要があるので、上記サイトまたは VSCode 公式サイトを参考にしてください。（余裕があれば後で詳細を書き足します）
さて、私の場合は最初こうなりました。
このツイートは上記初心者つまずきポイント２で言及した setting.json の大半が消えてしまったと勘違いしている様子（笑）と、ターミナルが見つからない事に起因するエラーコードを示しています。
自分の使っているターミナル（私の環境では zsh）のある場所はターミナル上で echo $SHELL とすれば表示できますので、これを必要な箇所にコピペしていきます。
VSCode の全体設定でterminal.integrated.shell.osxとterminal.integrated.automationShell.osxを検索して、上で確認したターミナルの場所（/bin/zshなど）を書き入れます。上記サイトが役に立ちました。
拡張機能のインストール
VSCode 上で各言語のシンタックスハイライトや IntelliSense 機能等を行う為に拡張機能（C/C++, Code Runner, CodeLLDB 等）をインストールします。（これらは VSCode 上の拡張機能であって、C/C++ 自体や LLDB 自体ではないので混同しないようにしましょう。）
これは多くのサイトで解説されているのでここでは省略します。C/C++ と Code Runner を入れておけばとりあえずは十分のようですね。Code Runner はインストールだけでなく設定事項があります。次のセクションで、設定の参考にしたwebサイトを紹介します。
拡張機能のインストールは統合ターミナルの設定前に行っても良いと思います。また、日本語に対応させる拡張機能や画面の配色を変える拡張機能もありますので、お好みに応じて導入してください。
デバッガー機能を使えるようにする！
やはりデバッガー機能が VSCode の目玉ですよね。使えるようにしていきましょう。
基本的にこの記事が大変参考になりました。
厄介ポイント
#include <bits/stdc++.h> を使えるようにしたいかどうかで参考にすべきサイトが変わってきます。C++ (GCC) と C++ (Clang) のうち、前者でのみ #include <bits/stdc++.h> が使えるそうです。#include <bits/stdc++.h>の是非は諸説あるようですが、初心者がどのパッケージをインストールする必要があるかに煩わされなくて良いという利点があり、私も使いたいと思いました。
ただし上記サイトによると、デバッガー機能関連で GCC との相性がよくないらしく（？）、ローカルのコンピュータ上では Clang を使い、AtCoder への提出用には GCC を指定するというややトリッキーな事になっています。
デバッグ環境をGCCで環境構築しようとするとGDB周りで泥沼にはまったので、Clangでの環境構築となります。
(VSCode上にGDBでいい感じにデバッグ環境を構築できた方、やり方教えて下さい)
従って、もし他にシンプルな方法があればそちらを採用した方が良いかもしれません。
上記ページは簡潔にやるべき事がまとまっていますが、
こちらはもう少し詳しい説明があります。
一度に色々やると大変なので、まず AtCoder Library 関係は後回しにする事にしました。デバッグ機能をまず使えるようにします。
結論から言うと、上記1つ目のサイトに従って bits/stdc++.h をダウンロードしてくれば良いです。
私の場合は２つ目のサイトを参考にした後に１つ目のサイトを参考にしたので bits/stdc++.h を二箇所に入れてしまいました。以下はエラーが出たので VSCode の設定をツイートしたもの。以下に述べる様に、2つ目のサイトの方法で mac の奥深くから探してきた stdc++.h を使うと、幾つかの行をコメントアウトする必要がありました。
rm $dir/$fileNameWithoutExt && の部分は必要無いと考えられるので取り除くと、別のエラー（stdc++.h 関連）になりました。
解説記事で指定されたディレクトリに stdc++.h を置いたにも関わらずエラーとなりましたが、以下の Q&A によると stdc++.h 内で必要箇所にコメントアウトをすると良いとのこと。
#include <cstdalign>
#include <cuchar>
#include <memory_resource>
この３つをコメントアウトしたところでエラーが無くなり、デバッグできるようになりました。2つ目のサイトの方法で準備した stdc++.h にはコメントアウトの必要だった３行が含まれていますが、1つ目のサイトの方法で準備した stdc++.h には無かったので、これから stdc++.h を用意する方は1つ目のサイトのように stdc++.h を準備すれば良いでしょう。それでうまくいかなかった場合は、ここで紹介した３行をコメントアウトして2つ目のサイトの方法を試してみるとできるかもしれません。
OS アップデート後のエラー
す〜ぐエラー出してくるんだよな計算機ってやつは。
ターミナルから xcode-select --install で直りました。
デバッガーの基本的な使い方
VSCode のデバッグのやり方は、文章で読むより動画を観た方が分かりやすいかもしれません。
例えば以下の動画が参考になります。
break point を設定して、
- 次の break point まで進む (continue) か、
- １ステップだけ進める (step over) か、
- 呼び出している関数の中に入って何が起きているか調べる (step into) か、
- その逆で上の階層に戻る (step out) か、
- コードの最初から実行し直す (restart) か、
- デバッグを終了する (stop) か
を操作していきます。この時左側の Run and Debug タブの VARIABLES の項目で各変数の値を時事刻々とチェックできます。特別に監視しておきたい変数は中段の WATCH の所で追加できます。（いまいち使い分け方を分かっていないのですが、VARIABLES には自分が見たい変数以外も並ぶので狭くて並べきれないから、ということでしょうか（？））
これ以上の詳しい使い方は私も知らないのですが、VSCode の公式サイトに書いてあるかな？
おすすめの情報源がある方は教えてください。
デバッガーオプション
デバッグ機能が使える所まで確認できたら、必要に応じてデバッグの為のコンパイルオプションを設定しましょう。オプションの追加によってデバッガーが指摘してくれる項目が増えます。
VSCode の setting.json で code-runner.executorMap を検索します。
例えば上で紹介した参考サイトでは
"code-runner.executorMap": {
"cpp": "cd $dir && rm $dir/$fileNameWithoutExt && clang++ -std=c++17 $fileName -o $fileNameWithoutExt && $dir/$fileNameWithoutExt",
}
という項目がありました。（上述したように環境によっては rm $dir/$fileNameWithoutExt && を消さないといけないかもしれません。）
また、tasks.json のデバッグ用の設定項目にも "args" という項目があり、-Wall といったオプションが書かれています。（Wall は壁ではなく Warning all という意味。ただし Wall と書けば全て教えてくれるという訳でもないみたい。）
これらのどちらか又は両方に必要に応じてデバッグの為のコンパイルオプションを追記します。
上記参考サイトのように設定した場合は、前者の編集で通常実行時に関する指定ができ、後者(tasks.json)の clang++ 関連の編集で lldb によるデバッグ実行時に関する指定ができます。
以下のツイートのように色々なオプションがあるようですね。私は理解できていませんが、いくつかツイートを見ると -Wall -Wextra -Wshadow 辺りがおすすめされているようです。
デバッグ用の警告オプションをつけると以下のようなミスにも気付きやすいとのこと。（このリプライを頂いた時点だとデバッガーをどう使うのか分かりませんでした。）
「C++ デバッグ用 コンパイルオプションまとめ」等で検索しても期待したほど解説記事がでてきませんでしたが、以下のサイトが参考になりそうです。
デバッグ・バグ予防の一般論
デバッグ関連で気をつけたい事について参考になるサイトです
AtCoder 等への自動提出や AtCoder Library 関連
これもこのサイトのやり方が基本的に参考になりました。
こちらも参考になります。
AtCoder Library は AtCoder の公式サイト(github)からダウンロードし、公式サイトの説明の通りの場所に置けば大丈夫でした。ホームディレクトリに置いてパスを通しました。
AtCoder Library と自動提出の話は本来は直接関係無いですが、他のサイトでもまとめて説明されていたりするので、ここでも次に自動提出の話に入ります。（AtCoder Library を使っての自動提出に対応させる為です。）
上記１つ目のサイト、およびそこで引用されているサイトを参考に、atcoder-cli に対応する設定を VSCode に書き込み、atcoder-cli と online-judge-tools をインストールします。これらをインストールする時に追加でインストールが必要なものもありますが、atcoder-cli 公式サイト
のインストールガイドの通りに実行します。atcoder-cli が別のツール online-judge-tools
の機能を使うという仕組みです。
さて、私が遭遇した初心者的エラーはこちらです。
(追記: oneline-judge-tools の公式ページに online-judge-tools のインストール方法の詳細が分かりやすく解説されています。atcoder-cliもonline-judge-toolsもそれぞれの公式ページに日本語での説明が提供されています。前者はトップページも日本語で分かりやすいです。後者の使い方ページはこちらです。日本語でサポートされているツールの開発に感謝しつつ使わせて頂きましょう。)
online-judge-tools のインストールではターミナルで --user をつけたらどう？と提案されるので pip3 install online-judge-tools --user とすればインストールできました。一方、atcoder-cli のインストールは sudo をつけて sudo npm install -g atcoder-cli で実行できました。sudo2は知っていたけど、インストールガイドに明示的に書いてなくてアレ？ってなってしまいました。
普通にインストールできれば使えるはずですが、私の場合 python のプリインストールされているもの（？）と Anaconda のバージョンがあるせいか（？）パスの指定で少し手間取りました。
初心者つまずきポイント３ （連携ツールのエラーの原因の探索）
atcoder-cli の機能／エラーなのか online-judge-tools の機能／エラーなのかよく分からない。
このエラーは言語がマッチしないということなので VSC, atcoder-cli, online-judge-tools などの設定全体のどこで言語の設定をしているかを把握しないといけません。
結論から言うと最も参考にさせて頂いたサイト
の tasks.json の -l 4101 の部分が現在の AtCoder の言語番号とずれてしまっていたのが原因のようです。（仮に AtCoder が気まぐれで今日言語番号を１ずつずらしたらコンパイルエラーになってペナルティーを貰ってしまいますね…。）
この 4101 を C++ (GCC 9.2.1) の場合は 4003 に設定し直せば提出もできるようになりました。
なんかまだ警告が出るのだけれど、とりあえずエラー無しで使えるようにはなりました。
テンプレートファイル
atcoder-cli を使う上でテンプレートファイルを設定しておくと便利です。既に紹介したサイトの通りに設定した上で、テンプレートファイルを main.cpp という名前で acc config-dir とした時に表示されるディレクトリの cpp フォルダに入れておくと使えます。（設定を変えれば main.cpp という名前にする必要はありません。詳細は `atcoder-cli' チュートリアル]及び上記参考サイトを参照。）
おまけ: Python 等
Python の環境構築もしてみました。C++ より簡単です。やった事と言えば、VSCode で Python 用の拡張機能を入れた事くらいですかね。（自動提出までは設定してません。）Anaconda distribution の Python を使う場合は Anaconda prompt から code . せよと公式サイトに書いてありますのでその点を注意するくらいかな。
ただ、標準入力をターミナルから受け取るのが、デバッグモードの時しかできません。これはそういう仕様なのでしょうか。
ところで Wolfram Language って VSCode で使えるんでしょうか？
謝辞
環境構築で困っている時に助言を下さったえびちゃんさんに特に感謝いたします。おかげで環境構築ができました。また、質問をさせて頂いたどきんさんと、online-judge-tools 関連で助言を下さったkimiyuki＠うさぎ(🐇マーク)さんに感謝いたします。angel as ㌵㌤の猫さんには、コンパイラの警告オプションを教えてくださった事に感謝いたします。この時コードの間違いも指摘して頂きました。この流れで、環境構築と直接関係ありませんが、私が競プロ用Twitterを開設した後初めて質問ツイートに答えて下さったこたつがめさんへの感謝も忘れられません。
また、私が参考にさせて頂いた各種サイトの執筆者や各種ツールの developer の皆様に感謝いたします。
えびちゃんさんのサイトは C++ 初心者（以上）に有益です。環境構築と直接は関係ありませんが、デバッグをしたいという目的と通じるのでここで紹介します。
また kimiyuki＠うさぎ さんに紹介頂いたツールを紹介します。
環境構築中に参考にしたサイトのリスト
全ては記載できておりません。