こちらの記事は カケハシ Advent Calendar 2022 の 8 日目の記事になります。

こんにちは。Musubi AI 在庫管理のフロントエンドの開発を担当している大村です。

私は普段の開発で Visual Studio Code (以下 VSCode) を使っています。 VSCode は非常に高機能なエディタで、開発に役立つ多くの機能が提供されており、その中には Git 関連の機能も含まれています。

私自身、以前は Git の CLI ツールを使っていましたが、VSCode の Git 機能を知るうちに利便性を感じることが増え、VSCode 上で操作することが多くなりました。

今回は私が便利だと感じた VSCode の Git 関連機能について紹介していきます。

この記事で紹介する内容

• (1) 選択した範囲をステージする
• (2) 直前のコミットに変更を追加する
• (3) 差分を確認する
• (4) GitHub 上でファイルを開く
• (5) コミットを並び替える

備考

• ⚠ (1)~(3) はデフォルトで使用できますが、(4)と(5)については拡張機能の GitLens を使用します。
• ⚠ VSCode と GitLens は下記のバージョンを使用しています。VSCode: 1.73.1 (Universal)
  GitLens: v13.1.1
  

(1) 選択した範囲をステージする

使い方

• ステージしたい行を選択する
• を実行するコマンドパレットからGit: Stage Selected Ranges
  

使い所

ある程度コードを書き進めた後、適切な粒度に分けてコミットしたい場面があります。

例えば、あるロジックを関数に切り出すような変更をした後の場面を想像してみます。 ここでそのままコミットすると「関数の作成」と「既存の処理の置き換え」が混ざった大きなコミットができてしまいます。

でステージしてコミットを分けることで、コミットを小さくまとめることができます。このような場合に、「関数の作成」部分のコードをStage Selected Ranges

これによって、コミット内での変更意図が明確になり、コードレビュー時にレビュアーのコストを下げることができます。

(2) 直前のコミットに変更を追加する

使い方

• 変更をステージする
• を実行するコマンドパレットからGit: Commit Staged (Amend)
  
• コミットメッセージを確定する

使い所

コミットした後に、コメントを 1 行書き加えておけば良かった...などと思い出すケースがよく発生します。直前のコミットを一度リセットしても良いですが、少し手間がかかります。

を実行することで、直前のコミットの中に今の変更を加えることができます。この場合、後から思い出した追加の変更部分をステージし、Commit Staged (Amend)

(1) で記載した内容を組み合わせることで、変更部分のステージングについても簡単に行うことができます。

(3) 差分を確認する

使い方

• ファイルに変更を加える
• を実行するコマンドパレットからGit: Open Changes
  

使い所

現在編集しているファイルと前回コミットとの差分を確認したい場合があります。

VSCode サイドバーのソース管理から同様の確認をすることは可能ですが、現在のファイルを選んで差分を開くという感じでひと手間かかってしまいます。

を実行すると、現在編集中のファイルの差分をすぐに確認することができます。そこで、Git: Open Changes

を実行すると、元の編集中のファイルに戻ることができます。こちらを合わせて活用することで、差分と元ファイルを素早く往復することができて便利です。また、差分が表示されている状態でGit: Open File

(4) GitHub 上でファイルを開く

使い方

• VSCode 上で共有したいファイルを開く
• を実行するコマンドパレットでGitLens: Open File on Remote
  

※ GitLens のインストールが必要です

使い所

開発メンバーに対して、コード上の特定の箇所を GitHub のリンクとして共有したい場面があります。

ブラウザから直接探す場合、目的のファイルに到達するまでに何度もリンクを辿っていく必要があり、少々大変です。

を実行することで該当ファイルの GitHub のページを新規タブで開くことができます。代わりに、VSCode で対象のファイルを検索してGitLens: Open File On Remote

また、VSCode で行を選択した状態でコマンドを実行すると行が選択された状態で GitHub のファイルを開くことができます。

(5) コミットを並び替える

使い方

• とは別)コマンドパレットでGitLens: Git Rebase...
  を実行する (Git: Rebase Branch...
  
• 対象のリポジトリ, ブランチ, 開始点のコミットを選択する
• を選択するConfirm Rebase
  でInteractive Rebase
  

※ GitLens のインストールが必要です

使い所

でも同様の操作が可能ですが、直感的に操作できて便利です。コミットをプッシュする前に、コミットを統合したり並び替えたりしたい場面があります。 その場合にGitLens: Git Rebase...
を実行することで、 GUI 上で interactive rebase を行うことができます。 Git CLI ツールのgit rebase -i

おわりに

機能の紹介は以上となります。

この記事を通して少しでも気付きがありましたら幸いです。

最後まで読んでくださりありがとうございました。