gitでコードを管理しながら開発をしていると、developブランチと現在のブランチの差分を確認したい場面は多いと思います。
ただ、commitしてしまうとその差分をぱっと確認しずらかたったりします。
それを解決する方法を記事にしましたので読んでみてください。
add(commit)すると差分が確認しづらい
プルリクエスト出す段階ではないけど、うまく動いているところまでcommitしたい場面はありますよね。
しかし、それをすると以下の問題が発生します。
addする前でしたら画像のように、緑線や青線で表示してくれます。

しかしaddしてしまうと、差分が緑線で表示してくれなくなります。
git add .

21行目~27行目にあった、緑色の線が無くなってしまっています。。
解決方法
拡張機能GitLensを導入しましょう!
以下、差分表示までの手順です。
VScodeの拡張機能タブで「gitlens」と検索

こちらが表示されるのでクリックしてインストールします。

インストールが終了すると、アクテビティバーに以下のアイコンが追加されます

それの虫眼鏡が付いている方をクリックして
SEARCH & COMPARE/Compare References…に進みます

Working Treeを選択します。
ここは現在のbranchの意味です。

develop(またはmasterなどのメインブランチ)を選択します。

するとサイドメニューに変更があったファイル一覧が表示されます。

先ほど変更したファイルを選択すると以下のようにcommitした内容も含めて、現在のブランチとdevelopブランチの差分を表示してくれます。

終わりに
今回はgitでコードを管理している際、commitしてしまうと差分が分かりずらくなくなる問題をテーマに記事を書きました。
ぜひ参考にして、開発に役立てていただければと思います。
他にも技術系の記事や、ゆるい内容の記事などもブログ内に載せてますので、覗いていってくださいね!
今回は以上です。