【Git】VSCodeを使って綺麗なコミットログを作る

## はじめに

[綺麗なコミットログを作りたいときの git テクニック - Qiita](https://qiita.com/getty104/items/a9b56f30744dfe52a05f)

上記の記事に触発され、この記事の内容を vscode から使う方法を紹介します。

vscode の extension が提供する API を使うため、ある程度自由度は減ります。
しかし、コマンドを覚える必要がないので、(私みたいな) ずぼらな人には役に立つかもしれません。

## 準備

適当にディレクトリを作って vscode で開き、適当なファイルを作成後、4 回ほどコミットします。

```sh
mkdir git-test
code git-test
```

```sh
git init
touch readme.md
echo 1st commit >> readme.md
git commit -a -m "1st commit"
echo 2nd commit >> readme.md
git commit -a -m "2nd commit"
echo 3rd commit >> readme.md
git commit -a -m "3rd commit"
echo 4th commit >> readme.md
git commit -a -m "4th commit"
```

`git log`は以下のとおりです。

```sh
git log --oneline
# 0caea04 (HEAD -> master) 4th commit
# e4077ab 3rd commit
# db8f5e9 2nd commit
# 3c98dc7 1st commit
```

## `git rebase -i`で作業中のコミットを全て一つのコミットに squash する

[Gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)の[Interactive Rebase Editor](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#interactive-rebase-editor-)を使用します。

### コマンドパレットから行う

1. `Ctrl+Shift+P`で[コマンドパレット](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette)を開く
2. `GitLens: Git Rebase...` をクリック
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/dd752236-4469-6402-5f86-5850f1fad7ba.png)
3. `Rebase`を行うブランチを選択 (↑↓ で選択可能)
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/b8892eb6-1b29-9743-950a-f2fd136e68da.png)
4. `Rebase`を行うコミットを選択
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/a3929df9-5e4c-f631-0099-6be585405dca.png)
   - [こちら](https://qiita.com/tsuuuuu_san/items/f708a9f7ea8ab8eb6945#%E3%83%AA%E3%83%99%E3%83%BC%E3%82%B9%E6%8C%87%E7%A4%BA%E6%9B%B8%E3%82%92%E4%BD%9C%E6%88%90)にあるように、リベースしたいコミットの 1 つ前を選択する必要がある
   - 今回は`1st commit`を選択
5. `Rebase`の方法を選択する。今回は`git rebase -i (--interactive)`を行いたいので`Interactive Rebase`を選択
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/26b7c6c0-c8bf-3cf9-ef38-8653359e9fae.png)
   - 以下のコマンドが実行される
   - `git -c sequence.editor="code --wait --reuse-window" rebase --interactive 3c98dc7dc320bf2588b7ff29db087504b20df90a`
6. 以下のようなエディタ (タブ) が立ち上がる
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/ccc1343a-33c9-cdf6-76e5-ba1c97f0cc97.png)
7. 通常の`git rebase -i`と同じようにそれぞれのコミットに対してアクションを選択する
   - `SWITCH TO TEXT`をクリックすると、テキストベースでも記述可能
   - 今回は以下のように選択した (4th, 3rd を 2nd に統合し、2nd のコミットメッセージを変更する)
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/12829cf6-b2df-cf4a-a054-841f4d24ccd9.png)
8. `START REBASE`をクリック
   - `reword`を選択した場合、以下のようなタブが開く
   - 任意のコミットメッセージに変更し、`Ctrl+W` or x をクリックでタブを閉じる (今回は`2nd, 3rd, 4th commit`に変更)
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/4130b57f-a6e0-fc89-bf46-4aa44dd30a2c.png)
9. `Rebase`が実行される

`git log`でも Rebase が実行されていることが確認できます。

```sh
git log --oneline
# 4d1ea82 (HEAD -> master) 2nd, 3rd, 4th commit
# 3c98dc7 1st commit
```

差分もこの通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/7865e9bc-7727-f379-1b20-b42d6dc792c5.png)

### サイドバーから行う

Rebase のターゲットにしたいブランチ、コミットを、サイドバーから選択することも可能です。

1. `Source Control` (`Ctrl+Shift+G G`)の COMMITS の任意のコミットで右クリックし、`Rebase Current Branch onto Commit...`を選択
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/d1b15244-d5d3-4ea2-633d-3443c2f7fe56.png)
2. [コマンドパレットから行う](#コマンドパレットから行う)の`5.`と同じパレットが表示されるので、同様に作業する

## `git reset HEAD~`で一度コミットを取り消す

こちらは簡単に実行できます。

1. `Ctrl+Shift+P`でコマンドパレットを開く
2. `Git: Undo Last Commit`を選択 (`undo`とかで検索すると簡単に見つかります)

(ログを見ると、 `git reset --soft HEAD~` コマンドが実行されてました)

## `git add -p`で作りたいコミットごとに変更を stage にあげていく

1. Stage にあげたい行を選択する
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/094048c0-1d91-55a9-0a0b-ff9c522871a7.png)
2. `Ctrl+Shift+P`でコマンドパレットを開く
3. `Git: Stage Selected Ranges`を選択
4. 選択した行のみ Stage に移動する (同様に`Revert`も可能)
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110860/0dd46851-da27-4ac8-b012-cc3f617cf1ab.png)

## おわりに

よく使うコマンドは､ショートカットに登録しておくとさらに捗ります！！

良記事を書いてくださった @getty104 さんに感謝を。
皆様のご参考になれば幸いです。