VS CodeにGitHubリポジトリを追加する方法

Virtual Studio Code（VS Codeとも呼ばれる）は、最も人気のある統合開発環境（IDE）の一つです。無料で、多数の言語に対応し、使いやすく、ツールをさらに便利にする豊富な拡張機能も提供しています。

VS Code が優れた選択肢であるもう一つの理由は、GitHub リポジトリのコードを簡単に操作できることです。GitHub リポジトリを追加できるだけでなく、「GitHub Pull Requests and Issues」という便利な拡張機能を使えば、GitHub のプルリクエストや問題の確認と管理もより効率的に行えます。

まず、拡張機能をインストールしてGitHubアカウントにログインする方法を説明します。完了したら、VS CodeにGitHubリポジトリを追加します。

参照: 採用キット: バックエンド開発者 (TechRepublic Premium)

必要なもの

これを動作させるために必要なのは、VS Code の実行インスタンスとログイン可能な GitHub アカウントだけです。デモでは Pop!_OS 上の VS Code を使って説明しますので、お使いの OS に合わせて Git のインストール手順を変更する必要があります。以上です。さあ、始めましょう。

Gitのインストール方法

最初に行うべきことはGitのインストールです。VS CodeをインストールしてもGitは追加されないため、手動でインストールする必要があります。

Ubuntu ベースのディストリビューションに git をインストールするには、ターミナルウィンドウを開いて次のコマンドを実行します。

sudo apt-get install git -y

コマンドが終了したら、続行する準備が整います。

GitHubのプルリクエストと問題拡張機能のインストール方法

VS Codeを開き、左下にある歯車アイコンをクリックします。ポップアップメニュー（図A）から「拡張機能」をクリックします。

図A

表示されるウィンドウ (図 B )で「 GitHub 」と入力し、「 GitHub Pull Requests and Issues 」の「インストール」をクリックします。

図B

図 B: VS Code に GitHub プルリクエストと問題拡張機能をインストールする。

インストールが完了すると、VS Code の左側のサイドバーに新しい GitHub アイコンが表示されます。そのアイコンをクリックすると、「サインイン」ボタンが表示されます（図 C）。

図C

VS CodeでのGithubログイン — 図 C: 拡張機能を使用する前に GitHub にサインインする必要があります。

「サインイン」をクリックすると、Visual Studio Code が GitHub を使用してサインインしようとしていることを通知するポップアップが開きます。「許可」をクリックすると、デフォルトのブラウザが開きます。GitHub アカウントにまだサインインしていない場合は、サインインしてください。認証に成功すると、VS Code にリダイレクトされ、拡張機能が GitHub アカウントに接続され、使用できる状態になっていることがわかります (図 D )。

図D

Visual Studio Code 編集の進化したメニュー — 図 D: VS Code を GitHub アカウントに正常に接続しました。

特定の GitHub リポジトリを VS Code に追加する方法

それでは、VS CodeにGitHubリポジトリを追加してみましょう。デフォルトのブラウザでGitHubアカウントに戻り、追加したいリポジトリのアドレスを見つけてください。対象のリポジトリに移動したら、「コード」ドロップダウンをクリックし、「HTTPS」の下にあるURLをコピーします（図E）。

図E

GitHubのリポジトリアドレスの場所 — 図 E: GitHub 内のリポジトリアドレスの場所。

VS Codeに戻り、左側のナビゲーション（上から3番目）にあるソース管理アイコンをクリックします。ソース管理ウィンドウ（図F）で、「リポジトリのクローン」をクリックします。

図F

VS Code ウィンドウの上部にアドレスバーが表示されます (図 G )。

図G

VS Codeソース管理のアドレスバーは、リポジトリのURLを貼り付ける場所です。 — 図 G: VS Code ソース管理アドレスバーは、リポジトリの URL を貼り付ける場所です。

アドレスバーにリポジトリのアドレスを貼り付け、キーボードのEnterキーを押します。すると、ローカルリポジトリの場所を選択するように求められます。ファイルマネージャーのポップアップで、ソースを保存するディレクトリを選択してください。

完了すると、デフォルトのウェブブラウザが再び開き、VS Code によるアカウントへのアクセスを承認するよう求められます。プロンプトが表示されたら、「Visual Studio Code を承認」をクリックします。VS Code に戻るので、アプリに作成者を信頼していることを伝える必要があります（図 H）。

図H