VS CodeでGitとGitHubを使う：連携の手順と、画面の読み方

公開 書いた人 大林 諒

VS Codeで編集しているなら、Gitの操作も同じ画面で済ませられます。ただ、VS CodeとGit、GitHubの関係が曖昧なままだと、どこで何が止まっているのか分からなくなります。この記事では、サンプル料理教室の代表が website を手元に持ってきて、料金表を直し、GitHubへ送るまでを順に書きます。読み終わると、連携の手順が済み、「Source Control」の画面の表示を読めるようになります。

画面の文言はVS Codeの公式ドキュメントに載っているものだけを書き、同じことをするGitのコマンドは実際に動かした表示を載せています。

この記事の内容
  1. 先に答えると
  2. VS CodeとGitとGitHubの関係
  3. 連携の手順
  4. Source Controlの画面の読み方
  5. 料金表を直して送る
  6. ボタンとコマンドの対応
  7. 枝を作って送る
  8. 衝突が出たとき
  9. GitHub Pull Requestsでプルリクエストを見る
  10. できないことと、その代わり
  11. よく詰まるところ
  12. 次に読む

先に答えると

VS Codeは編集用のアプリで、Gitの操作は別に入っているGitを呼び出して動きます。GitHubへのサインインとGitの基本の操作はVS Codeに最初から入っていて、拡張機能は要りません。プルリクエストまでVS Codeの中で扱うなら、拡張機能のGitHub Pull Requestsを足します。

  • まず git --version でGitを確かめます。無ければ先に入れます
  • GitHubとの連携は「Clone Repository」から「Clone from GitHub」を選び、サインインすれば始まります
  • 普段の流れは、差分を見る、「+」でステージ、メッセージを書いて「Commit」、「Sync Changes」の順です
  • コミットの名前とメールはGitの設定で、GitHubのサインインでは決まりません
  • github.dev（GitHubで . を押すと開くブラウザ版）は別物で、端末もコードの実行もありません

VS CodeとGitとGitHubの関係

名前何かどう繋がるか
Git変更の履歴を残す仕組み別に入れる。VS Codeはこれを使う
VS Code編集用のアプリ。Gitを操作する画面が入っているGitを呼び出す
GitHub履歴を預けて共有するサービスVS Codeでサインインすると、一覧からクローンできる
GitHub Pull RequestsVS Codeの拡張機能プルリクエストとIssueを扱う

GitHub Desktopを入れていても、VS Codeが必要とするGitの代わりにはなりません。公式にそう書かれています。

リポジトリは、ファイルと変更履歴を入れておく場所です。コミットは、変更を1回分の記録として手元に残す操作で、GitHubにはまだ届きません。プッシュは、そのコミットをGitHubへ送る操作です。

VS Code が Git を呼び出し、Git が GitHub と push・pull でやり取りする関係
VS Code が Git を呼び出し、Git が GitHub と push・pull でやり取りする関係

連携の手順

Gitを確かめる

  1. Macは「ターミナル」、WindowsはPowerShellを開きます。
  2. git --version と打ちます。
$ git --version
git version 2.50.1 (Apple Git-155)

バージョンが出れば入っています。出なければ「Gitのインストールと初期設定：MacとWindows、名前とメールと認証」を先に済ませて、VS Codeを開き直します。

名前とメールを入れる

コミットに記録される名前とメールは、Gitの設定です。GitHubにサインインしても自動では入りません。同じ記事のとおり --global で入れるか、そのリポジトリだけなら次のように入れます。website をクローンしたあとに打ちます。

$ git config --local user.name "代表"
$ git config --local user.email daihyo@sample-cooking.example
$ git config --show-origin user.email
file:.git/config	daihyo@sample-cooking.example

GitHubにサインインしてクローンする

クローンは、リポジトリを手元に持ってくる操作です。

  1. 左の「Source Control」を開きます。Macは ⌃⇧G、Windowsは Ctrl+Shift+G でも開きます。
  2. 「Clone Repository」を押します。
  3. 「Clone from GitHub」を選びます。
  4. サインインを求められたら、ブラウザの案内に従って許可します。
  5. 一覧から sample-cooking/website を選びます。
  6. 置くフォルダを選びます。
  7. クローンが終わったら、開くほうを選びます。

手順2の代わりに、コマンドパレット（⇧⌘P、Windowsは Ctrl+Shift+P で開く、命令を探して実行する欄）で「Git: Clone」を実行しても同じです。

プルリクエストを扱うなら、拡張機能を足す

  1. 左の「Extensions」を開きます。Macは ⇧⌘X、Windowsは Ctrl+Shift+X でも開きます。
  2. 検索の欄に GitHub Pull Requests と書きます。
  3. 「Install」を押します。
  4. 左に増えたGitHubのアイコンを押します。
  5. 「Sign In」を押します。
  6. ブラウザの案内に従って許可します。

拡張機能の名前は、配布ページで「GitHub Pull Requests」、VS Codeの公式の説明で「GitHub Pull Requests and Issues」と書かれています。発行元がGitHubのものを選びます。

