VSCodeからGitHubにプッシュできるまでが意外に楽じゃなかったのでメモしておく。
前提条件
- VSCodeインストール済み
https://code.visualstudio.com/ - Gitインストール済み
https://git-scm.com/downloads - GitHubで新規レポジトリ作成できる状態
環境
- Windows10 v1909
- VSCode V1.52.1(2021/01/09時点最新)
- Git V2.27.0(2020/7/23時点最新)
手順
GitHubで新規レポジトリを作る
今回はGitHubのレポジトリをプルしてくるため、レポジトリを先に作成しておく。
↓の"Step 2. Create a Branch"まで実施。developブランチを作ってそちらにプッシュするため、developブランチを作成。
https://guides.github.com/activities/hello-world/
ローカルにフォルダを作成。
GitHubと同期するための作業フォルダを作成しておく。
VSCodeからリモート先Gitを設定する
GitHubの準備が整ったので、次にVSCodeからGitHubにアクセスする。
（この設定がないとプルしてもリモート先が～と怒られる）
まずはVSCodeを開いて「フォルダを開く」メニューから前項で作成したフォルダを開きます。
左のソース管理を選択すると、「現在開いているフォルダーにはGitレポジトリがありません」と表示されている。
下の「レポジトリを初期化する」をクリックする。エクスプローラーでフォルダ配下に移動すると、隠しフォルダで.gitフォルダが作成される。
これでGitメニューが選択できるようになる。・・・しかしググるとGUIからの設定がなさそう(´・ω・`)
しかたないのでターミナルよりコマンド実行する。
git remote add origin <GitHubで作成したリポジトリのURL>
レポジトリのURLは前もって作成したレポジトリをブラウザで開くと、「↓ Code」ボタンがあるのでそれをクリックしたときに表示されているURLをコピーすればよい。
GitHubの公式ドキュメントを念のため貼っておく。
https://help.github.com/ja/github/using-git/adding-a-remote
初回のみGitのユーザーデータを設定する
このタイミングだったか失念したが、何かのコマンド実行でGitからユーザーデータが未設定の旨で下記のURLに促される。
https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup
要するに自分を名乗りなさいよと。
下記のコマンドを実行すればいい模様。
（名前がJohn、メアドがjohndoe@example.comの場合）
git config --global user.name "John"
git config --global user.email johndoe@example.com
GitHubの公式ドキュメントを念のため貼っておく。
https://help.github.com/ja/github/setting-up-and-managing-your-github-user-account/setting-your-commit-email-address
ちなみに私は直接.gitconfigファイルを開いて、以下を追加することで対応した。
[user]
name=John
email=johndoe@example.com
.gitconfigファイルの場所は前述の公式ドキュメントに記述されていて、ターミナルでecho $HOMEと入力するとわかる。
Windowsの場合、ユーザー名がhogeならc:\Users\hogeに配置されている、もしくは配置する必要がある。
リモートからブランチをフェッチする
この状態ではまだリモート先を設定しただけで、リモートのブランチ状況をローカルで把握していない。
そこでfetchコマンドでリモートからブランチ情報を取得する。
git fetch
実行すると以下のようなログが確認できる。
これでようやくローカルでリモート先のブランチが見える状況に整った。
* [new branch] develop -> origin/develop
* [new branch] master -> origin/master
念のためGitのドキュメントを張っておく。
https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AE%E4%BD%9C%E6%A5%AD
masterブランチからdevelopブランチに切り替え
これでプッシュできると思ったら、プッシュ先はdevelopブランチなので切り替えが必要と気が付く。次のコマンドで実行した・・・( ´ー｀)y-~~
git checkout develop
最下部のステータスバー左隅のカレントブランチ名がmaster固定の場合、前述のgit fetchが実行されていないので、実行してみてください。
正しく行っていれば、エクスプローラーにGitHubに作成されているファイルが表示されるようになります。
そして、最下部のステータスバー左隅のカレントブランチ名がdevelopに代わります。
ブランチとは？の公式ドキュメントを念のため貼っておく。
https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E6%A9%9F%E8%83%BD-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%A8%E3%81%AF
念願のGitHubへのプッシュｷﾀ――(ﾟ∀ﾟ)――!!
ここまでくれば後は無人のゴールにパスするだけ。
適当に新規ファイルを作成＆文字入力すると、ソース管理が変更を感知してアイコン右下に数値が付与される。
アイコンをクリックしてソース管理に切り替え、ステージングからコミット＋コメント入力してローカルは更新完了。
あとは右上の'・・・'メニューからプッシュを選択すればGitHubに反映される。
初回GitHubへのログインダイアログが表示され、GitHubへのログインが必要になる。（一定間隔でアクセストークン更新のためログインが必要になるはず）
参考
終わった後に調べてみると類似がいくつかあったので載せておきます。
ググって上位3件というのは内緒(;^_^A
https://blog.janjan.net/2018/07/11/visual-studio-code-remote-repository/
http://www.atmarkit.co.jp/ait/articles/1507/21/news017_3.html
https://azriton.github.io/2017/08/23/Visual-Studio-Code%E3%81%A7Git%E3%82%92%E4%BD%BF%E3%81%86/
Qiitaにもすでにあった(;^ω^)
https://qiita.com/masakinihirota/items/8b4d3705c009d7929ca8