文系Webエンジニアの技術メモとたまに旅のメモ

未経験文系エンジニアとして働いてます。アウトプットとして簡単に技術メモを残していきます。たまに旅関係のも趣味で残していこうと思ってます。

【GitHub/VSCode】Gitコマンド不要!VSCodeの画面でGitHubへaddからpushまでする方法

VSCodeの機能として使われてるGitをコマンドを使用せずにGitHubにpushするまでの手順を記していきます。
今回は、GitHubリポジトリを登録している事が必要になります。

1.事前準備

・Git
GitHubに登録してあるリポジトリ

Gitをまだインストールしていない方はこちらの記事を参考にしてみてください。

44igarashi.hatenablog.com

44igarashi.hatenablog.com

GitHubリポジトリをまだ登録していない方はこちらの記事を参考にしてみてください。

44igarashi.hatenablog.com

44igarashi.hatenablog.com

2.修正した資材をステージング環境へ (git add)

VSCodeを開きます。
左サイドバナーの上から3番目のアイコンをクリックします。
表示されている数字は、差分があるファイル数です。

f:id:igarashi44:20200705005603p:plain

差分があるファイルの一覧が表示されます。
「+」を押すとステージング環境へあげることができます。

1ファイルずつ選択しステージング環境へあげる場合:
・ファイルにカーソルを合わせ「+」をクリックします。

「+」を押すと実行されるGitコマンド
git add src/Controller/UsersController.php

前ファイルを一気にステージング環境へあげる場合
・変更項目の右に表示されている「+」をクリックします。

「+」を押すと実行されるGitコマンド
git add *

f:id:igarashi44:20200705011503p:plain

3.ステージング環境へあげたファイルをコミット (git commit -m '')

ステージング環境へあげたファイルをコミットしていきます。

コミットされるファイルは、「ステージング済みの変更」項目に表示されているファイルのみです。
今回は「UsersController.php」と「UsersTable.php」がコミット対象です。

上部の「メッセージ」入力欄に任意のコメント内容を入力します。

コミット対象のファイルとメッセージを確認したら、上のチェックマークをクリックするとコミットされます。

f:id:igarashi44:20200705011132p:plain

チェックマークを押すと実行されるGitコマンド
git commit -m "{メッセージに入力したコメント}"

4.ステージング環境へあげたファイルを取り消したい場合

ファイルの右に「-」が表示されるのでそちらをクリックします。
ステージング項目から変更項目にファイルが移動します。

「-」を押すと実行されるGitコマンド
git reset head {ファイル名}

5.コミットしたファイルをGitHubリポジトリへプッシュ (git push)

先ほど、コミットした内容をGitHubのリモート登録されているリポジトリへプッシュしていきます。
右上の「・・・」をクリックしすると表示される「プッシュ」を選択します。

f:id:igarashi44:20200705015826p:plain

これでpushは完了です!
GitHubリポジトリ画面を表示してちゃんと反映されているか確認しましょう。