この記事の最終更新日: 2023年10月9日
VSCode（Visual Studio Code）とGitHubを連携させることで、VSCode上から直接、コードのプッシュやプルリクエストを行うことができます。以下の手順に従って設定を行ってください。
Gitのインストール
VSCodeがGitHubと連携するためには、まずローカルシステムにGitがインストールされている必要があります。Gitがまだインストールされていない場合は、Gitの公式からダウンロードし、インストールします。
VSCodeでGitを有効化
VSCodeを開き、左のActivity Bar（アクティビティバー）にある「Source Control」（ソースコントロール）アイコンをクリックします。Gitがまだ有効化されていない場合は、「Initialize Repository」（リポジトリの初期化）をクリックしてGitを有効化します。
GitHubアカウントとの連携
VSCode上でGitHubと連携するためには、GitHub Pull Requests and Issuesという公式の拡張機能をインストールすると便利です。
- 左のActivity Bar（アクティビティバー）にある「Extensions」（拡張機能）アイコンをクリックします。
- 検索バーに「GitHub Pull Requests and Issues」と入力し、表示された拡張機能をインストールします。
GitHubにサインイン
拡張機能をインストールしたら、下記の手順でGitHubにサインインします。
- VSCodeの左下にある「Accounts」（アカウント）ボタンをクリックします。
- 「Sign in to GitHub.com」（GitHub.comにサインイン）をクリックします。
- ブラウザが開き、GitHubのログインページが表示されます。アカウント情報を入力してログインします。
- ログインに成功すると、ブラウザ上で「You’re all set!」と表示され、VSCode側でもGitHubアカウントがリストアップされます。
リポジトリのクローン
GitHub上のリポジトリをローカルにクローンします。
- VSCodeの左のActivity Barにある「Source Control」をクリックします。
- 「Clone Repository」（リポジトリのクローン）をクリックします。
- クローンしたいリポジトリのURLを入力します。GitHubのリポジトリページ上にある「Code」ボタンからURLを取得できます。
- クローン先のディレクトリを選択します。
これらのステップを完了すると、VSCodeからGitHubリポジトリへの直接アクセスが可能になります。これにより、コードの変更を行い、それをステージング、コミット、プッシュすることができます。
コードの変更、ステージング、コミット
- VSCodeでファイルを編集します。編集が終わったら保存します（Ctrl+SまたはCmd+S）。
- 保存後、左側のActivity Barにある「Source Control」アイコンをクリックします。編集したファイルが変更リストに表示されています。
- ファイル名の横にある「+」アイコンをクリックするか、またはファイルを右クリックし、「Stage Changes」を選択して、変更をステージングします。
- 「Message」フィールドにコミットメッセージを入力し、「✔」アイコンをクリック（またはCtrl+EnterまたはCmd+Enter）してコミットします。
GitHubへのプッシュ
- コミットが完了したら、画面の右上にある「…」メニューをクリックし、「Push」を選択します。これでコミットがGitHubリポジトリにプッシュされます。
以上がVSCodeからGitHubに直接コードをプッシュする基本的なフローです。また、VSCodeからプルリクエストを作成したり、マージすることも可能です。その操作については「GitHub Pull Requests and Issues」拡張機能のドキュメンテーションを参照してください。
大阪のエンジニアが書いているブログ。
コメント