VSCodeとgit（gitHub）を連携してみた


gitについてあまり知らなかったため、練習も兼ねて自己学習で作成したソースコードをgit（gitHub）で管理してみようと思い、gitの使用方法やVSCodeとの連携方法について調べました。
初学者のため至らぬ点が多いと思いますが、調べた内容についてまとめておきます。何かの参考になったら嬉しいです。

ここでは以下の内容について触れていきます。
・gitのインストール
・gitHubのリポジトリ作成
・VSCodeからgitHubにコミット、プッシュする




# gitのインストール
gitをインストールしていない場合は以下の手順でインストールします。設定は一般的なものを使用しているので、必要に応じて変更してください。
<br>
<b>① 公式サイトにアクセスし、インストールファイルをダウンロード</b>
　https://git-scm.com/

<b>② ダウンロードしたexeファイルを開く</b>

<b>③ GNU General Public License</b>
⇒ライセンス確認です。Nextをクリックして進めます。

<b>④ インストール先の選択</b>
デフォルトのままNextで進めます。インストール先を変更したい場合は選択してください。
　
<b>⑤ コンポーネントの選択</b>
Git Bashはよく使うので「Git Bash Here」はチェックしておきます。
その他ほしいものがあれば追加で選択してください。

<b>⑥ スタートメニューに入れるかどうか選択</b>
必要ない場合は「Don't create a Start Menu folder」にチェックを入れます。

<b>⑦ デフォルトのエディタを選択</b>
「Use visual Studio Code as Git’s default editor」を選択するとVSCodeのエディタをデフォルトエディタに設定できます。

<b>⑧ リポジトリ作成時の初期ブランチの名前</b>
デフォルト（Let Git decide）はmasterです。
gitHubなど、デフォルトのブランチ名がmasterからmainになったシステムもあるそうなので、その場合は変更してもよいと思います。
変更する場合は「Override the default branch name for new repositories」を選択し、設定したい名前を入力してください。

<b>⑨ パス設定</b>
デフォルト（Git from the command line and also from 3rd-party software）でOKです。windowsのコマンドプロンプトやpowershell等でもgitのコマンドが使えるようになります。

<b>⑩ HTTP通信時のツールを選択</b>
デフォルト設定（User the OpenSSL library）を選択します。

<b>⑪ 改行コード設定</b>
Windowsの場合はデフォルト設定（Checkout Windows-style, commit Unix-style line endings）でOKです。Linuxの改行コードとWindowsの改行コードを自動変換してくれます。

<b>⑫ Git Bashで使うターミナルの設定</b>
デフォルト設定（User MinTTY (the default terminal of MSY52)）を選択します。

<b>⑬ git pull実行時の操作</b>
デフォルト設定（Default）を選択します。

<b>⑭ クリデンシャル・ヘルパ設定</b>
デフォルト設定（Git Credential Manager Core）を選択します。

<b>⑮ 追加オプション</b>
デフォルト設定（Enable file system cathingにチェック）を選択します。
ファイルシステムのキャッシュを行うという追加オプションです。

<b>⑯ Gitの実験的な機能の有効・無効設定</b>
デフォルト設定（無効）を選択します。

<b>⑰ インストールが始まるので待つ</b>


# GitHubでリポジトリを作成

<b>① GitHubにアクセスしログイン</b>
https://github.com/
アカウントがない場合は登録してください（手順はここでは紹介しません）

<b>②Top RepositoriesのNewボタンをクリックする</b>
ホーム画面左側の方にあります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884610/f8c647a9-4a58-7369-66da-a51f84f4b84d.png)

<b>③ Create a new repository</b>
以下の項目を入力します。
・Owner ... 自分のアカウント（他のアカウントにしたい場合は選択する）
・Repository name ... リポジトリ名
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884610/f9abeac8-3155-a97d-6c50-71af6bf629d1.png)

<b>④ リポジトリの公開設定を選択</b>
公開するならpublic、非公開ならprivateを選択します。
今回は個人の学習で使用するのでprivateにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884610/3cee3c08-ba3f-5859-530e-9e14bb738f55.png)

<b>⑤ 初期設定</b>
リポジトリ作成時に追加するものを選択します。今回は空のリポジトリを作成します。

<b>⑥Create repositoryをクリック</b>
③～⑤の内容を入力したらCreate repositoryボタンをクリックしてリポジトリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884610/4ffcc8bf-773d-a852-56ed-1070f72dbcf7.png)




