VSCode (Visual Studio Code)をGithubと連携させて、リポジトリをクローンしてみる。
関連記事
環境
- macOS Ventura 13.3.1
- Visual Studio Code
VSCodeをGithubと連携してリポジトリをクローンする
今回クローンするリポジトリはこちら。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.34.39-1024x389.png)
VSCodeのSource controlを開くと、Gitがインストールせよ、と出てくるので、「Download Git for macOS」をクリック。※Gitインストール済みの場合は出ない。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.23.20-1024x603.png)
これもOpenをクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.23.32.png)
すでにgitコマンドとか使えるけど?と思ったが、どうやら必要な設定が入っていなかったようで「Download Git for macOS」で飛んだ先のgit公式サイトのコマンドをTerminalで実行する。
brew install git
Gitのインストールが完了した後、VSCodeをリロード、もしくは開き直すと、画面が下記のように変わるので、「Clone Repository」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.25.23-1024x669.png)
RepositoryのURLを入力しても良さそうだが、今回は「Clone from GitHub」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.26.59-1024x121.png)
「Allow」をクリック
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.27.07.png)
VSCodeとGitの連携について聞かれるので「Authorize Visual-Studio-Code」をクリック。
※ブラウザ上でログインしていない場合は、ログイン画面が出る。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.27.18-878x1024.png)
「Open Visual Studio Code.app」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.27.38.png)
作成しているリポジトリが出てくるのでクローンしたいリポジトリをクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.27.49-1024x145.png)
ここでLocalのどこのフォルダにリポジトリを格納するか問われるので、適当なフォルダを選択する。
「Open」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.28.56.png)
Githubのリポジトリにあったものが見える。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.29.21-1024x482.png)
これでクローンできているのでOK。
VSCodeから変更をCommit/Pushしてみる
実際に連携確認の一つとして、変更をCommitし、Pushてみる。
ファイルを編集してSource controlを開くと、Changesに変更対象のファイルが出てくるので、Commitメッセージを入力して、「Commit」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.30.53-1024x439.png)
「Yes」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.31.14.png)
CommitしたものをPushするために、「Sync Changes」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.31.37-1024x494.png)
「OK」をクリック。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.32.08.png)
これでChangesなどの表記が消える。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.32.22-1024x481.png)
ブラウザから該当リポジトリのファイルを見てみるとちゃんと変更されている。
![](https://kazu-oji.com/wp-content/uploads/2024/10/Screenshot-2024-10-20-at-23.36.50-1024x342.png)
これで確認も終了。