VSCodeにはデフォルトでgitのソース管理機能が備わっています。
この機能を使うと、通常git add, git commit, git push, git pullなどで実行していることを、gitコマンドを入力することなく、UI上で操作できます。
使いこなせるとコマンド入力よりも早くなります。
- ソース管理画面の表示
- 現在のブランチの確認方法
- 「ステージされている変更」や「変更」の見方
- 変更（ステージ前）の使い方
- ステージされている変更での操作
- コミットする（git commit）
- 「変更」のファイル群をまとめてコミットする（git add & git commit）
- 主要操作メニュー
- クローン｜git clone
- git checkout｜新しい分岐の作成と新しい分岐の作成元の違いとは何か？
- プルとプッシュを自動で行う（push and/or pull）
- プル（git pull）
- プッシュ（git push）
- ブランチの操作（git branch）
- リモート（git remote）
- 一時退避（git stash、スタッシュ）
- サブモジュールがある場合
- Gitログ
- 色付きの数字とアルファベットの意味
ソース管理画面の表示
Gitのソース管理画面を表示するには、ソース管理アイコン（右側で３つのドットがつながっているアイコン）をクリックします。
すると、以下のように「ソース管理」という画面が開きます。
以下でこの画面の見方や使い方についてまとめています。
現在のブランチの確認方法
画面、左下の青い部分には、現在いるブランチ名やエラーの数が表示されます。
例えば、上記のような表示であれば、現在masterブランチで作業中。エラー、警告共にゼロという内容です。
上記の場合は、topicブランチで作業中。ファイルに警告一つありという内容です。
「ステージされている変更」や「変更」の見方
ソース管理では、変更のある各ファイルがステージ前やステージ後（コミット前）でそれぞれ分けて表示されます。
ステージされている変更とは何か？
ステージされている変更とは、git add後、git commit前の状態の変更内容のことです。
変更とは何か？
変更とは、ステージ前(git add前)の状態の変更内容のことです。ワークツリーでの変更内容を指しています。
変更（ステージ前）の使い方
「変更」に表示されているファイルを簡単にgit addすることができます。
ファイルごとの３つの処理
ファイルにカーソルを合わせると、新たに、３つのアイコンが表示されます。
↓
それぞれのアイコンの意味は以下のようになっています。
| アイコン | 意味 | コマンド |
|---|---|---|
| ファイルマーク | vscodeでファイルを開く | $ code <指定したファイル> |
| ＋ | 変更をステージ | $ git add <指定したファイル> |
| カーブした矢印 | 変更を破棄 | $ git checkout <指定したファイル> |
git addの実行
＋をクリックするとファイルの場所が変更からステージされている変更に移動します。(index.htmlに注目)
すべてのファイルの一括操作
なお「変更」にある全てのファイルをgit addしたり、変更内容を元に戻すといった一括操作ができます。
変更にカーソルを合わせると、＋と矢印の２つが表示されます。
すべてのファイルをgit add
＋をクリックするとすべてのファイルをgit addします。
git add .すべてのファイルの変更をリセット
・矢印をクリックするとすべてのファイルの変更をなかったことにする(undo)。
git reset --hard @Uマーク(新規作成)がついているファイルがあるときに、矢印をクリックするとファイルを削除することになり、以下のようなコーションが表示されます。
ステージされている変更での操作
「ステージされている変更」ではステージに戻す処理とファイルの閲覧ができます。
ステージされている変更にあるファイルにカーソルを合わせると、２つのアイコンが表示されます。
それぞれの意味は以下のようになっています。
| アイコン | 意味 | コマンド |
|---|---|---|
| ファイルマーク | vscodeでファイルを開く | $ code <指定したファイル> |
| ー | 変更のステージング解除 | $ git reset HEAD <指定したファイル> |
-マーク(ステージング解除)
-をクリックすると、ステージされている変更にあったファイルが、ステージ前の状態（変更）に戻ります。
・$ git reset HEAD <指定したファイル>
┗ 指定したファイルをHEADがある状態に戻す。
オプションを指定しない場合–mixedと同じ処理で、ステージの状態をクリアするが、ワークツリーは残すという処理になります。
つまり、git add前の状態と同じになということです。
コミットする（git commit）
「ステージされている変更」に表示されているファイルをコミット（git commit）する場合は、一番上の検索窓にコミットメッセージを入力し、チェックマーク（✔︎）をクリックします。
実例
▼コミットメッセージ（例：add h2を入力）
▼チェックマークをクリック
・$ git commit -m "add h2"の処理となります。
コミットメッセージを入力しなかった場合
コミットメッセージを入力しなかった場合も、コミットメッセージとやることは同じで、メッセージを入力する順序が変わるだけです。
$ git commitと同じ処理になり、✔︎マークをクリックした後に、メッセージの入力窓が出てきます。
「変更」のファイル群をまとめてコミットする（git add & git commit）
「変更」のファイル群をまとめてgit addとgit commitを連続して行うこともできます。
1) 変更のみで、ステージに何もない状態であること
2)コミットメッセージを入力し上部のチェックマークをクリック
コミットメッセージが未入力の場合は、別途入力窓が表示される。
3) 操作を選択。
「はい」または「常に行う」をクリックする
↓変更ファイルが一掃され完了となる
操作コマンドはgit add . && git commitです。
主要操作メニュー
git addやgit commit以外の、クローン、プル、プッシュ、ブランチ、リモート、一時退避（スタッシュ）などの処理もUI上で行うことができます。
カラム右上の「・・・」をクリックすると、クローンやプルなどその他のコマンドが表示されます。
クローン｜git clone
クローンを選択することで、git cloneが実行できます。
・git clone <リモートレポジトリのURL>
1) URLを入力。または、連携済みのGithubのレポジトリから選択
2) git cloneを実行するフォルダを選択する
実行したフォルダの中に、リモートレポジトリ名で新たなフォルダが作成される。
3) vscodeで開く
git checkout｜新しい分岐の作成と新しい分岐の作成元の違いとは何か？
チェックアウト先を選択すると、ブランチの切り替えができます。
切り替え以下のオプションは３つです。
- 既存のブランチに切り替える
- 新らしいブランチを作成し切り替える
- 派生元のブランチを指定してブランチ作成し切り替える
既存のブランチに切り替え
git checkout <ブランチ名>
画面下に表示されたリストから移動したいブランチを選択します。
検索窓に入力すると絞り込みができます。ブランチがたくさんある場合は便利です。
新しいブランチを作成し切り替える
現在のブランチから新しいブランチを作成することもできます。
git checkout -b <ブランチ名>
入力窓に作成したいブランチ名を入力し、「+新しい分岐の作成…」をクリックします。
作成したブランチに切り替わります。
入力窓が未入力状態で「+新しい分岐の作成…」をクリックし、後からブランチ名を入力するのでも同じです。
派生元のブランチを指定してブランチ作成し切り替える
ブランチ作成の元となるブランチを指定してチェックアウトすることもできます。
git checkout -b <新しいブランチ名> <派生元ブランチ名>
1) 検索窓にブランチ名を入力し「+新しい分岐の作成元…」をクリック
2)派生元となるブランチを選択する
「新しい分岐の作成」と「新しい分岐の作成元」の違いとは何か？
なお、「新しい分岐の作成」と「新しい分岐の作成元」の違いは、「新しい分岐の作成」は現在のブランチのコミット履歴と同じ履歴の新しいブランチを作成するのに対し、
「新しい分岐の作成元」はコピーしたいコミット履歴をもつブランチを指定して、ブランチを作成する方法です。
プルとプッシュを自動で行う（push and/or pull）
「プル、プッシュ」にある「同期」を選択すると、ローカルのブランチとリモートのブランチの差分から、必要に応じて、pushまたはpullの両方を自動で行ってくれます。
リモートレポジトリの上流ブランチに変更があればgit pullでその内容を取り入れて、ローカルレポジトリのブランチがリモートレポジトリのブランチよりも進んでいればgit pushを行います。
実行するためには上流ブランチの設定が必要です。上流ブランチがなくても、作成するためのダイアログが表示され作成してからプッシュ or プルできます。
上流ブランチって何？という方は下記をご参考ください。
上流ブランチが設定済みの場合
現在のブランチの上流ブランチに「origin/master」が設定してある場合は以下のようになります。
上流ブランチの確認方法はgit branch -vvです。[ ]の中が上流ブランチです。上流ブランチがないときは[ ]自体が表示されません。
$ git branch -vv
* master c9695c8 [origin/master] commit message上流ブランチが設定されてない場合
上流ブランチが設定されてない場合は「ブランチを公開しますか？」と聞かれます。OKを選択すると、<リモート名>/<現在のブランチ名>の上流ブランチが自動作成され、リモートレポジトリに同期されます。
上流ブランチの確認方法はgit branch -vvです。[ ]の中が上流ブランチです。上流ブランチがないときは[ ]自体が表示されません。
$ git branch -vv
* topic ccf5f09 [origin/topic] add ci messageリモートブランチと同期するため、リモート追跡ブランチも追加されていることがわかります。
$ git branch -a
master
* topic
remotes/origin/HEAD -> origin/master
remotes/origin/master
remotes/origin/topicリモート追跡ブランチって何？という方は下記をご参考ください。
git fetchで取得してきたコミット履歴をgit merge(マージ)やgit rebase(リベース)する方法を実例で解説｜リモート追跡ブランチとは何か？
プル（git pull）
プルでは次の３種類のプルが選択可能です。
プル
上流ブランチが設定されている場合に使えるコマンドです。タグの情報も持ってきます。
git pull --tags
注意点
上流ブランチが設定されていない場合はエラーになります。
タグって何？という方は下記をご参考ください。
プル（リベース）
プル（リベース）も上流ブランチが設定されている場合に使えるコマンドです。–rabaseオプション(-r)をつけて実行します。
git pull --tags -r
git mergeのように分岐させるのではなく、コミット履歴をきれいにしたい場合に使います。
リベース（git rebase）って何？マージ（git merge）と何が違うの？という方は下記をご参考ください。
指定元からプル
上流ブランチが設定されていない場合や、上流ブランチとは別のブランチからプルしたい場合は「指定元からプル」使います。
git pull --tags <リモート名> <リモートブランチ名>
第１、第2引数でリモートレポジトリとリモートブランチを順に選択するコマンドです。
1) リモートレポジトリを選ぶ
URLを入力するか、リストから選ぶ。
2) リモートブランチを選ぶ
入力するか、リストから選ぶ。
git pullは非常によく使うコマンドです。もっと詳しく理解したいと言う方は下記をご参考ください。
プッシュ（git push）
プッシュをでは以下の2種類の方法でgit pushを実行することができます。
プッシュ
上流ブランチが設定されている場合に使えます。
git push
▼上流ブランチを設定していない場合
上流ブランチが設定されていない場合は、下記アラートが出るのでOKを押すと自動で上流ブランチが設定されpushを実行します。
OKをクリックすると、ローカルに上流ブランチと、リモート追跡ブランチが作成されます。
リモートには実行したブランチ名のリモートブランチが新たに作成されます。
プッシュ先のリモートレポジトリを選択してプッシュ
「プッシュ先…」をクリックすると、プッシュ先のリモートレポジトリを選ぶことができます。
・git push <リモートレポジトリ名> <ローカルレポジトリ名>
ブランチは現在のブランチ名が適用されます。（上記アラートでOKをクリックしたのと同じ処理です）
リモートのブランチ名を指定してpushする方法
リモートのブランチをローカルと異なるものにしたい場合は、VSCodeのUIではなくgitコマンド入力で対応する必要があります。
・git push <リモートレポジトリ名> <ローカルブランチ名>:<リモートブランチ名>
このコマンドで、指定したローカルブランチの内容を、指定したリモートブランチにpushすることができます。
ブランチ名を指定してプッシュする方法や、git pushの処理内容をもっと詳しく知りたいという人は下記をご参考ください。
ブランチの操作（git branch）
「ブランチ」では5種類の処理が選択できます。
選択肢には「チェックアウト」や「プッシュ」と同じ内容のものが含まれています。
ここにしかないのは、「ブランチ名の変更」と「ブランチをマージ」です。
ブランチの作成元…｜派生元ブランチを指定して新規ブランチを作成し移動
「ブランチの作成元…」をクリックすると、任意の既存ブランチから、新たなブランチを作成することができます。
作成したブランチに移動するため、処理はcheckcoutも含まれます。
・git checkout -q -b <新規ブランチ名> --no-track <派生元ブランチ名>
┗ -q: –quiet。フィードバックメッセージを表示しない
┗ -b: 新規ブランチを作成
┗ –no-track: 上流ブランチを設定しない（configでbranch.autoSetupMergeが設定されていたとしても）
作業手順
- 入力窓にブランチ名を入力
- リストからブランチの作成元を選択
「チェックアウト先」で「+新しい分岐の作成元…」を選択した場合と同じです。
ブランチをマージ…「git merge」
「ブランチをマージ…」を選択すると、git mergeが実行されます。
git merge <ブランチ>
表示されたリストからマージ元のブランチを選択します。
ブランチを発行…｜ブランチをリモートにプッシュ
「ブランチを発行…」をクリックすると、リモートレポジトリにプッシュ（git push)します。
その際、自動で上流ブランチも設定されます。
git push -u <リモート名> <現在のブランチ名>
┗ -u: –set-upstream。上流ブランチとして設定
ブランチ名を変更
「ブランチ名を変更」を選択すると、現在のブランチ名を変更できます。
git branch -m <変更後のブランチ名>
┗ -m: –move。ブランチ名を変更
分岐の作成…｜現在のブランチから新しいブランチを作成する
「分岐の作成…」をクリックすると現在のブランチから新しいブランチを作成できます。
・git checkout -q -b <新しいブランチ名> --no-track HEAD
「チェックアウト先」で「+新しい分岐の作成…」を選択した場合と同じです。
リモート（git remote）
リモートでは、リモートレポジトリの削除や追加をすることができます。
リモートの削除
「リモートの削除」では、ローカルレポジトリに登録してあるリモートレポジトリ名と対応するURLを削除します。
・git remote remove <リモート名>
┗ 「git remote rm <リモート名>」も同じ
リモートの追加
「リモートの追加」では、リモートレポジトリのURLにリモートレポジトリ名をつけて登録することができます。
・git remote add <リモート名> <URL>
リモートレポジトリの操作の詳細については下記をご参考ください。
一時退避（git stash、スタッシュ）
一時退避では、次の７種類の処理が選択できます。
一時退避
一時退避では、コメント付きのstashを実行できます。
・git stash push -m "コメント"
stashで-mオプションを使うにはpushが必要です。
なお、一時退避はコミット前のファイルに適用されますが、未追跡ファイルは含まないことに注意してください。
一時退避（未追跡ファイルを含む）
「一時退避（未追跡ファイルを含む）」を実行すると新規作成しgit addしていない未追跡ファイルも含めてstashします。
・git stash push -u -m
┗ -u: –include-untracked。未追跡ファイルを含む
┗ -m: –message。pushのオプション
一時待避を削除する…｜選択した一時待避を削除する
「一時待避を削除する…」では、リストから選んだ項目を削除できます。
・git stash drop <削除したいスタッシュ>
#待避中のスタッシュ一覧を表示
$ git stash list
stash@{0}: ブランチ名: コメントA
stash@{1}: ブランチ名: コメントB
#選択したスタッシュを削除
$git stash drop stash@{0}
#削除後のリストを確認
$ git stash list
stash@{0}: ブランチ名: コメントB一時待避内容を適用…｜選択した一時待避を復活（削除しない）
「一時待避内容を適用…」では、選択した項目を復活させることができます。
・git stash apply <復活させるスタッシュ>
- 現在のブランチに追加される
- ステージ済みの変更もadd前の状態で戻る
- 戻した待避内容はstash listから削除しない
ステージ済み状態で戻す
ステージ済みの変更をステージ済みとして戻したい場合は、--indexオプションをつける必要があります。–indexをつけないと、git add前の状態で戻ることになります。
・git stash apply <復活するスタッシュ> --index
一時待避内容を適用して削除…｜選択した一時待避を復活（削除する）
「一時待避内容を適用して削除…」を実行すると、復活させた後に、stash listから削除することができます。
・git stash pop <復活させるスタッシュ>
最新の一時待避内容を適用
「最新の一時待避内容を適用」は、直近保存したstash内容を復活します。(stash@{0}。stash listの一番上の項目)
git stash apply
┗ 「git stash apply stash@{0}」と同じ
applyなのでstash listは削除しません（popは削除する）
最新の一時待避内容を適用して削除
「最新の一時待避内容を適用して削除」は直近保存したstash内容を復活し、stash listから削除します。
git stash pop
┗ 「git stash pop stash@{0}」と同じ
サブモジュールがある場合
サブモジュールがある場合、左側のカラムの表示が変わります。
メインのレポジトリとサブモジュールとして登録したレポジトリがそれぞれ表示されます。
サブモジュール名をクリックすると、各サブモジュールのレポジトリ毎に変更とステージの状況が表示されます。
各記号の意味
サブモジュールのレポジトリ名の横に、複数の記号と数値が表示されます。
1. master
現在のブランチ名です。クリックするとブランチの切り替えができます。
2. 円形の矢印
現在のブランチに上流ブランチが設定してある場合に表示されます。
クリックすると、状況に応じてpush and/or pullを実行します。「同期」の処理です。
▼上流ブランチが設定されていない場合
上流ブランチがない場合は、リモート未同期のマーク（雲のようなマーク）が表示されます。
クリックすると、リモートレポジトリを選択しpushします。その際、リモートレポジトリには、現在のブランチ名のブランチが自動生成されます。
3. n↓ （数字 ↓）
リモートレポジトリの同期をした後に、リモートブランチで更新されたコミット数を表示しています。
リモートレポジトリよりもローカルが遅れていることを示してます。
例： 「8↓」
・リモートで８個の新たなコミットあり。
・同期ボタンをクリックすると、git pullを行う。
4. n↑ （数字 ↑）
リモートレポジトリの同期をした後に、ローカルブランチで追加されたコミット数を表しています。
ローカルが進んでいることを表します。
例： 「2↑」
・ローカルに２個の新たなコミットあり。
・同期ボタンをクリックすると、git pushを行う。
Gitログ
gitログの場所
VSCodeのUIによるgitコマンドの操作で困ったときは、「出力」タブを表示することでGitのログを確認することができます。
ここにはVSCodeのUIで実行したコードが表示されます。
VSCodeの右下のウインドウで、出力タブで、Gitを表示した状態は以下になります。
「出力」ウィンドウの出し方
ウインドウが表示されていない場合、下記で表示することができます。
・vscodeの表示オプションから出力を選択
・command + shift + Uを実行
VSCodeには便利なショートカットコマンドがたくさん用意されています。作業スピードを上げるにはショートカットコマンドの活用は欠かせません。詳細については下記をご参考ください。
・アラートの「Gitログを開く」をクリック
実行した処理にエラーがあった場合などに、「Gitログ」を開くのポップアップが表示される。
アラートのダイアログは上から表示される場合と、右下から表示される場合があります。
Gitログのデフォルト表示内容
gitログを見たときに目当てのコマンドがパッと見つからないことがあります、これは、vscodeでgit操作すると、処理の後に更新処理が自動で行われるためです。
ことある毎に下記の表示を目にすることになります。
> git status -z -u
> git symbolic-ref --short HEAD
> git rev-parse master
> git rev-parse --symbolic-full-name master@{u}
> git rev-list --left-right master...refs/remotes/origin/master
> git for-each-ref --sort -committerdate --format %(refname) %(objectname)
> git remote --verbose
> git config --get commit.template現在いるブランチで処理内容が若干変わりますが、最初と終わりの行は基本同じです。
> git status -z -u> git config --get commit.template色付きの数字とアルファベットの意味
作業を進めていくと、以下のように色付きの数字やアルファベットが表示されます。
色付きの数字は何か？
一番左の行の青い丸の中の数字は、変更のあったファイルの総数を表しています。
「変更」と「ステージされている変更」に表示されているファイルの総数になります。
色付きのアルファベットは何か？
各ファイルの横に表示されるアルファベットはファイルの状態を表しています。
| アルファベット | 単語 | 意味 |
|---|---|---|
| A | added | 新規追加 |
| M | modified | 変更あり |
| U | untracked | gitが未追跡(新規作成、add前) |
| D | deleted | 削除済み |
| C | conflict | コンフリクト発生中 |
| R | renamed | ファイル名変更済み |
| S | submodule | サブモジュール |
アルファベットを消す方法
これらのアルファベットは、コミット前の変更（ファイルの差分）がなくなれば消えます。
つまり、全てgit add して、git commitし、git statusで何も表示されない状態になれば、アルファベットは消えます。
実例
$ git status
On branch master
nothing to commit, working tree clean
数字の表す意味
アルファベットの左側に数字が表示されることがあります（アルファベットがない場合は数字のみ）。
これは、そのファイルで発生している問題やエラーの数を表しています。
例えば、HTMLファルであれば、タグが間違ってたり、終端タグのみ書かれているといった場合にこの数値が表示されます。
jsファイルであれば、functoinの中身にエラーがある場合などです。
該当のファイルを開くと、エラーや問題の箇所が色付けして表示してあるので、そこを修正すれば、これらの数値の表示もなくなります。
