GithubとVSCodeを連携する

クラウドでプロジェクトを保存できるGithubとvscodeを連携させると何かと便利。
vscodeでコードを書きつつ、そのままgithubにUPして、ついでにGit操作を覚えられる。
プロジェクトを新規で立ち上げたとき、いつもやり方を忘れるので備忘録。

すでにPCにGitがインストールしてあるって人はここはスキップ。

32bitと64bitがありますので、環境に合わせて青いリンクの文字をクリックします。

PCにGit-xxxx-bit.exe　がダウンロードされているので、ダブルクリックし、PCにインストールします。

Xamppを立ち上げ、コントロールパネルでShellボタンを押します。
立ち上がったウィンドウに、下記の文字を入力します。
git --version

バージョンが表示されればOKです。

Gitを使用する、ユーザー名とメールアドレスを設定します。
XamppのコントロールパネルのShellボタンを押し、ウィンドウを立ち上げます。

ユーザー名を設定します。今後、VscodeとGithubで連携することを考え、同一のものにしたほうが良いです。

ここではまだ設定せず、VSCodeのターミナルで設定します。

VSCodeを立ち上げ、Githubと連携したいプロジェクトを開きます。

まず、Gitの基本設定をします。

git config --global user.name 'ユーザー名'

git config --global user.email 'メールアドレス'

次に、VSCodeの左メニューの3番目にあるソース管理というボタンを押します。
すると「リポジトリを初期化する」というボタンが出るので、これをクリックします。

初期化すると、ずらーっとファイル名の一覧が出ます。
ファイルの右横には「U」の文字があります。
ここで、一番上の変更の文字横付近をマウスオーバーすると、＋の文字が現れますので、それをクリックします。
これはステージングという作業になります。

この＋ボタンを押すと、今まで「U」だったファイル横の文字が、ほぼ「A」に代わります。

最後に、テキストフォームに、あとで見てわかりやすい文字を入力し、その上にあるチェックマークをクリックするとコミットします。

この段階では、まだ、ローカルのGitにコミットしただけです。

ローカルディスクのプロジェクトのフォルダの中に.gitフォルダが生成されています。

すでにGithubにアカウントを持っている人はスキップ。

Githubに登録するボタンを押します。

ユーザー名とメールアドレス・パスワードを入力してアカウントを作成します。
先ほど、Gitで使用したアカウント名とメールアドレスで作成します。
作成が終わったら、ログインします。

上のナビバーの右端の＋ボタンを押し、new repository を選び、新しくリポジトリを作成します。

＊の部分だけ記入でOKです。

Repository name はプロジェクト名、Publicを選択すれば一般公開、Privateを選択で非公開となります。
自分は、リポジトリは基本的に非公開で作成し、プロジェクトが完成したら公開する手順にしています。
あとは、Create Repository をクリックで作成です。

次の画面で、Gitで使用するsetupURLが書かれているので、コピーしておきます。
一番上の青いゾーンに書かれている.gitで終わるURLです。

VSCodeに戻って、ターミナルに次のコードを入力します。

git remote add origin さっきコピーした.gitのURL

git branch -M main

git push -u origin main

これでGithubのリポジトリとローカルファイルが同期されました。

ここからは、ファイルを変更する→VSCodeの左メニューのソース管理クリック→ステージング→文字入力してコミット→変更の同期というボタンが出るので、これをクリックすることでPUSHと同じことになるのでコマンド不要です。

新しくBranchを作成したいときがあります。
その際は、VSCodeの下の青い帯のところを注目。
左下に現在のBranch名（main）がありますが、これをクリックします。

新しい分岐の～といった選択肢が出てくるので、新しい分岐の作成元を選びます。
新しいブランチ名を入力し、ブランチ元を尋ねられるので、現在のブランチ名（main）を選びます。

下のブランチ名がmainからnew_section01に代わりました。
さらに、ブランチの発行ボタンが新しくできましたので、これをクリックします。

適当に新規ファイルを作成すると、左メニューのソース管理にマークが出ます。

いつも通りコミットして、変更の同期を押します。

Guthubで作成したリポジトリの画面で、新しいブランチ名が、mainの下にできています。

新しいブランチ名でコミットした内容は、mainではなくnew_section01を選ぶことで表示できます。

現在のnew_section01からmainにブランチを戻すには、またVSCodeの下の青いバーの左端、new_section01という文字をクリックし、上に表示される窓からmainを選ぶだけです。

先ほどnew_section01で作ったtest.phpは消えています。これをmainに入れるには、Guthubの画面で、Compare&pull requestして、Mergeすると同期されます。