「VScode」でGithubにPull Requestする方法を解説!
VScode(Visual studio code)でGithubにPull(プル)Requestする方法を紹介します。VScode(Visual studio code)でGithubにPull(プル) Requestする場合はできることを把握しましょう。
目次
- 1Visual studio code/VScodeとは?
- ・マイクロソフトのソースコードエディタ
- 2「Visual studio code/VScode」でGithubにPull Requestでできること
- ・主なできること
- 3「VScode」でGithubにPull Requestする方法~導入~
- ・インストールの手順
- ・ログイン/サインインする
- 4「VScode」でGithubにPull Requestする方法~使用手順~
- ・新しいブランチの作成手順
- ・Pull Requestの作成手順
- ・指定したPull Requestの詳細を見る手順
- ・Descriptionの仕様手順
- ・変更ファイルの参照手順
- ・今後改善を希望する点
- ・最後に
- ・合わせて読みたい!Gitに関する記事一覧
Visual studio code/VScodeとは?
VSCode の GitHub Pull Requests 拡張というのがあるんですが、大きな pull request のレビューに大変便利です。ブラウザと異なり、ファイルをひとつずつ差分確認できます。ファイルも全体が表示されるので差分周辺のコードも手間なく確認できます。控えめに言って神。https://t.co/SY83r2XBK3
— ymmt (@ymmt2005) August 3, 2019
Visual studio code/VScodeとは、ソースコードエディタのことです。Windows、Linux、MacのOSで使えるのが特徴で、Pull Requestという拡張機能を追加することができます。
マイクロソフトのソースコードエディタ
Visual studio code/VScodeとは、マイクロソフト社が開発したものです。デバッグ、Gitクライアントの統合、シンタックスハイライトなどの機能を持ちます。
ここではVisual studio code/VScodeのPull Request(プル)をインストールする方法を紹介します。
「Visual studio code/VScode」でGithubにPull Requestでできること
「Visual studio code/VScode」にGithubにPull Requestをインストールすると、できることが増えます。ここからは、「Visual studio code/VScode」でGithubにPull Requestでできることを紹介します。
主なできること
「Visual studio code/VScode」でGithubにPull Requestでできることは、以下の4種類です。ワンクリックでローカルにチェックアウトできる特徴が特に便利で、動作確認しやすいというメリットがあります。
PR のリストの参照 |
PR 内の変更ファイルリストの参照 |
変更ファイルの参照とコメント登録(markdown サポート) |
ワンクリックでローカルにチェックアウトできる |
「VScode」でGithubにPull Requestする方法~導入~
「VScode」でGithubにPull Requestするのを初めて行う場合は、まずプルに必要な完了を整えます。ここではインストールの方法を紹介していきます。
インストールの手順
「VScode」でGithubにPull Requestするためには、まずPCにGit for WindowsとVScodeがインストールされている必要があります。下のリンクからGit for Windowsのインストールサイトへアクセスしましょう。
Git for WindowsをPCにインストールできたら、PC画面下にファイルが表示されます。これをクリックしましょう。
Git for Windowsのインストーラー画面が表示されるので、利用規約で「Next」をクリックしましょう。
2番目以降の画面はインストール先や使用言語などを設定していきますが、基本的にデフォルトのままで「Next」をクリックすれば問題ありません。
Git for Windowsをインストールしている画面になるので、終わるまで1分前後待ちましょう。
Git for Windowsのインストーラーの最後の画面で、「Finish」アイコンをクリックして完了です。
VScodeのインストール手順
Visual studio codeをインストールサイトへ下のリンクからアクセスして、「Windows」アイコンをクリックしてください。
PC画面左下にVisual studio codeのファイルが表示されるので、ダウンロードし終わるまで待ちましょう。
Visual studio codeの利用規約画面になるので、表示されている「同意する」のチェックアイコンをオンにします。
Visual studio codeの利用規約へ同意する設定にできたら、「次へ」アイコンをクリックしてください。
GithubのVisual studio codeのインストール先を設定する画面になるので、デフォルトのままで良ければ「次へ」アイコンをクリックします。それ以降の画面もデフォルトのままでも問題ありません。
GithubのVisual studio codeをインストールし終わったら、最後の画面で「完了」アイコンをクリックしましょう。
Github Pull Request(プル)のインストールサイトに下のリンクからアクセスしましょう。次に「Install」アイコンをクリックします。
Github Pull Request(プル)をPCにインストールすることを確認するポップアップが表示されるので、「Continue」アイコンをクリックします。
画面上部に「Visual studio codeを開きますか?」というポップアップが表示されるので、「Visual studio codeを開く」アイコンをクリックします。
Github Pull Request(プル)をインストール画面が表示されるので、猫アイコンの下にある「Install」アイコンをクリックしてください。
Github Pull Request(プル)をインストール画面で、アイコンが「Uninstall」になったらインストールは完了です。
ログイン/サインインする
Github Pull Request(プル)にログイン/サインインする方法は、PCのスタートメニューを開いて「Git」の項目をクリックしてください。
Git Bashの項目をクリックして、Github Pull Request(プル)へのログイン/サインインできる画面を表示します。
Git Bashの画面が表示されたら、コマンドを入力する画面になります。以下のコマンドを入力しましょう。
「$ git config --global user.name 'username'
$ git config --global user.email 'username@example.com'
$ git config --global core.editor 'code --wait'
$ git config --global merge.tool 'code --wait "$MERGED"'
$ git config --global push.default simple」
次にGithub Pull Requestの画面右下にある「Sign in」アイコンをクリックしてサインインします。
「VScode」でGithubにPull Requestする方法~使用手順~
今までしたことがなくて気づかなかったんだけど
— さるきち💥こたつの中でうとうとしたい🍵 (@TIGER_K_TW) October 27, 2019
1 #Github に README だけ作る
2 #VSCode で PULL
3 WEB で Github 側を修正
4 VSCode 側で修正
5 PULL 時に #競合
6 VSCode で VSCode 側を生かしマージ
7 ステージにあげると、画面から README がいなくなる
処理はされているのになぜだろう?🤔
「VScode」でGithubにPull Requestする方法は、インストール方法だけではなく、使用する方法も知っておく必要があります。ここからGithub Pull Request(プル)の使用方法を説明していきます。
新しいブランチの作成手順
Github Pull Request(プル)で新しいブランチを作成する手順は、画面左下にあるブランチ名をクリックしてください。
Pull Requestの作成手順
次に「新しいブランチを作成」をクリックしましょう。Githubのブランチ名は分かりやすいものを入力してください。次に作成ボタンをクリックしてください。
作成ボタンを選択
Githubのブランチ名を入力したら、作成ボタンをクリックしてください。作成ボタンをクリックすると新しいブランチの作成ができます。作成ボタンをクリックすると、ダイアログ画面になります。
画面にダイアログが表示される
作成ボタンをクリックすると、Github Pull Requestの画面にダイアログが表示されます。画面上で、作成ボタンをクリックしたブランチ名のダイアログが正しい内容化確認しておきましょう。
ダイアログ画面には、Pull Requestのさまざまな情報が表示されています。ブランチを作成後は必ずダイアログを確認してください。
指定したPull Requestの詳細を見る手順
指定したターゲットブランチをVisual studio codeのGithub Pull Request(プル)の詳細を見る手順は、以下の通りです。
ターゲットブランチを選択
指定したGithubのPull Requestのターゲットブランチ詳細を見る手順は、Pull Request(プル)を指定して開きましょう。指定したターゲットブランチの「Description」をクリックしてください。
Descriptionの仕様手順
ターゲットブランチのGitHub上の「Conversation」タブが、エディタ部分に表示されます。ここでターゲットブランチの詳細を確認できます。
変更ファイルの参照手順
GitHub上のターゲットブランチの「File Changed」では、ターゲットブランチの変更ファイルの参照もできます。「Description」というコマンドより下の部分をクリックすると、変更ファイルを参照できます。
今後改善を希望する点
マルチルートワークスペースに対応する機能、マージできる機能、指定したレビュアの設定などができる機能などが追加されると、より一層使いやすくなります。
Githubの指定したターゲットブランチの変更ファイルなどを確認しやすい機能、ダイアログ機能などは優れています。
最後に
いかがでしたか?Visual studio codeのGithub Pull Request(プル)をインストールする方法や使用する方法は、基礎知識さえあればできます。初心者でも挑戦してみましょう!