メインコンテンツへスキップ

VS CodeとGitHubを連携する

··4 分

Visual Studio Code(VS Code)にはGitHubとの連携機能がある。SSHの設定なしで簡単にGitHubに接続できる。GUIの操作だけでほぼ完結する。この記事ではVS CodeでGitHubのリポジトリにコミットするまでのやり方を説明する。OSはWindows10だ。

Gitのインストール #

Gitを使うにはGitのソフトウェアが必要となる。Windows環境ではGit for Windowsをインストールする。インストール時の設定は、わからなければデフォルトのままでよい。default editorはVisual Studio Codeにしておくといいかもしれない。Windows10でGitHubを始める - Qiitaに説明がある。

GitHubに登録する #

GitHubでアカウントを作成する。セキュリティーのため、Settings>Password and authenticationで二段階認証を設定するとよい。また、Settings>EmailsでKeep my email addresses privateにチェックをするとメールアドレスを非公開にできる。代わりに[email protected]という形式のメールアドレスが使われる。

テスト用のリポジトリを作成する。右上の+マークからNew repositoryをクリックする。Repository nameは好きに決める。PublicとPrivateを選べるが、非公開設定のPrivateを選ぶ。さらにAdd a README fileにチェックを入れる。すると最初のコミットとしてREADME.mdファイルが作成される。ほかの項目はそのままでよい。

GitHubで新しいレポジトリの設定画面

VS Codeのインストール #

VS Codeをインストールする。右下に日本語化のポップアップが出るので、クリックして日本語化する。手動で日本語化するには、Ctrl+Shift+Pで出るコマンドパレットにConfigure Display Languageと入力する。

左端にある拡張機能から、Git Graphをインストールする。リポジトリの履歴をグラフ化してくれるし、他にもGUIでGitを操作するときに便利な機能がある。

リポジトリをクローンする #

VS Codeのソース管理画面
GitHubに登録するで作っておいたGitHubリポジトリをクローンする。左端にあるソース管理アイコン>「リポジトリのクローン」をクリックする。
VS Codeのリポジトリ入力欄
中央に出てきた入力欄に「GitHubから複製」が出る。あとは画面の指示に従ってGitHubにログインすればよい。先ほど作ったリポジトリが選択肢に出てくるので、クリックすればクローン出来る。エクスプローラーにはREADME.mdファイルがあるはずだ。

ちなみに接続方式はHTTPSだ。簡単なだけでなく、安全性も高い。GitHubが推奨している方式でもある1

Gitのユーザー名とメールアドレスを登録する #

コミットするためにはGitで使うユーザー名とメールアドレスを登録する必要がある。Git Bashで以下を参考にコマンドを打つ。メールアドレスは非公開にしたいので、代わりにGitHubから付与されたものを使う。Settings>Emailsで確認できる。

git config --global user.name "Obsica"
git config --global user.email "[email protected]"

ちなみにGit BashはVS Codeのターミナルから使える。貼りつけのショートカットなどがWindows標準なので使いやすい。

ターミナルからGit Bashを選ぶ画面
コマンドは難しいという人はGit Graphで設定できる。最下部のステータスバーにある「Git Graph」をクリックする。
VSCode下部のバー
Git Graphの画面右上の歯車アイコンから、Repository Settings>User Detailsでユーザーを追加する。
Git Graphの設定画面

リポジトリにコミットする #

README.mdを好きに編集する。すると、ソース管理の「変更」にREADME.mdが表示されるので、この変更をステージする。そしてコミットするとローカルリポジトリに反映される。さらに「変更の同期」をすればGitHubのリモートリポジトリにも反映される。

参考 #