演習 - Visual Studio Code for the Web で既存のリポジトリを操作する

完了

あなたは、ブラウザーベース エディターで自分のスタートアップ企業のコードを閲覧して編集したいと考えています。 あなたは、VS Code for the Web でリモート リポジトリを操作する必要があります。

この演習では、 Microsoft VS Code リポジトリ を開き、リモート リポジトリを開き、軽量の変更を行い、統合されたソース管理エクスペリエンスを表示する方法を練習できるようにします。

リポジトリを開く

まずは、リモート リポジトリを開いてファイルを閲覧します。

  1. https://vscode.dev の [エクスプローラー] ビューで、[リモート リポジトリを開く] ボタンをクリックします。

    VS Code for the Web のエクスプローラー ビューの [リモート リポジトリを開く] 機能が強調表示されているスクリーンショット。

  2. [GitHub からリポジトリを開く] オプションを選択します。 プロンプトが表示されたら、GitHub アカウントにログインします。

    コマンド パレットの [GitHub からリポジトリを開く] プロンプトを示すスクリーンショット。

  3. ダイアログ ボックスに「microsoft/vscode」と入力し、最初の選択肢を選択します。

    microsoft/vscode を検索した後、リモート リポジトリを開くプロンプトに表示されている microsoft/vscode リポジトリを強調表示したスクリーンショット。

  4. リポジトリはすぐに読み込まれ、コードがローカルにクローンされることはありません。 これで、普段と同じようにコードを閲覧して編集できるようになりました。

または、リポジトリ URL の前に https://vscode.dev/github/ を付けることで、リモート リポジトリをすばやく開くこともできます。 たとえば、このリポジトリを開くにはブラウザーに https://vscode.dev/github/microsoft/vscode と入力するだけで済みます。

コードの編集

リポジトリが開いたので、コードの編集を行い、ソース管理に反映された編集内容を確認できるようになりました。

  1. 任意のファイルで、小さな変更を行います。 変更内容が自動的に保存されることに注意してください。これは、VS Code for the Web の既定のエクスペリエンスです。

  2. サイド バーの [ソース管理エクスプローラー] に移動します。 前の手順で行った変更が保留中の変更として表示されていることに注意してください。

    VS Code for the Web のソース管理エクスプローラー ビューを示すスクリーンショット。

  3. ブラウザー内のソース管理エクスプローラー エクスペリエンスは、デスクトップ アプリケーション内のものと似ています。 たとえば、変更のコミットとプッシュ、ブランチの切り替え、pull request の作成などを行うことができます。

  4. あなたは現在、GitHub リポジトリを閲覧しているため、GitHub の pull request を確認することもできます。 サイド バーの [GitHub] ビューに移動すると、レビューが可能な pull request の一覧が表示されます。

    GitHub ビューのリポジトリに対するアクティブなプル要求の一覧を示すスクリーンショット。

    この機能は、VS Code Desktop でも動作する GitHub Pull Requests and Issues 拡張機能を利用しています。 この拡張機能は、VS Code for the Web で GitHub アカウントにログインすると、既定で有効になります。

これで無事に、リモート リポジトリを開き、編集を行い、統合されたソース管理に慣れることができました。 VS Code for the Web を使用する主な利点の 1 つは、軽量なブラウザーベース エディター内ですぐに利用できる機能セットです。

次のセクションでは、1 つの基本的なコマンドを使用して、VS Code for the Web の軽量機能から VS Code Desktop の完全な機能セットに移行する方法を学習します。