Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成)

Visual Studio Code でGitリポジトリを利用する手順を紹介します。

手順

Visual StudioCodeを起動します。

左側のツールバーの[ソース管理]のボタンをクリックします。

オレンジの丸で囲まれたボタンが[ソース管理]のボタンです。

ボタンをクリックすると、ソース管理の画面が表示されます。Visual Studio Codeのみをインストールした状態では下図の画面が表示されます。 [リポジトリのクローン]ボタンはグレーアウトしておりクリックできません。Gitのインストールが必要な旨のメッセージがソース管理パネル内に表示されています。
[gitをインストール]のリンクをクリックします。

[gitをインストール]のリンクをクリックするとWebブラウザが起動し、Git for Windows のページが表示されます。
Git for Windows をダウンロードしてインストールします。インストール手順の詳細はこちらの記事を参照してください。

Git for Windows のインストール後、Visual Studio Codeを再起動します。再起動後、[ソース管理]のボタンをクリックします。下図の画面が表示されます。[フォルダーを開く]ボタンと[リポジトリのクローン]ボタンが有効になりクリックできる状態になります。

GitHub からリポジトリをクローンする

GitHubからリポジトリをクローンします。ソース管理画面の[リポジトリのクローン]ボタンをクリックします。上部のテキストボックスにフォーカスが移りますので、 GitリポジトリのURLを入力します。URLを入力できたら[Enter]キーを押します。

下図の[フォルダーの選択]ダイアログが表示されます。ローカルリポジトリを配置するフォルダを選択します。

フォルダの選択ができると、リポジトリの複製が始まります。

リポジトリがGitHubの場合、下図のウィンドウが表示されます。ウィンドウ中央の [Sign in with your browser] のボタンをクリックします。

[Authorize Visual Studio Code to access GitHub]のページが表示されます。[Continue]ボタンをクリックします。

下図の[Sign in GitHub]のページが表示されます。GitHubのIDとパスワードを入力し、[Sign in]ボタンをクリックします。

下図の[Authorise Git Credential Manager]の画面が表示されます。ページ下部の[Authorize GitCredentialManager]ボタンをクリックします。

[Authentication Succeeded]画面が表示されます。

Visual Studio Code のウィンドウでは、Gitリポジトリのクローン作成が始まります。

クローン作成が完了すると、クローンしたリポジトリを開くかのポップアップがウィンドウ右下に表示されます。[開く]ボタンをクリックします。

初回に開く場合は、下図の[このフォルダー内のファイルの作成者を信頼しますか?]のダイアログが表示されます。[はい、作成者を信頼します] のボタンをクリックします。

下図の画面が表示されます。ウィンドウ左側に[エクスプローラー]パネルが表示され、Gitリポジトリのファイルが表示されています。

ファイルをクリックすると、ファイルが開かれ、編集できる状態になります。

Azure DevOps のリポジトリをクローンする

Azure DevOps のリポジトリをクローンする手順です。
Azure DevOpsのリポジトリのページにアクセスします。Repos画面のファイル画面の右上にある[クローン]ボタンをクリックします。

ウィンドウの右側に[リポジトリの複製]パネルがスライドイン表示されます。[コマンドライン]セクションのテキストボックスに表示されている、 GitリポジトリのURLの文字列をコピーする。または、[IDE]セクションのコンボボックスを開き [CS Code でのクローン作成] を選択してクリックします。

Visual Studio Code のウィンドウに戻り、[ソース管理]ボタンをクリックし、ソース管理パネルを表示します。パネル内の[リポジトリのクローン]ボタンをクリックします。上部のテキストボックスにフォーカスが移りますので、Azure DevOpsでコピーしたGitリポジトリのURLをペーストします。