【Visual Studio Code】Gitの基本操作をする方法（Git Graph、Git History）

2023年4月9日開発ツールVisual Studio Code

Visual Studio CodeでGitを操作するための方法について紹介します。拡張機能の Git Graph と Git History を使います。

• Visual Studio Code：1.50.1
• Git Graph – 0.6.20
• Git History – 1.30.0

Visual Studio CodeでGitを操作

Visual Studio CodeでGit操作する方法を解説します。

Git操作には Git Graph と Git History を Visual Studio Code へインストールします。

Git GraphとGit Historyをインストール

まずはVisual Studio Codeへ Git Graph と Git History をインストールします。

• 左メニューにある拡張機能アイコンをクリック
• 検索ウィンドウに “Git" と入力
• そして表示される Git History と Git Graph の Installボタン をクリック

pull(プル)する

Gitのpull(プル)をする方法です。

• 左メニューのアイコンをクリック
• 三点リーダーをクリック
• でてきたメニューの [Pull] をクリック

commit(コミット)する

Gitのcommit(コミット)する方法です。

• 変更したファイルにカーソルを被せてメニュを表示させる
• 表示されたメニューの＋アイコンをクリック
• 以下スクショのように Changes から Staged Changes にファイルが移動

• コミットメッセージを入力して、チェックアイコンをクリックしてコミット

push(プッシュ)

Gitのpush(プッシュ)する方法です。

• 3点リーダをクリック
• 表示されたメニューの Push をクリック

merge(マージ)

ブランチをmerge(マージ)する方法です。

• [ctrlキー] + [shiftキー] + [pキー]でコマンドパレットを表示
• Git: View History (git log)をクリック

• メニューのAll breanches となっていることを確認
• メニューの Refresh をクリックしてリフレッシュ

• マージするコミットログの行にある More をクリック
• そして Merge this (***) commit into current branch をクリック

• マージするブランチを選択※ここではfeature/test

• Yesを選択

• メニューの Refresh をクリック

ブランチ作成

branch(ブランチ)を作成する方法です。

• 画面下のブランチ名をクリック(※ここではdevelop)
• 作成するブランチ名を入力(※ここではfeature/test)
• Create new branch from…をクリック

• 元にするブランチをクリック(※ここではdevelopブランチからfeature/testブランチを作成)
• 以下スクショのように画面下のブランチ名が develop から feature/test に切り替わる

ブランチ削除

branch(ブランチ)を削除する方法です。

• 削除するブランチのバツアイコンをクリック

• Okボタンをクリック

ブランチ切り替え

branch(ブランチ)を切り替える方法です。

• 画面下のブランチ名をクリック※ここではfeature/test
• 切り替えるブランチをクリック※ここではdevelop

まとめ

今回は Visual Studio Code で Git を操作する方法の手順を紹介しました。

2023年時点でプログラミング開発における環境で Visual Studio Code と Git は必須といっても良い環境です。

ちなみにじぶんは、Linux上で開発するので テキストエディタは vi を使っています。あと Git もコマンドラインで実行しています。

なので、今回のVisual Studio CodeでGitを操作するマニュアルは会社の制作チーム用に調べた内容になっています。

さいごに Visual Stucio Code の設定などに関しては個別に記事で紹介していきますので、ぜひ参考にご覧ください。

ユート

Webプログラマ兼ブロガー | プログラミング基礎知識を発信｜Webプログラマ歴は10年以上｜JavaScript,PHP.HTML | 「人生の時間は有限。悪いことをしている時間はない」
→プロフィール