techno_memo

個人用の技術メモ。python・ROS・AI系のソフトウェア・ツールなどの情報を記載

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連携機能をサポートしているが下記拡張機能をインストールしておくとソースコードの管理・確認の利便性を向上できる。

## 3. VSCodegithubの連携/ソースコードの取得

すでにgithubにあるリポジトリをクローンする場合、VS codeソースコード管理画面からリポジトリの複製画面を選択する。 f:id:sd08419ttic:20210904150819p:plain

初回のみ、どのgithubアカウントと連携するかの情報を入力する必要がある。ブラウザが立ち上がるのでgithubのアカウント情報を入力してVSCodeとの連携を許可する。 f:id:sd08419ttic:20210904151729p:plain

連携が完了すると自分のアカウントにあるリポジトリの一覧が表示される。 f:id:sd08419ttic:20210904152047p:plain

ここで、他アカウントで作成してあるソースコードをcloneしたい場合には、コマンドパレットにキーワードを入れてgithubリポジトリを検索するか 参照するリポジトリのURLを入力する。ブラウザで検索したソースコードをcloneするURLは各ページのCodeボタンを押して取得できる。

f:id:sd08419ttic:20210904152941p:plain

4.変更履歴の確認

取得したソースコードが過去にどのように変更されたかは過去のコミット履歴から確認できる。 f:id:sd08419ttic:20210904154400p:plain

また特定のファイルについて過去のコミットでどのように変更されたかを確認したい場合にはFileHistoryで確認することができる。

f:id:sd08419ttic:20210904154703p:plain

5.ブランチの作成・移動

ブランチの移動は移動対象ブランチを選択し、『Switch to Branch』を選択して行う。 f:id:sd08419ttic:20210904162100p:plain

新規ブランチ作成はCreate Branchを選択して行う。

また、各ブランチの関係(マージされたタイミングなど)はgit graphで可視化することができる。 git graphはコマンドパレットから『Git Graph : View Git Graph』を選択することで表示できる。

f:id:sd08419ttic:20210904163047p:plain

6.変更の反映 (コミット/プッシュ)

ローカルでの変更内容をコミットは、①ファイルのステージ、②コミット、③プッシュの順に行う。

①ファイルのステージ

ローカルにあるファイルを変更して保存し、過去のコミットと差分が発生するとソース管理画面の"変更"画面に差分が発生しているファイルが表示される。 内容を確認し、"変更をステージ"ボタンを押してファイルをステージングする。

f:id:sd08419ttic:20210904164012p:plain

②コミットメッセージの入力

コミットの変更内容に対する説明用メッセージをメッセージ入力画面に入力し、ローカルリポジトリに変更内容をコミットする。

f:id:sd08419ttic:20210904164552p:plain

③変更内容のプッシュ

ソースコード管理画面のCOMMITの横にあるプッシュボタン(↑)を押して、変更内容をリモートリポジトリにプッシュする。

f:id:sd08419ttic:20210904164823p:plain

7.リモートリポジトリの変更内容取得(プル)、コンフリクトの修正

自分が編集中のリモートリポジトリに対して修正された内容を取得する場合にはソースコード管理画面のCOMMITの横にある↓ボタンでプルを行う。

f:id:sd08419ttic:20210904164823p:plain

この際、自分のコミットとリモートリポジトリの変更内容でコンフリクト(競合)が発生する場合がある。その場合は競合した箇所に対してどちらの内容を反映するかを選択してマージする。

f:id:sd08419ttic:20210911134407p:plain