VSCodeの機能で最低限必要なGit操作をしたい！

## はじめに
タイトルの通りVSCodeで最低限GitHubにあげたりとかGit関連のメモ書きです。
別ツールに移動したり、コマンドのオプションとかなんだっけーと悩まずにVSCode上で完結できるので楽になります。

一応コマンドでの操作と比較しながら見ていきます。
## そもそもVSCodeでGit周りを触るには？
サイドバーにある分岐してる感じのマークがありますが、そこがソース管理の場所です。
![01.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/0c62bd30-d0ab-f07a-59f7-0678ee96bc53.png)
Gitに関する操作は大体ここからできます。ショートカットキーもあり`Ctrl+Shift+G`でも開くことができます。
## Gitコマンド色々
### init
Gitリポの初期化

```:コマンド
$ git init
```
VSCodeだとこんな感じ
![02.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/0b4eb91d-43f5-e127-c4fe-987e560343a9.png)
このボタンを押せばリポジトリの初期化ができます。
### add
変更したものをインデックスに追加する

```:コマンド
 $ git add hoge.txt
```
VSCodeでは変更したファイルはソース管理の部分に一覧がでます。
![03.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/2b9e6e51-2932-bace-8831-0b99c60014a2.png)
`U`と出てるのが今まで存在しなかったファイル、`M`は変更を加えたファイル、`D`と出てるのがなくなった消えたファイルです。

一括でインデックスに追加するなら変更ってところにマウスオーバーすると、`+`マークが出てくるのでそれを押せば全てインデックスに追加できます。
![04.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/497562bf-3173-f143-dc09-3133b567f382.png)

個別に追加するなら同じようにファイルにマウスオーバーすれば一括でのと同じく`+`マークが出てくるのでそれで個別追加ができます
### commit
インデックスに追加されたファイルをコミットする

```:コマンド
$ git commit -m "コメント"
```
これもソース管理からコミットしましょう
![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/441588f0-4a85-bb89-9665-778cec93857c.png)
上に入力欄が出てくるのでそこにコミットメッセージを入力して上のチェックマーク✓を押せばコミットできます。
### status
前と比べてどこが変更されてるか

```:コマンド
$ git status -s
```
これについては特に操作が必要というわけではなく、常にファイル一覧に表示される。
![7.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/ac0e9baa-eef7-2ef9-7312-a779b8ebb196.png)
`U`と出てるのが今まで存在しなかったファイル、`M`は変更を加えたファイル。
### log
コミット履歴が確認できる。`--graph`をつければツリー状？になる。

```:コマンド
$ git log --graph
```
VSCodeでは同等の機能のものはデフォルトではないので以下の拡張機能を入れよう。
[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204605/60b19af7-f302-3985-7836-85bb0dc725f8.gif)
)
![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204605/6ea3c6ca-8217-145a-c188-fea0d72ff5c0.gif)


### branch, checkout
ブランチを作ったり確認したり消したり。
作業ブランチを切り替えたり。

```:コマンド
$ git branch ブランチ名
$ git branch
$ git branch -d ブランチ名
$ git checkout ブランチ名
```
上からブランチの新規作成、今あるブランチの確認、そのブランチの削除、そのブランチに作業ブランチを切り替え

VSCodeでは左下に`master`となってる部分があると思うのでそこをクリック。
![8.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/2eebc5d4-d216-9728-1f4f-33770dea819c.png)

そうすると上部に下記みたいなのが出てくるので、ここからブランチの切り替えや新しいブランチの作成ができます。
![09.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/32f90eea-f635-d3e1-b112-8e34e754c108.png)
ブランチの切り替えならそのまま切り替えたいブランチ名をクリックすればOK
新しくブランチを作るなら普通に`+新しいブランチを作成`をクリックします。
そうすると入力欄が出てくるのでそのまま作りたいブランチ名を入力してエンターすれば作れます。そして自動的に作業ブランチを作ったものに切り替えてくれます。
### remote
リモートリポジトリを追加できます

```:コマンド
$ git remote add 名前 リモートURL
$ git remote remove 名前
```
これは特にVSCodeで操作できるかが確認できてないです。
### push, pull
Gitの変更内容をリモートリポジトリにも反映させる
リモートリポジトリに変更をローカルのGitにも反映させる

```:コマンド
$ git push
$ git pull
```
VSCodeではソース管理の`…`を押すと下記みたいなのが出てきます。
![10.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/4a66eb42-fe21-86f0-dfd0-f8bd4f2ad21f.png)
ここからプッシュしたりプルしたりできます。

ここからじゃなくても左下のブランチ名の横にあるくるくるマークを押すことでもプッシュ、プルができます。
また、まだプル、プッシュしてないもの変更があったら数字で表示してくれます。
![11.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/d9e4663d-6555-68b9-0d66-b8bf39dd8c5c.png)
### diff
どこをどう編集したか差異がわかります。

```:コマンド
$ git diff
```
これまたソース管理からアイコンとかではなくファイルをクリックすれば下記みたいに色と記号で判別できます。
![12.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/4b43ec07-6526-b229-e665-b7b4245b8afd.png)

また、編集中から変更したところを行番号の色で判別できます。
![13.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/869b9e66-b0af-001d-c34e-09cb21856a63.png)

緑が新規追加したところ、青が変更したところ、赤が消えたところです。
### clone
リモートリポジトリをローカルにクローン（コピー）します。

```:コマンド
$ git clone リモートURL
```
これはちょっとめんどくさく、VSCode上でF1をを押すと上部に入力欄が出てくるのでそこに`clone`と入力します。
![14.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/e38d5ee5-9675-4172-b8b7-c4724455f52f.png)
そうするとリポジトリURLが求められるのでリモートリポジトリのURLを入力してエンター。
今度はクローンするフォルダをどこのフォルダに置くかを求められるので任意の場所を入力してエンター

クローンが完了すると右下にクローンしたリポジトリを開きますか？って出てくるので開きましょう。
![15.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/60b23a4b-9a04-8de1-9c92-0a26be3dea16.png)
あとは普通に作業するだけ！
### blame
特定の行がいつ変更されたかがわかる

```:コマンド
$ git blame ファイル名
```
デフォではないのでこれまた拡張機能を入れましょう。
[GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

導入したら普通にエディタ部分の書いたものの右にコミットした人とコミットメッセージ、時間が表示されます。
そこをマウスオーバーするとポップアップで下記みたいにどう変更したかなどがわかります。
![16.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/e81bd61d-8c79-9ce2-e939-3a9ba4c56f74.png)

また、右上のうっすらしたGitマーク(Toggle File Blame(ryと書いてあるやつ)を押すと
![17.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/bb18fbf2-4306-cecb-fc34-93003d556af6.png)

左にコミットメッセージと右にコードって感じの表示モードになります。
![18.PNG](https://qiita-image-store.s3.amazonaws.com/0/204605/e1a8d2ce-5a67-65e4-e7dd-3a4066f2b1f9.png)

## 最後に
とりあえずこれぐらいできれば基本的に大丈夫だろうものをまとめました。
なんか他に使えるっていうGitコマンドやミスがあればコメントもらえるとありがたいです。
## 参考
[基本的なGitコマンドまとめ](https://qiita.com/2m1tsu3/items/6d49374230afab251337)
[VSCode-GitLensはいいぞ、という話](https://ytnobody.net/2017/12/16/vscode-gitlens%E3%81%AF%E3%81%84%E3%81%84%E3%81%9E%E3%81%A8%E3%81%84%E3%81%86%E8%A9%B1/)