Source Controlの画面の読み方

表示場所意味
「Changes」「Source Control」の一覧まだステージしていない変更
「Staged Changes」「Source Control」の一覧次のコミットに入れると選んだ変更
メッセージの欄「Source Control」コミットの説明を書く
「Commit」「Source Control」手元に記録する。サーバーには送らない
「Sync Changes」「Source Control」GitHubの変更を先に取り込んでから、自分のコミットを送る
「Publish Branch」下のステータスバー（枝がまだGitHubに無いとき）手元の新しい枝を、GitHubに初めて送る
左下の枝の名前下のステータスバー今いる枝。押すと切り替え、新しい枝の作成
↑、↓ の数下のステータスバー↑ は送っていないコミット、↓ は受け取っていないコミット
「More Actions」（...）「Source Control」Fetch、Push、「Commit」の中の「Undo Last Commit」など

ファイルの横の文字は、変更の種類です。

文字意味git status --short では
M変更した（modified）M
UGitがまだ管理していない新しいファイル（untracked）??
D削除した（deleted）D
A新しいファイルをステージしたA

M、U、D はVS Codeの公式に載っています。A は公式のこの一覧に名前がなく、右の列のとおりGit側の表示です。実際の表示は次のとおりです。新しいファイル style.css を入れると、ステージの前後で印が変わります。

$ git status --short
 M menu.html
?? style.css
$ git add menu.html style.css
$ git status --short
M  menu.html
A  style.css

git status --short の左の列がステージした側、右の列がまだの側です。

Source Control のメッセージ欄、Commit、2つの一覧、下の枝名と ↑1 の位置
Source Control のメッセージ欄、Commit、2つの一覧、下の枝名と ↑1 の位置

料金表を直して送る

menu.html の基本コースを5,000円から5,500円に直す例です。

  1. 左のファイルの一覧から menu.html を開きます。
  2. 金額を直して保存します。
  3. 「Source Control」を開きます。「Changes」に menu.html が M で出ています。
  4. menu.html を押します。差分の画面が開きます。
  5. 金額の行だけが変わっているか見ます。
  6. ファイルにカーソルを合わせて「+」（「Stage Changes」）を押します。「Staged Changes」に移ります。
  7. メッセージの欄に「料金表を修正」と書きます。
  8. 「Commit」を押します。ここではまだ手元に記録しただけです。
  9. 「Sync Changes」を押します。ここでGitHubに届きます。

差分の画面は、左が元、右が変更後です。「More Actions」（...）の「Diff View」で、「Inline」「Side by Side」「Automatic」の3つから選べます。既定はAutomaticで、幅が900ピクセルを境に切り替わります。編集の画面の左端にも印が出て、緑が追加、青が変更、赤い三角が削除です。

「Sync Changes」の中身はコマンドの2つ分です。外注エンジニアBが先に 住所を追加 を送っていた場面を動かしました。status -sb はこの中身を1行で見せるもので、[ahead 1, behind 1] がステータスバーの ↑1 ↓1 にあたります。

$ git fetch origin
From …/remote/website
   0e2a458..c5d90a1  main       -> origin/main
$ git status -sb
## main...origin/main [ahead 1, behind 1]
$ git pull --no-rebase --no-edit origin main
From …/remote/website
 * branch            main       -> FETCH_HEAD
Merge made by the 'ort' strategy.
 index.html | 1 +
 1 file changed, 1 insertion(+)
$ git push origin main
To …/remote/website.git
   c5d90a1..bb9f0bb  main -> main

From と To の場所は練習用のフォルダなので縮めてあります。本物なら GitHub のURLです。

ボタンとコマンドの対応

外注エンジニアBの説明やAIの作業報告はコマンドで来ます。

VS Codeの操作Gitのコマンド
「Clone Repository」または「Git: Clone」git clone
「+」（「Stage Changes」）git add
「Commit」git commit
「Sync Changes」git pull のあと git push
「More Actions」の「Fetch」git fetch
「More Actions」の「Push」git push
「Publish Branch」git push -u origin 枝の名前
枝の名前を押して「Create new branch…」git switch -c 枝の名前
「Git: Checkout to」git switch 枝の名前
「Discard Changes」git restore
「Git: Stash」git stash
「More Actions」の「Commit」の中の「Undo Last Commit」git reset --soft HEAD~1 に近い
「Git: Abort Merge」git merge --abort

3つのコマンドの違いは「git add・commit・pushの違い：保存して送るまでの流れ」に書きました。

枝を作って送る

ブランチ（枝）は、本番の中身とは別に作業するための線です。add-summer-class を作る例です。

  1. 左下の枝の名前を押します。
  2. 「Create new branch…」を選びます。
  3. add-summer-class と書きます。この枝に移ります。
  4. 変更をステージして、コミットします。
  5. 下のステータスバーの「Publish Branch」を押します。
