Visual Studio Codespacesの概要–Cloud IDE
Visual Studio Codespaces(旧Visual Studio Online/VSO)webベースのIDEを使用できるようになりました。 人気のあるVisual Studioコードエディタに基づいて、ソースコードを記述して作業するための使い慣れた感触とワークスペースを提供します。. これにより、Visual Studio Code拡張機能をサポートする拡張性も提供されますが、現時点ではサポートされるVS Code拡張機能の数や種類はわかりません。
最初のVisual Studio Codespaceの作成&請求プラン
ここでは、Visual Studio Codespace(MicrosoftのクラウドベースのIDE)へのログインとツールの概要を説明します。
- まず、ウェブブラウザを開いてhttps://online.visualstudio.com
- に移動すると、初めてログインすると、環境がないことを示す画面が表示され、コードスペースの作成ボタンが表示されます。
- 「コードスペースの作成」ボタンをクリックします。
- これにより、[請求プランの作成]ペインが開きます。 これを使用して、Azureサブスクリプション内に作成する新しいVisual Studio Codespaces課金プランを指定します。
このペインで次の値を指定します。- サブスクリプション:ログインがアクセスできるAzureサブスクリプションを選択します。
- : 請求プランをホストするAzureリージョンを選択します。
- 必要に応じて、詳細オプションを展開して、次の構成を表示できます。
- プラン名:Azureサブスクリプション内で作成する請求プランの名前を指定します。
- リソースグループ:新しい請求プランを配置するリソースグループ名を指定します。
- 希望する値を入力し、[作成]をクリックします。
- 新しく作成された請求プランでは、コードスペースの作成ペインが自動的に開きます。
- 最初のコードスペースを作成するには、必要な値を入力し、[作成]をクリックします。 次の値を使用して、これを初めて試すことができます。
- コードスペース名:新しいコードスペースの名前を指定します。 この環境で使用するプロジェクトまたはタスクに似た名前を使用する必要があります。
- Git Repository:必要に応じて、このコードスペースを複製するためのGitリポジトリを指定します。 これは2つの異なる形式で指定できます:
- GitHubプロジェクトURL:GitHubプロジェクトのホームページの完全なURLを指定できます。 など
https://github.com/build5nines/az-kung-fu。 - GitHubの短縮形:スラッシュ区切り形式のGitHubリポジトリ名を
organization/repoの形式で指定できます。build5nines/az-kung-fuのように。
- GitHubプロジェクトURL:GitHubプロジェクトのホームページの完全なURLを指定できます。 など
- インスタンスの種類:Visual Studioコードスペース用にプロビジョニングされるCPUコアとメモリの構成を指定します。
- Suspend Idle Codespace after…:使用されていないときにコードスペースが自動的に中断されるまでの時間を指定します。
- 作成されたVisual Studioコードスペースが、オンラインコードエディタ/IDEで開きます。
Visual Studio Codespaces
を使用したコード変更の編集、コミット、同期Visual Studio Codespacesエディタを開き、コード変更を行い、それらの変更をコードスペースのGitHubリポジトリにコミットする
-
画面の左側にあるワークスペースペイン内で、プロジェクト内のファイルをクリックして、エディタ内で開きます。
-
ファイルにいくつかの変更を加え、左上のハンバーガーメニューをクリックして保存し、ファイルを選択して保存します。
メモ: Visual Studio Codespace editorにはいくつかのメニューオプションがあり、それはあなたが好きになったのと同じVS Codeスタイルの体験であることがわかります。
-
変更をVisual Studio Onlineの「ローカル」Gitリポジトリ（GitHubから複製された）にコミットするには、ウィンドウの左側にある[ソース管理]タブをクリックし、UIを使用して変更
-
変更がコミットされたら、ソース管理タブ内の楕円（…）をクリックして同期オプションを選択することで、それらをGitHubリポジトリに同期できます。
-
“‘origin/master’との間でコミットをプッシュおよびプルする”という確認を求められます。 “OK”をクリックして、同期アクションを続行します。
-
これを初めて行うと、Visual Studio OnlineはGitHub承認ページの新しいブラウザタブを開き、アカウントのGitHubに対して必要な権限でVisual Studio Codespacesを承認できます。
-
Authorizeボタンをクリックすると、Visual Studio CodespacesがGitHubアカウントにアクセスすることが許可されます。
-
Visual Studio Codespacesが承認されると、GitHubリポジトリに対する同期操作が完了します。 これでGitHubに移動して、コミットが実際に同期されていることを確認できます。
Visual Studio Codespaces内の拡張機能のインストール
Visual Studio Codespaces webベースのエディタは、Visual Studio Code(VS Code)の基盤に基づいて構築されています。 そのため、使い慣れたユーザーインターフェイス/エクスペリエンス、VS Code拡張機能をインストールする機能など、多くのことを共有しています。 これにより、基本的に、任意のデバイス上で、webブラウザからインストールされた拡張機能と同じVSコードエディタを使用することができます！
VS Codeに拡張機能をインストールするのと同じ方法で、Visual Studio Codespacesに拡張機能をインストールできます。
- エディタの左側にあるアイコン
- をクリックして、拡張機能タブを開き、選択した拡張機能を検索して見つけます。
- 拡張機能のインストールボタンをクリックして、Visual Studio Codespacesエディター内にインストールします。
Azureサブスクリプション内のVisual Studio Codespacesリソース
Visual Studio Codespaces課金プランを作成すると、そのプランはAzureサブスクリプションに対して課金されます。 つまり、請求プランはAzureサブスクリプション内で作成され、他のすべてのAzureリソースと一緒に存在します。
-
とAzure内のCodespaces課金プラン -
Vsリソースグループ内のCodespaces課金プラン
ラップアップ
あなたが見ることができるようにVisual Studio Codespaces（旧Visual Studio Online）はかなり簡単に始めることができます。 また、Visual Studio Code IDEのユーザーインターフェイスとエクスペリエンスを使用すると、VS Codespacesエディタを使い慣れたものになります。 Visual Studio Codespacesに拡張機能をインストールすることもできます！
ハッピーコーディング！PSもともと2019年5月にVisual Studio Online（VSO）として発表されましたが、最終的にvisual Studio Codespacesへのパブリックアクセスを取得し、試してみる/使用することができるのは素晴ら
作者について
ChrisはBuild5Ninesの創設者です。comとAzure&IoTのMICROSOFT MVPで、クラウド&エンタープライズシステムの設計と構築に20年の経験を持っています。 また、Azure Solutions Architect、開発者、Microsoft Certified Trainer(MCT)、Cloud AdvocateなどのMicrosoft認定資格も取得しています。 彼は技術への情熱を持っており、彼が学んだことを他の人と共有し、より速く学び、より生産的になることを可能にするのを助けます。
