VS Codeは間違いなく最も人気のあるコードエディタの1つです。同様に、GitHubはコーダーの間で最も人気のあるプラットフォームです。
2つのMicrosoft製品はうまく融合しています。VS Codeでシームレスにコーディングし、GitHubリポジトリに変更をプッシュすることができます。同じアプリのインターフェイスからこれらすべてを行うことで、生活がとても楽になります。
VSコードにGitHubを追加するには？ 実はとても簡単です。
このチュートリアルでは
- VSコードにGitHubアカウントを統合する方法
- GitHubからVS Codeへリポジトリをクローンする方法
- VS CodeからGitHubに変更をプッシュする方法
いい感じ？どうなるかな
前提条件
Gitがコンピューターにインストールされていることを確認してください。
これを行う一つの方法は、VS Codeのソースコード管理ビューに行くことです。Git がインストールされていない場合は、ダウンロードするように指示されます。
もうひとつ必要なのは、Gitのユーザー名とEメールを設定することです。
VS Code への GitHub の追加
VS CodeにはGitHubとの統合機能が組み込まれています。リポジトリをクローンしたり、変更をプッシュしたりするために拡張機能をインストールする必要はありません。
左のサイドバーから「ソースコード」タブに移動します。"" または "" オプションが表示されます。""をクリックし、GitHubリポジトリへのリンクを入力するか、""をクリックします。
すると、GitHub にサインインするようにメッセージが表示されます。
をクリックするとGitHubのログインページが開きます。
リポジトリをクローンしようとすると、このようなメッセージが表示されます。
数秒で GitHub アカウントにログインできるようになります。
VS CodeでGitHubにログインしていることをどうやって確認しますか？
トップ画面にGitHubのリポジトリが表示されます。
あるいは、左下のプロフィールアイコンをクリックして GitHub アカウントにログインしていることを確認することもできます。
GitHub リポジトリのクローン
すでに GitHub でプロジェクトを開いていて、別の GitHub リポジトリをクローンしたい場合は、いくつかの方法があります。
Git コマンドを使ってリポジトリをディスクにクローンし、そのリポジトリフォルダを VS Code で開きます。
コマンドラインを使いたくない場合は、VS Codeをお使いください。
とても簡単です。VSコードで新しいウィンドウを開きます。
これで新しいきれいなエディタができます。ウェルカムスクリーンが表示されたら、そこから "Clone Repository "のクイックリンクをクリックしてください。
それ以外の場合は、左サイドバーから「」タブに移動し、「」ボタンをクリックします。
上部にビューが開きます。GitHub リポジトリの URL を直接コピーすれば、そこから自動的にクローンリンクを取得できます。
クローンの倉庫をどこに置くか尋ねられます。
クローンしたリポジトリをVS Codeで開くかどうか聞いてきます。すぐに対応したい場合は、先に進んでください。
クローンされたリポジトリだけでなく、VS Codeは追加したフォルダの作者を信頼するかどうかを尋ねます。
さて、VS Code で GitHub リポジトリをクローンしました。これを修正して GitHub にプッシュする方法を見てみましょう。
VS CodeからGitHubへの変更のプッシュ
さて、コードに変更を加えて、そのコミットをリポジトリにプッシュしたいとしましょう。
ファイルに変更を保存すると、VS Codeは変更されたファイルを "M "で示し始めます。新しいファイルの場合、記号は "U "になります。
左からSource Controlに移動し、コミットメッセージを入力し、Commitの横のボタンをクリックして""を選択します。
Gitのユーザー名とEメールを設定していない場合は、次のようなエラーが表示されます。
ユーザー名と電子メールは、グローバルまたはリポジトリレベルで設定できます。選択はあなた次第です。
コミットやプッシュに成功した場合、エラーは表示されません。変更ファイルや新規ファイルの横にある "M" や "U" のマークは消えます。
GitHub のリポジトリにアクセスして、プッシュが成功したことを確認できます。
変更をプッシュせずにローカルにコミットすることもできます。ここで git コマンドを使えば、これまでと同じような操作を行うことができます。プルリクエストの作成やリフレッシュなどのオプションもあります。
GitHubの公式エクステンションを使って、次のレベルへ！
専用の公式エクステンションがあり、リポジトリに対する他の人のプルリクエストを管理したりマージしたりすることもできます。また、リポジトリのオープンイシューを見ることもできます。GitHub と VS Code を統合するには、こちらのほうがずっとよい方法でしょう。
VS Codeを開き、左カラムの「Extensions」タブを開きます。ここで"GitHub Pull Requests and Issues" を検索します。GitHub 自体の公式プラグインです。確認済みのチェックが表示されます。
インストールボタンをクリックし、エディタに 拡張機能インストールします。
この拡張機能を使えば、他の人が共同作業をしていてもリポジトリを管理することができます。
VS CodeでのGitとGitHubの完全な統合は良いことです。コマンドラインが嫌いな人は、この統合を気に入るでしょう。
このチュートリアルで、VS Code に GitHub をシームレスに追加できるようになったと思います。