$ git switch -c add-summer-class
Switched to a new branch 'add-summer-class'
$ git push -u origin add-summer-class
To …/remote/website.git
 * [new branch]      add-summer-class -> add-summer-class
branch 'add-summer-class' set up to track 'origin/add-summer-class'.

コミットしていない変更があると、切り替えをGitが止めることがあります。先にコミットするか、「Git: Stash」でしまいます。

衝突が出たとき

衝突（コンフリクト）は、同じファイルの同じ場所を2人が変えて、どちらを残すかをGitが決められない状態です。衝突したファイルは「Source Control」の「Merge Changes」に出ます。

  1. 「Merge Changes」のファイルを右クリックして「Open in Merge Editor」を選びます（エディタで開いたあとなら「Resolve in Merge Editor」のボタンでも開けます）。3画面の編集が開きます。
  2. 左の「Incoming」（入ってくる側）と右の「Current」（今の枝の側）を見比べます。通常の合流の場合の読み方で、リベース中は左右の意味が逆になります。
  3. 残すほうを選び、下の「Result」で最終の形にします。
  4. 「Complete Merge」を押します。そのファイルがステージされます。
  5. ほかの衝突したファイルも同じように直します。
  6. 「Source Control」でメッセージを確かめて「Commit」を押します。

「Complete Merge」だけでは合流は終わりません。手順6までやって完了です。やめるときはコマンドパレットで「Git: Abort Merge」を実行します。直している途中の内容は消えるので、残したいものは先に写します。記号の読み方や、どちらを残すかの判断は「コンフリクトの直し方：起きる理由と、解消の手順」に書きました。

Merge Editor で Incoming と Current を見比べ、Result を作って仕上げる
Merge Editor で Incoming と Current を見比べ、Result を作って仕上げる

GitHub Pull Requestsでプルリクエストを見る

プルリクエスト（Pull Request、PR）は、枝の変更を本筋に入れていいかを確認する依頼です。拡張機能を入れると、VS Codeの中で作成とレビューができます。

作る

  1. 枝にコミットを済ませます。
  2. コマンドパレットで「GitHub Pull Requests: Create Pull Request」を実行します。
  3. 「Create」の画面で、合流先の枝を選びます。
  4. 「Create」を押します。枝をまだ送っていなければ、送り先を聞かれるので選びます。

見る

  1. 左のGitHubのアイコンを押します。
  2. 「Pull Requests」の一覧から、Bのプルリクエストを選びます。
  3. ファイルを選んで差分を読みます。
  4. コメントを入れます。
  5. プルリクエストの「Description」の画面からレビューを送ります。

手元で動かして確かめたいときは、今の変更をコミットするかしまってから「Checkout」を押します。

github.devとの違い

GitHubのリポジトリの画面で . を押すと、github.devが開きます。VS Codeのブラウザ版です。

項目VS Code（手元）github.dev
入れる作業要る。Gitも別に要る要らない。無料
コードの実行、端末できるできない
拡張機能入れられる一部だけ
向いている場面普段の作業文言を1か所直す、差分を読む

github.devで既存のプルリクエストを直すと、変更はその枝に直接コミットされます。

GitHub Copilotの話は「GitHub Copilotとは：料金・使い方・無料でできる範囲」に書きました。

できないことと、その代わり

できないことその代わり
Gitを入れずに使うGitを入れる。GitHub Desktopを入れても代わりにならない
GitHubのサインインでコミットの名前を決めるgit config で入れる
枝の保護や権限をVS Codeで変えるGitHubのブラウザの画面で行う
入れてはいけないファイルを止める差分を人が見る。.gitignore で最初から除く
公開中のホームページに反映するGitHubへ送っただけでは変わらない場合がある。反映の仕組みを外注エンジニアBに聞く

よく詰まるところ

症状原因直し方
「Git not found」と出るVS CodeがGitを見つけられないgit --version で確かめ、無ければ入れて、VS Codeを開き直す
ターミナルではGitが動くのにVS Codeで動かないGitの場所が別設定の git.path にGitの場所をフルパスで書き、開き直す
「Make sure you configure your “user.name” and “user.email” in git」と出る名前とメールが未設定。サインインでは入らないgit config で入れて、もう一度コミットする
コミットの名前が意図と違う自動で決まった名前か、古い設定が使われているgit config --show-origin user.email で設定元を見て直す。過去のコミットは変わらない
「Authentication failed」と出る保存された認証情報が古い、または間違っている認証情報を直して、もう一度試す
non-fast-forward や fetch first で断られるBが先に送っている取り込んでから送る。force pushはしない
何もステージせずに「Commit」を押すと確認が出るGitの設定によって動きが変わる「+」でステージしてから押す
.gitignore に書いたのに一覧に残るすでに管理されている、またはステージ済みgit rm --cached で管理から外す
原因が分からない実行しているGitの中身が見えていないコマンドパレットで「Git: Show Git Output」を実行する

次に読む

あわせて読む

画面に出てくる言葉の意味はGit用語集で引けます。