競プロ用のVSCode環境設定(Win＆Mac併用)

#0. はじめに
本記事の対象者は以下を想定しています。

- 競プロに興味があるのでC++の開発環境を構築したい。
- WindowsとMacで同様の開発環境を手に入れたい。
- Visual Studio Code(通称：VSCode)を使ってみたい。

#1. 必要なソフトウェアの導入
1.1. 以下サイトからVSCodeをダウンロードする。
https://code.visualstudio.com/download

1.2. ダウンロードしたVSCodeを起動する。
※Macでは以下のように表示され、起動できない場合がある。
<img width="532" alt="スクリーンショット 2019-10-16 0.28.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/a1edd61c-8c59-2fda-743b-fd732fd0da1c.png">
 起動するためには「システム環境設定」＞「セキュリティとプライバシー」から「このまま開く」ボタンを押す。
<img width="780" alt="スクリーンショット 2019-10-16 0.28.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/bb39d89d-b825-bbd4-1885-cc30e9510b88.png">
#2. VSCodeで拡張機能の導入
本稿ではC++の開発環境を構築するため、以下の拡張機能を導入する。

- C/C++ (必須)
- CodeLLDB (Macのみ推奨：vector型などの内部の値をデバッグするために必要)
- indent-rainbow (任意：インデントに色を付ける)
- Japanese Language Pack (任意：VSCodeを日本語化する)
<img width="302" alt="スクリーンショット 2019-10-16 1.24.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/b4bcbf56-0590-9c3f-186b-92f68262e879.png">

※Windowsの場合、mingw-w64 (Linux標準のC/C++コンパイラをWindows上で動かすツール) をインストールする。
ご参考: https://qiita.com/yut-nagase/items/9bb65481685f6b8002de

※Macの場合、C/C++拡張機能をインストールすると以下画面が表示されるので、clang (gcc互換のC/C++コンパイラ) をインストールする。
<img width="573" alt="スクリーンショット 2019-10-16 0.33.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/b906d150-7442-7f2c-253c-498ff6b189d4.png">
#3. VSCodeワークスペースの導入
3.1. Win＆Mac併用のVSCodeワークスペースを取得する。
https://1drv.ms/u/s!AgYlW9NKJ6gjjD7dbGCgjjm3xALW?e=MnCeQ2
<img width="730" alt="スクリーンショット 2019-10-16 1.47.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/c2f6dd55-8732-e589-fe56-b6e6ad36031a.png">
3.2. ZIPファイル解凍する。(Macの場合はダウンロードと同時に解凍されるため不要)
3.3. VSCodeを起動し、メニューから「ファイル」＞ 「ワークスペースを開く」を選択する。
<img width="319" alt="スクリーンショット 2019-10-16 1.50.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/6f626ecf-c035-d512-51f4-d6d6bcf818ba.png">
3.4. ワークスペースに含まれる「vs.code-workspace」を指定する。
<img width="932" alt="スクリーンショット 2019-10-16 1.53.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/ab298159-1f99-061a-ed7c-a40223d7250b.png">
3.5. 以下のようにワークスペースが開かれる。
<img width="932" alt="スクリーンショット 2019-10-16 1.54.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/36180db8-e85e-d585-009a-d78f1b91745c.png">

#4. 【Macのみ】 bits/stdc++.h を導入
4.1. Macの場合、「bits/stdc++.h」という全てのヘッダーファイルを一括includeするものが含まれない。この問題を解決するため、以下からヘッダーファイルを取得する。
https://gist.github.com/reza-ryte-club/97c39f35dab0c45a5d924dd9e50c445f
4.2. 上記の「Raw」ボタンを右クリックし、「リンク先のファイルをダウンロード」を選択する。
<img width="1170" alt="スクリーンショット 2019-10-16 0.44.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/aa138fca-f2c1-2feb-34c9-c84c326abc31.png">
4.3. Launchpadを起動し、「その他」＞「コンソール」を起動する。
4.4. コンソールに以下コマンドを入力する。
※sudoコマンド入力時にパスワードが必要になる。

```
cd /Library/Developer/CommandLineTools/usr/include/c++/v1/
sudo mkdir bits
cd bits
sudo cp /Users/【ユーザー名】/Downloads/stdc++.h .
```
#5. 【Winのみ】VSCodeのコンパイラの実行パスを修正
5.1. VSCodeのワークスペースを開き、「.vscode」＞ 「c_cpp_properties.json」を開く。
5.2. Win32の「compilerPath」をmingw-w64のインストール先に変更する。
<img width="1083" alt="スクリーンショット 2019-10-16 2.29.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/40dd2d04-08a1-544f-3690-70a04394c09b.png">

#6. C++ソースコードをコンパイル＆実行
6.1. ワークスペースに含まれる「abc001a.cpp」をクリックする。
<img width="981" alt="スクリーンショット 2019-10-16 3.10.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/1a4eba02-9a40-7a9f-55be-fc26a53d11f2.png">
6.2. VSCodeの左側の虫アイコンをクリックし、デバッグ画面にする。
<img width="981" alt="スクリーンショット 2019-10-16 3.11.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/cd1dfdac-9724-f62e-ab7b-2e1ff340e8d9.png">
6.3. デバッグの初期設定は「Launch(Win)」になっている。Macの場合、「Launch(Mac)」に変更する。
6.4. デバッグ右の再生ボタンをクリックする。
6.5. 下のタブを「ターミナル」に切り替え、以下文字を入力してEnterキーを押す。

```
1 3
```

6.6. 「1 - 3」の演算結果である「-2」が出力される。
<img width="981" alt="スクリーンショット 2019-10-16 3.12.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/6dbbe734-0e21-be52-717a-af20a68b3ccf.png">
以上で設定完了です。

#7. おわりに
簡単に説明するため、VSCodeの詳しい設定などは省いています。
自分なりに使いやすい設定を見つけて、快適な競プロ生活を楽しんでください。