GitLab × VScodeを連携させたときのメモ

#はじめに
初めてGitLabとVScodeを連携させたときはスムーズに出来たのに、別のPCでやったら出来なくて苦労したので忘れないようにメモしておきます。
これから初めてVScodeとGitLabを連携させる人や、あんまり詳しくないよって人向けです。

#環境
Windows 10 64bit
VScode
Japaneseキーボード設定

#参考サイト
GtiLabとVScodeを連携させたときに、こちらのサイトを参考にさせて頂きました。
本記事でも引用させて頂いています。
どちらも見やすく分かりやすく、参考にしやすいです。
・[Visual Studio Code（VS Code）とGitLabを連携させる](https://create-fecundity.com/programming/visual-studio-code-gitlab-introduction/#toc5)

・[VisualStudioCodeとgitlabを使ってバージョン管理をしてみた備忘録](https://doubleloop.tokyo/visual-studio-code/#Visual_Studio_Codegitlabcom)

#1. GitLabとGitとVScodeのインストール
**1. GitLabとGit**
たくさんの参考になるサイトがありますが、こちらのサイトを参考に私はやりました。
[Visual Studio Code（VS Code）とGitLabを連携させる](https://create-fecundity.com/programming/visual-studio-code-gitlab-introduction/#toc5)

**2. Gitをインストールするときの選択肢について**
Gitのバージョンによって表示されている文字やチェックボックスの数が違いますが、文章をよく読んで正しいラジオボタンを選んでください。
チェックボックスが現時点で1つ増えていました。最後に1つ追加されていたので、私はチェックを付けました。

**3. VScode**
こちらの公式サイトからダウンロード出来ます。
https://code.visualstudio.com/
インストール中に「追加タスクの選択」が表示されて、チェックボックスが出てきたら、全部にチェックをつけておくと良いかなと個人的には思います。

#2. OpenSSHのダウンロードと環境変数の設定
``1-1.``と同じサイトを参考に、OpenSSHのダウンロードと環境変数の設定を行います。
詳細に書かれていて分かりやすい…!
[Visual Studio Code（VS Code）とGitLabを連携させる](https://create-fecundity.com/programming/visual-studio-code-gitlab-introduction/#toc5)

#3. GitとGitLabで使う公開鍵を作成する
**1. VScodeのターミナル(PowerShell)を起動**
VScodeを起動してCtrlと@を押してターミナルを起動します。画面した半分にターミナルが起動したら、右にPowerShellと書いてある想定で進めます。
もしPowerShellじゃない場合は、Google先生で検索してPowerShellに切り替えると、今後も同じ画面で見てもらえます。
検索キーワード例「VScode ターミナル PowerShell 切り替え」

**2. GitにGitLabのユーザー情報を覚えさせる**
GitLabにサインインするときに、GitHubや他のサービス情報を使ってサインインしている場合、エラーが起きるかもしれないらしい…
なので、念の為にGitLabのUser Settingからメールアドレスとパスワードを設定しておきます。

1行ずつでもまとめてでも良いのでVScodeターミナルにコピペしてEnterします。
"Sample123" -> GitLabユーザー名にして、"で囲ってあげます。
"sample555@gmail.com" -> GitLabに登録しているメールアドレスにして、"で囲ってあげます。

```powershell:Terminal-PowerShell
git config --global user.name "Sample123"
git config --global user.email "sample555@gmail.com"
git config --global core.quotepath false
git config --global core.editor "code --wait"
```

　
**3. SSH Keyの作成**
表示しているディレクトリを必要に応じて移動します。
User99というユーザー名にログオンしている場合は```C:\Users\User99\```となるようにします。表示されているディレクトリがログオンユーザー名ではない場合は、下記をコピペしてディレクトリを移動してください。
ユーザー名にスペースが入っている場合は```"C:\Users\User　99\"```のように、"で囲ってあげます。
なんだか分からない場合は、エクスプローラーを使って、Cドライブから掘っていけば分かります。

```powershell:Terminal-PowerShell
cd C:\Users\User99
```
　
ディレクトリの表示が```PS C:\Users\User99>```になったら、次に```.ssh```という新しいディレクトリを作成します。
エクスプローラーで確認しても見れるようになっているはずです。
もし見れなければ、エクスプローラーの表示設定で「隠しファイル」を見れるようにしてみてください。

```powershell:Terminal-PowerShell
mkdir .ssh
```
　
```.ssh```ディレクトリが作成されたら、そこに移動します。

```powershell:Terminal-PowerShell
cd C:\Users\User99\.ssh
```
　
```.ssh```に公開鍵と秘密鍵を作成します。
先程と同じくsample555@gmail.com -> GitLabに登録しているメールアドレスですが、今回も"で**囲みます。**

```powershell:Terminal-PowerShell
ssh-keygen -t rsa -f id_rsa_for_gitlab -b 4096 -C "sample555@gmail.com"
```

　
こちらの表示がされたらなにも入力せずにEnterを押します。
個人で使うにはパスワードなくてもいいと思うので、設定しません。

```powershell:Terminal-PowerShell
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```
　
下のような結果が返ってきます。```The key fingerprint is:```の下の```SHA123:nijgangaehoii66w0an3w22nn sample@gmail.com```はメールアドレス以外適当に入力しています。

```
Your identification has been saved in id_rsa_for_gitlab.
Your public key has been saved in id_rsa_for_gitlab.pub.
The key fingerprint is:
SHA123:nijgangaehoii66w0an3w22nn sample@gmail.com
The key's randomart image is:
+---[RSA 4096]----+
|                 |
|       . .       |
|      * o .      |
|   o B B o .     |
|  . O B S +      |
|  .+ O + + .     |
|  ooO =.o o o    |
|  EO.= +oo +     |
|  +o*oo...o      |
+----[SHA256]-----+
```

　
**4. Git用のconfigファイルを作成する**
コマンドプロンプトを起動します。ターミナルで実行すると、BOMがくっついてしまい、後々エラーになったのでコマンドプロンプトでやります。
コマンドプロンプトは、Winキーを押して、```cmd```とうったら出てくるので、右クリックして**管理者として実行**を押してください。
個人的に管理者のが無難な気がしています。

管理者として実行するとディレクトリの位置が```C:\WINDOWS\system32>```になっているかと思います。
こちらのコマンドを入力して、ディレクトリ位置を設定します。
2回目ですが、```User99```は自分のログオンしているユーザー名です。

```console:cmd
cd C:\Users\User99\.ssh
```

　
これでディレクトリの表示がこちらになったと思います。

```console:cmd
C:\Users\User99\.ssh>
```
　
```.ssh```ディレクトリ内に空の```config```というファイルを作成します。
下のコマンドを入力して実行してください。

```console:cmd
type nul > config
```
　
```config```ファイルの中にこちらの情報を書き込みます。
1行ずつでもまとめてでも良いのでコマンドプロンプトにコピペしてEnterです。

```console:cmd
echo Host gitlab.com >> config
echo User git >> config
echo Hostname gitlab.com >> config
echo IdentityFile ~/.ssh/id_rsa_for_gitlab >> config
echo IdentitiesOnly yes >> config
```
　
#4. 公開鍵をGitLabに登録してSSH Keyを設定する
**1. 公開鍵をコピーする**
VScodeのターミナルに戻って下のコマンドを実行すると、作成した公開鍵が表示されます。
```ssh-rsa```から始まりメールアドレスで終わる長い文字です。```ssh-rsa```からメールアドレスまで全部コピーします。

```powershell:Terminal-PowerShell
type id_rsa_for_gitlab.pub
```
　
**2. 公開鍵をGitLabに登録する**
ブラウザでGitLabを開きます。右上のユーザーアイコンをクリックして、**Edit profile**をクリックします。
画面左に**SSH Keys**というメニューがあるのでクリックします。画面左に見つからない場合は、サイドメニューがたたまれているので、左下にある```>>```をクリックしてメニューを展開すると分かりやすいです。

Add an SSH keyという入力フォームが表示されるので、**Key**と書いてある大きいフォームにコピーした公開鍵を貼り付けます。
**Title**は分かりやすいように自由に設定してください。
**Expires at**は都合に合わせて指定してください。特に期限を設ける必要がなければ指定しません。
**Add key**をクリックして作成完了です。少しするとGitLabに登録したメールアドレスに、SSH Keyが設定されたことをお知らせするメールが来ます。
特にそれに対してすることはありませんが、次のステップ以降はメールが届いてから実行してください。

**3. GitLabに接続出来るか確認する**
VScodeのターミナルに戻ります。
こちらのコマンドを入力、実行します。

```powershell:Terminal-PowerShell
ssh -T gitlab.com
```
　
こういった表示が出たら```yes```と入力してEnterします。
```'gitlab.com 12.123.456.654'```の中のIPアドレスは適当です。

```console:Terminal-PowerShell
The authenticity of host 'gitlab.com 12.123.456.654' can't be established.
ECDSA key fingerprint is SHA256:HbW3g8zUjNSksFbqTiUWPWg2Bq1x8xdGUrliXFzSnUw.
Are you sure you want to continue connecting (yes/no)?
```
　
こういったものが表示されたら成功です。
2行目の```Connection closed by 12.123.456.654```が表示されない場合でも気にしません。

```console:Terminal-PowerShell
Warning: Permanently added 'gitlab.com,12.123.456.654  (ECDSA) to the list of known hosts.
Connection closed by 12.123.456.654
```
　
念の為もう一度```ssh -T gitlab.com```を実行して、```Welcome to GitLab, @user```と表示されたら成功です。
```@User```は自身のGitLabユーザー名です。

#5. VScodeにGitLabを連携させる
ここからはこちらのサイトを参考にしました。
[Visual Studio Code（VS Code）とGitLabを連携させる](https://create-fecundity.com/programming/visual-studio-code-gitlab-introduction/#toc5)

**1. GitLabのHTTPS URLをコピーする**
ブラウザでGitLabを開きます。
VScodeに同期させたいリポジトリを開きます。リポジトリがなかったり、新規で作りたい場合は作ります。
既にリポジトリがある場合は、**Repository**ページの右上に```Clone```ボタンがあるのでクリックします。
**Clone With SSH**と**Clone with HTTPS**の2種類が表示されるので、**Clone with HTTPS**をコピーします。
新規でリポジトリを作った場合は、作成後の画面左上に```Clone```ボタンが表示されます。

**2. GitLabリポジトリをローカルに取得する**
VScodeのターミナルを開きます。
こちらのコマンドを参考に実行して、GitLabリポジトリを取得したいディレクトリを選びます。
選んだディレクトリの中にGitLabリポジトリ名と同じ名前のフォルダが作成されるので、その中にコードを保存していくことになります。
保存先ディレクトリは```Desktop```でなくても大丈夫です。事前に作成しておいたフォルダなら何でも大丈夫です。
例えば```Desktop```の中に```Dev```というフォルダを作った場合は、下のようになります。

```powershell:Terminal-PowerShell
cd C:\Users\User99\Desktop\Dev
```

GitLabで「Two-Factor Authentication」を有効にしているかどうかで次の手順が変わります。
**GitLabで「Two-Factor Authentication」を有効にしていない場合**
ディレクトリを指定したら、下のコードを実行します。
```https://gitlab.com/User/directory.git```は、1.でコピーしたHTTPS URLです。

```powershell:Terminal-PowerShell
git clone https://gitlab.com/User/directory.git
```
実行後、Windowsセキュリティが表示され、GitLabの`User name`と`Password`が求められるので入力します。

**GitLabで「Two-Factor Authentication」を有効にしている場合**
ブラウザでGitLabを開き、右上のユーザーアイコンをクリックして、Edit profileをクリックします。
画面左に**Access Tokens**というメニューがあるのでクリックします。
Add a personal access tokenという入力フォームが表示されるので、
**Name**に好きな名前を入力し、必要に応じて**Expires at**を設定します。
**Scopes**を用途に合わせて設定しますが、本記事上は**read_repository**と**write_repository**にチェックを入れて、
**Create personal access token**をクリックします。
画面上部に**Your new personal access token**が表示されるので、閉じたり画面更新をせずに置いておきます。
ディレクトリを指定したら、下のコードを実行します。
1.でコピーしたHTTPS URL`https://gitlab.com/User/directory.git`の中に`oauth2:xxxxxxxxx@`を追記します。
`xxxxxxxxx`は先程生成したaccess tokenです。

```powershell:Terminal-PowerShell
git clone https://oauth2:xxxxxxxxx@gitlab.com/User/directory.git
```

**3. 新たなファイルを作成する**
VScodeの画面左にある**エクスプローラー**をクリックして開きます。
初めてVScodeを使う場合は、**フォルダの選択**ボタンが表示されるので、クリックしてフォルダを選択します。
選択するフォルダは```2.```で指定したフォルダにします。
フォルダを選択したあと、エクスプローラー内で右クリックをします。
```新たなファイル```というメニューあるので、クリックします。
ファイルが作成されて、ファイル名を入力できるようになるので、適当にファイル名と拡張子を入力してEnterを押します。
例えば```test.txt```のようなものです。
作成した```test.txt```をダブルクリックして開きます。VScode上で```test.txt```が開かれるので、適当に文字を入力して```Ctrl + S```を押し保存します。

**4. VScodeでワークスペースとソース管理プロバイダーを設定する**
次に、画面左にある**ソース管理**をクリックします。◯3つに線がつながっているマークです。
VScodeソース管理画面に``有効なソース管理プロバイダーがありません。``と表示されていたら、ひし形の**リポジトリの初期化**マークを押してください。
フォルダ選択を促されるので、```2.```で指定したフォルダにします。
もし```このブランチを公開しますか？```と聞かれたら```OK```を押します。

**5. GitLabリポジトリにコードを同期する**
```2.```を行うとソース管理アイコンに数字が表示されます。変更があったことを知らせるマークです。
コメントフォームになんでも良いのでコメントを入れて、```Ctrl + Enter```を押します。
```すべての変更を自動的にステージして、直接コミットしますか？```と聞かれたら、```Yes```と答えてください。
最後に、VScode画面上左下にある```同期マーク```をクリックします。矢印が2つ描いてあり、円形になっているものです。
```同期マーク```をクリックすると、同期していいか確認されるので```OK```と答えてください。

**6. 同期の確認をする**
``3.``を行ったら、ブラウザでGitLabを開きます。同期先に選んだリポジトリに```test.txt```が表示されていれば成功です！

#6. うまくいかない…
**1. VScodeターミナルやコマンドプロンプトでエラー出る。**
・ディレクトリが間違っていないかを確認します。
・表示されているエラーを検索して調べます。
・作成したファイルの中身や登録したデータが間違っていないか調べます。
　```config```ファイルの中身を見たいなら、こちらのコマンド。

```powershell:Terminal-PowerShell
Get-Content C:\Users\User99\.ssh\config
```
　
　```git config --global```で設定したデータを確認したいなら、こちらのコマンド。

```powershell:Terminal-PowerShell
cat ~/.gitconfig
```
　
　```リポジトリ```を確認したいなら、こちらのコマンド。

```powershell:Terminal-PowerShell
git remote
```
　
**2. VScodeで同期マークじゃなくて雲のマーク(変更の発行)が出る**
・リモートリポジトリ(GitLab)で取得したフォルダがVScodeで選択されていないので、```5. VScodeにGitLabを連携させる```をやり直してみます。

#7. その他
**VScodeアドオン**
・[VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)

**Gitコマンド**
・[【Git】基本コマンド](https://qiita.com/konweb/items/621722f67fdd8f86a017)

#8. さいごに
VScodeターミナルいったりコマンドプロンプトいったりしてますが、PCによってはターミナルでconfig作ったときにBOMが含まれていて、エラー起こしていたので、それを回避するひとつの手段としています。
PC環境によって微妙に違っていて、結構時間かけていました…
いろいろサイトを見て複数パターン試しましたが、結局は発生したエラー内容見て、それを解決すべきだなと改めて感じた作業でした。
BOMとかGitコマンドの理解とか、Gitコマンドで入力したファイル内容をひとつずつ確認するとか、初歩的なことを飛ばさずやった方が近道でした。