# VSCodeからコミットする
VSCodeからファーストコミットしてリモートリポジトリにプッシュする手順です。
リポジトリを作成すると連携用のコマンドが表示されるので、コピーしてVSCodeのターミナルに流していきます。


<b>①gitの改行コード設定確認</b>
1. VSCodeのターミナルで `git config --global -l` を実行
2. windowsの場合、core.autocrlf=true が表示されればOK
3. `:q` で抜ける

<b>②ローカルリポジトリ作成</b>
※カレントディレクトリはプロジェクトのフォルダにしておく

1. `git init`
ローカルに新しいgitリポジトリを作成する。実行するとカレントディレクトリに.gitディレクトリが作成される。

2.  `git add 【ファイル名】`
GitHubのコマンドではREADMEファイルをaddするよう指定していますが、ほかに登録したいファイルがある場合はそのファイルの分もaddコマンドを実行してください。
すべてのファイルを登録する場合は `git add .` を実行します。
※前述で確認した改行コードの自動変換設定ができていると、LFをCRLFに変換するよという警告が出ることがあります。システムが自動で統一してくれているので、無視してOKです。

3. `git commit -m "first commit"`
addでインデックスに登録したファイルをコミットします。
-mはコミットメッセージを設定するオプションです。

4. `git branch -M main`
ブランチを強制的にmainブランチに切り替えます。
既にmainブランチにいる場合は何も起こりません。

<b>リモートリポジトリと連携</b>
1. `git remote ～`
これでローカルとリモートのリポジトリが紐づけられるようになります。

2. `git push～`
ローカルリポジトリの状態をリモートリポジトリにアップロードします。



# 補足
## VSCodeでgitコマンドが使えない場合の対処法

<b>① gitのエディタを確認</b>
gitインストール時のエディタ設定がVSCodeになっていない可能性があるので確認します。gitbash等、gitコマンドが使えるところで以下のコマンドを実行して確認してください。
`$ git config --global core.editor`

実行結果に `code --wait` が表示されていればOKです。
・表示される→次の手順へ

・何も表示されない
以下のコマンドで設定します。
`$ git config --global core.editor "code --wait"`

・他のものが表示される
以下のコマンドで設定を変更します。
`$ git config --global core.editor "code --wait" --replace-all`

<br>

<b>②パス設定</b>
VSCodeにgit.exeのパスを設定します。

1. VSCOde左下の歯車アイコンから設定を開く
1. git.pathで検索
1. setting.jsonを開く
1. 「git.path」にgit.exeの配置場所を記載する
¥はバックスラッシュを2つ書きエスケープします。
例）`AAA￥BBB￥git.exe` → `AAA\\BBB\\` を設定
```json
{
    "git.path": "C:\\～～"
}
```
 設定後、VSCodeを再起動してください。



# VSCodeとgitHubのアカウントを連携

VSCodeのターミナルでgitアカウントを登録します。
gitHubに登録しているアカウント情報と同じものを入力してください。
```
  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"
```


アカウントが連携できていないとコミット時に以下のようなエラーが発生します。
```console
PS C:\SampleProject\***\> git commit -m "first commit"
Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '********')
PS C:\SampleProject\***\>
```


## VSCodeの拡張機能
Git Graphという拡張機能を使うと、ブランチの状態などを手軽に確認できます。

# 参考
以下のリンク先を参考にして連携しました。各項目についてより詳しく記載されています。

▼Gitインストール手順
[Git for Windows インストール （日本語訳あり）](https://qiita.com/HyunwookPark/items/d399f6959fc922a15ee1)

▼ローカルリポジトリ作成、リモートリポジトリに登録（リンク先はYouTubeの動画です）
[VSCodeでSpringBoot開発 #02.プロジェクト作成](https://youtu.be/QjxCHk2wyFs?si=r3xPgHiCTy-_s0rL)

▼Gitのエディタ設定
[VSCodeでGitコマンドを使う](https://chuna.tech/blog/software/VisualStudioCode/use-git-command-in-vscode/)

▼git.pathの設定
[Visual Studio Code で git.exe が 見つからないと言われた場合の対処](https://azriton.github.io/2017/12/18/Visual-Studio-Code%E3%81%A7git%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%89%E3%81%AA%E3%81%84%E3%81%A8%E8%A8%80%E3%82%8F%E3%82%8C%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E5%87%A6/)