Visual studio code を用いたgit操作
この記事の目的
Visual studio codeを用いてgit操作をする方法についてまとめる。
1. Visual studio codeを用いたgit操作
git操作の手段としてはコマンド以外にvisual studio code、source treeなどのツールを利用する方法がある。 Windows/Linuxに依存せず利用可能でソースコード編集の機能も充実しているVSCodeでgit操作する方法についてまとめる。
2. 拡張機能
VS Codeは標準でgit連携機能をサポートしているが下記拡張機能をインストールしておくとソースコードの管理・確認の利便性を向上できる。
Git History ソースコードの履歴をブラウジングしやすくするための拡張機能 marketplace.visualstudio.com
Git Lens ファイルやコミット毎の変更差分を可視化する拡張機能 marketplace.visualstudio.com
Git Graph ブランチの関係(どのブランチからマージされているかなど)を可視化する拡張機能 marketplace.visualstudio.com
## 3. VSCodeとgithubの連携/ソースコードの取得
すでにgithubにあるリポジトリをクローンする場合、VS codeのソースコード管理画面からリポジトリの複製画面を選択する。
初回のみ、どのgithubアカウントと連携するかの情報を入力する必要がある。ブラウザが立ち上がるのでgithubのアカウント情報を入力してVSCodeとの連携を許可する。
連携が完了すると自分のアカウントにあるリポジトリの一覧が表示される。
ここで、他アカウントで作成してあるソースコードをcloneしたい場合には、コマンドパレットにキーワードを入れてgithubのリポジトリを検索するか 参照するリポジトリのURLを入力する。ブラウザで検索したソースコードをcloneするURLは各ページのCodeボタンを押して取得できる。
4.変更履歴の確認
取得したソースコードが過去にどのように変更されたかは過去のコミット履歴から確認できる。
また特定のファイルについて過去のコミットでどのように変更されたかを確認したい場合にはFileHistoryで確認することができる。
5.ブランチの作成・移動
ブランチの移動は移動対象ブランチを選択し、『Switch to Branch』を選択して行う。
新規ブランチ作成はCreate Branchを選択して行う。
また、各ブランチの関係(マージされたタイミングなど)はgit graphで可視化することができる。 git graphはコマンドパレットから『Git Graph : View Git Graph』を選択することで表示できる。
6.変更の反映 (コミット/プッシュ)
ローカルでの変更内容をコミットは、①ファイルのステージ、②コミット、③プッシュの順に行う。
①ファイルのステージ
ローカルにあるファイルを変更して保存し、過去のコミットと差分が発生するとソース管理画面の"変更"画面に差分が発生しているファイルが表示される。 内容を確認し、"変更をステージ"ボタンを押してファイルをステージングする。
②コミットメッセージの入力
コミットの変更内容に対する説明用メッセージをメッセージ入力画面に入力し、ローカルリポジトリに変更内容をコミットする。
③変更内容のプッシュ
ソースコード管理画面のCOMMITの横にあるプッシュボタン(↑)を押して、変更内容をリモートリポジトリにプッシュする。
7.リモートリポジトリの変更内容取得(プル)、コンフリクトの修正
自分が編集中のリモートリポジトリに対して修正された内容を取得する場合にはソースコード管理画面のCOMMITの横にある↓ボタンでプルを行う。
この際、自分のコミットとリモートリポジトリの変更内容でコンフリクト(競合)が発生する場合がある。その場合は競合した箇所に対してどちらの内容を反映するかを選択してマージする。