VSCode + Git Graph での Git の使い方メモ

プログラム
プログラム
スポンサーリンク

久しぶりに VSCode(Visual Studio Code)を使う機会があったのですが、いつの間にか Git用の便利な機能拡張が充実していました。これまではターミナルから直接 Gitコマンドを叩いて使っていたのですが、機能拡張を使った方が Gitリポジトリの視認性も良くて効率的に作業を行える上にミスも減らせそうです。そこで今回は、VSCode と Git Graph 機能拡張を使った Git の使い方をまとめてみました。

Japanese Language Pack のインストール

この記事では、Japanese Language Pack 機能拡張をインストールした VSCode での説明になります。「機能拡張」を表示し「Japanese Language Pack」を検索してインストールすることをオススメします。

Japanese Language Pack 機能拡張のインストール画面

Git Graph のインストール

「機能拡張」を表示し、Git用の便利な機能拡張「Git Graph」を検索してインストールします。

Git Graph 機能拡張のインストール画面

git clone

「ソース管理」を表示し「リポジトリの複製」をクリックします。

「リポジトリの複製」ボタン

上のような画面でない場合は「・・・」メニューから「クローン」を選択します。

クローンメニュー

リモートリポジトリのURLを入力して実行すれば、リポジトリがクローンされます。ローカルリポジトリの保存先はこの後に聞かれますので適当な場所を指定してください。

git clone の実行

git pull

「ソース管理」を表示し「変更の同期↓」をクリックすれば、リモートリポジトリの状態をプルできます。

「変更の同期↓」ボタン

上のような画面でない場合は「・・・」メニューから「プル」を選択します。

プルメニュー

git commit

なにかコードを修正したら「ソース管理」を表示し、コミットメッセージを入力して「コミット」をクリックすれば、コミットを実行できます。

git commit の実行

コミットメッセージを省略すると、おなじみの COMMIT_EDITMSG が開くのですが、コミットするには右端の小さなチェックマークをクリックしなければなりません。

COMMIT_EDITMSG

もどかしく感じる場合は、VSCodeの「設定」画面で「Use Editor As Commit Input」を検索してチェックを外しておくことをオススメします。

Use Editor As Commit Input の設定

コミットメッセージを入力して、エンターを押せばコミットを実行できるようになります。

コミットの実行

git push

「ソース管理」を表示し「変更の同期↑」をクリックすれば、ローカルリポジトリの状態をリモートリポジトリにプッシュできます。

「変更の同期↑」ボタン

「・・・」メニューから「プッシュ」を選択することもできます。

プッシュメニュー

git log

「ソース管理」を表示し「Git Graph」アイコンをクリックすれば git log と同等の表示が得られます。

Git Graph の表示

git tag

「ソース管理」を表示し「Git Graph」アイコンをクリックして Git Graph を開きます。
タグを付けたいコミットを右クリックして「Add Tag」を選択します。

「Add Tag」の選択

タグの設定画面が表示されますので、タグ名を入力して「Add Tag」をクリックすればタグが作成されます。リモートリポジトリにタグをプッシュしたい場合は「Push to remote」にチェックを入れます。

タグの設定画面

git branch

「ソース管理」を表示し「・・・」メニューから「ブランチ」>「ブランチの作成」を選択します。

「ブランチの作成」の選択

ブランチ名を入力してエンターを押すとブランチが作成され、作成したブランチがチェックアウトされます。

ブランチ名の入力

「ソース管理」を表示し「Git Graph」アイコンをクリックすれば、作成したブランチがチェックアウトされていることが確認できます。

Git Graph で作成したブランチを確認

「↑Branchの発行」をクリックすればリモートリポジトリにブランチを反映できます。

「↑Branchの発行」ボタン

git checkout

「ソース管理」を表示し「Git Graph」アイコンをクリックして Git Graph を開きます。
チェックアウトしたいブランチを右クリックして「Checkout Branch」を選択すれば、対象のブランチがチェックアウトされます。

「Checkout Branch」の選択

git merge

「ソース管理」を表示し「Git Graph」アイコンをクリックして Git Graph を開きます。
マージ先のブランチをチェックアウトし(今回は「main」ブランチをマージ先とします)、必要に応じてリモートリポジトリの状態をプルしておきます。

「main」ブランチをチェックアウト

マージするブランチを右クリックして「Merge into current branch」を選択します。

「Merge into current branch」の選択

マージの設定画面が表示されますので、必要に応じて設定を行い「Yes, merge」をクリックすればマージが実行されます。

マージの設定画面

git branch -d

「ソース管理」を表示し「Git Graph」アイコンをクリックして Git Graph を開きます。
削除したいブランチを右クリックして「Delete Branch」を選択します。

「Delete Branch」の選択

ブランチ削除のオプションが表示されますので必要に応じて選択します。(リモートのブランチも削除したい場合は「Delete this branch on the remote」にチェックを入れてください)「Yes, delete」をクリックすれば対象のブランチが削除されます。

ブランチ削除のオプション

おわりに

Visual Studio Code は、他のIDEと比べて機能が少ない印象があったのですが、いつの間にか超多機能で使いやすいIDEに進化していました。動作も比較的軽いのでしばらく使ってみようと思います。

コメント

タイトルとURLをコピーしました