LoginSignup
1
1

More than 3 years have passed since last update.

@aiota

Visual Studio Code、Gitでファイルのバージョン管理

Last updated at Posted at 2020-11-13

Visual Studio CodeでGitを利用

内容
・Git for Windows　セットアップ
・Visual Studio Code　設定
・ブランチをきる　ブランチのマージ
・GitHubのリモートリポジトリにプッシュ

  1. 下記サイトよりGit for Windowsをダウンロード
    https://gitforwindows.org/

  2. ダウンロードした[Git-2.29.2.2-64-bit.exe]をダブルクリックしてインストールを実行
    ・Next
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Use Git from Git Bash onlyにチェックしNext
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Next
    image.png
    ・Install
    image.png
    ・チェックをはずしてFinish
    image.png

・VSCにプラグイン[Git History]をインストール
image.png

・VSCに同様の手順でプラグイン[GitLens]をインストール
image.png

・GitBash起動（windowsのスタートメニューより）
image.png

・GitBash起動後の設定
ユーザ名設定
$ git config --global user.name 'snow'
image.png

メールアドレス設定
$ git config --global user.email 'XXXXXX@gmail.com'
image.png

VSCodeでローカルファイルのバージョン管理

VSCodeで任意のフォルダを開く
例）[C:\share\testdir]
image.png

ローカルリポジトリ作成
Gitリポジトリの作成（初期化）を実施
image.png

初期化するとVSCが次の表に表示され[C:\share\testdir]に[.git]が生成される
image.png
VSCでsample.txtを作成し保存
image.png
作成したsample.txtをコミット
ファイルの作成と編集を行うとサイドバーのソース管理に更新ファイルの一覧が表示
「+」アイコンでステージング実行　「-」アイコン：取り消し
image.png

ステージング後、コミットメッセージを入力しチェックアイコンでコミットが完了
image.png

sample.txtを編集し保存
image.png

ここまでのコミットログを確認
Ctrl + Shift + Pでコマンドパレットを開き>Git: Viewと入力しGit: View History 「git log」を選択
image.png
git logが表示される
image.png
①、②の順で選択
image.png

最後にコミットしたファイル内容が表示される
image.png
[sample.txt]を選択すると[sample.txt(作業ツリー)]に差分が表示される
image.png

getLensでリポジトリ状態を確認
image.png

getLensで編集中ファイルの差分を表示
image.png

ブランチの作成（masterからブランチを作成）
ブランチ名（master）をクリックし，新しいブランチを作成を実行
image.png

新規ブランチ名「sub-branch1」を入力しEnter押下
image.png

GitLensでブランチを確認
ブランチ「sub-branch1」がチェックアウトされている（チェックマークがついている）ことを確認
image.png

Git Historyでブランチ「sub-branch1」を確認
Ctrl + Shift + PでGit: View History 「git log」を選択
image.png

ブランチのスイッチ（Git History）
ブランチ「master」にスイッチ（チェックアウト）する場合
図の順に選択
image.png

GitLensでブランチを確認
ブランチ「master」がチェックアウトされている（チェックマークがついている）ことを確認
image.png

ブランチのスイッチ（GitLens）
スイッチしたいブランチを右クリックし[Switch to Branch]を選択
image.png

ブランチが「sub-branch1」にスイッチされていることを確認
image.png

sample.txtの変更をステージング
image.png

ステージングしたsample.txtの変更をコミット
コミットメッセージを入力し②のチェックマークを選択
image.png
image.png

GitHistoryでコミット履歴確認
image.png

GitLensでブランチ確認
image.png

コミット履歴に対応するファイル内容をそれぞれ確認
image.png
image.png

ブランチのマージ
ブランチ「sub-branch1」をブランチ「master」にマージ
①ブランチ「master」に切り替え
image.png

Git Historyでマージ元のブランチ「sub-branch1」の[More]を選択後、[Merge this commit into current branch]を選択
image.png

[sub-branch1]を選択
image.png

[Yes]を選択
image.png
コンフリクトが発生しなければマージ完了

同様に以下の手順を実行
・ブランチ「sub-branch1」に切り替え
・sample.txt を編集（内容は任意 今回は'Add Text2'の行を追加）
・ステージング
・コミット（コミットメッセージは任意 今回は'third commit'）
・Git Historyよりコミット履歴確認
image.png
・ブランチ「master」に切り替え
・ブランチのマージ（ブランチ「sub-branch1」をブランチ「master」にマージ）
・Git Historyで[Refresh]を選択しコミット履歴確認
image.png

リモートリポジトリにプッシュ

リモートリポジトリ「GitHub」にプッシュ
あらかじめGitHubでリポジトリの作成をしておく（今回は[https://github.com/skymeets/test_rep.git]）

Ctrl + Shift + Pでコマンドパレットを開きGit Add を入力し[リモートの追加]を選択
image.png

リモートリポジトリURLを入力しEnter
image.png

リモート名「origin」を入力しEnter
image.png
以上でリモートリポジトリの登録完了

プッシュを実行
image.png

プッシュ実行時にGitHubのアカウント「ユーザー、パスワード」を入力
以上でプッシュ完了

クローンの実施（リモートリポジトリを他PCのローカルにクローン）

VSCでクローンを配置するフォルダを開く　今回は「c:\share」
image.png

Ctrl + Shift + Pでコマンドパレットを開きGit Clone を入力し[Git: Clone]を選択
image.png
image.png
上記URL入力フィールドにcloneするURLを入力しEnter
image.png
cloneするフォルダ選択画面が表示されるのでcloneするフォルダを指定(今回は「c:\share」)
image.png
フォルダを指定したらボタン[リポジトリの場所を選択]を押下
image.png
以上でリポジトリのクローン完了
image.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1