The Visual Studio Codespaces (formerly Visual Studio Online / VSO) web-based IDE is now available to be used. Based on the popular Visual Studio Code editor, it offers a familiar feel and workspace for writing and working with source code.. This also offers the extensibility of supporting Visual Studio Code extensions, although at this time we don’t know how many or which VS Code extensions will be supported.





Creating your first Visual Studio Codespace & Billing Plan

Here’s an overview of logging into Visual Studio Codespaces (the Cloud-based IDE from Microsoft) and getting started with the tooling.

Start by opening a web browser and navigating to https://online.visualstudio.com Once logged in, for the first time, you will see a screen showing that you do not have any environments, with a Create Codespace button.

Click the Create Codespace button. This will open the Create a Billing Plan pane. You will use this to specify a new Visual Studio Codespaces Billing Plan to create within your Azure Subscription.



Specify the following values in this pane: Subscription: Choose the Azure Subscription your login has access to that you would like to create the new Billing Plan within.

Choose the Azure Subscription your login has access to that you would like to create the new Billing Plan within. Location: Choose the Azure Region to host the Billing Plan. Optionally, you can expand Advanced Options to reveal the following configuration: Plan Name: Specify the name of the Billing Plan to create within your Azure Subscription.

Specify the name of the Billing Plan to create within your Azure Subscription. Resource Group: Specify the Resource Group name to place the new Billing Plan within. Fill in your desired values, then click Create. With the Billing Plan newly created, it will automatically open the Create Codespace pane. To create your first Codespace, fill in the required values, then click Create. You can use the following values to try this for the first time. Codespace Name: Specify a name for the new Codespace. You should use a name that resembles the project or task you’ll use this environment for.

Specify a name for the new Codespace. You should use a name that resembles the project or task you’ll use this environment for. Git Repository: Optionally, specify a Git repository for this Codespace to clone. This can be specified in two different formats: GitHub Project URL: You can specify the full URL of the homepage for a GitHub project. Such as https://github.com/build5nines/az-kung-fu . GitHub Short Form: You can specify a slash delimited formatted GitHub repository name in the format of organization/repo ; such as build5nines/az-kung-fu .

Optionally, specify a Git repository for this Codespace to clone. This can be specified in two different formats: Instance Type: Specify the CPU core and Memory configuration that will be provisioned for the Visual Studio Codespace.

Specify the CPU core and Memory configuration that will be provisioned for the Visual Studio Codespace. Suspend Idle Codespace after…: Specify the length of time until the Codespace is suspended automatically when not in use.

The Visual Studio Codespace that was just created will now open to the online code editor / IDE.

Screenshot: Visual Studio Codespaces IDE

Edit, Commit, an Sync Code Changes using Visual Studio Codespaces

Here’s an overview of opening the Visual Studio Codespaces editor, making some code changes, and committing those changes back to the GitHub Repository for a Codespace.

Within the Workspace pane on the left side of the screen, click on a file in the project to open it within the editor. Make some changes to the file, then save them by clicking the hamburger menu in the upper-left, and selecting File, then Save. Note: You can see there are several menu options available within the Visual Studio Codespace editor, and that it is the same VS Code style experience you’ve grown to love. To commit your changes to the Visual Studio Online "local" Git Repository (that was cloned from GitHub), click on the Source Control tab on the left side of the window, then use the UI to add changes and commit them. Once the changes are committed, you can Sync them to the GitHub Repository by clicking on the ellipse (…) within the Source Control tab, then selecting the Sync option. You will be prompted with a confirmation that you want to "push and pull commits to and from ‘origin/master’". Click OK to proceed with the Sync action. The first time you do this, Visual Studio Online will open a new browser tab to the GitHub Authorization page so you can authorize Visual Studio Codespaces with the necessary permissions it needs against GitHub for your account. Clicking the Authorize button will authorize Visual Studio Codespaces to access your GitHub Account. After Visual Studio Codespaces is authorized, it will complete the Sync operation against the GitHub Repository. You can now navigate to GitHub to see the commit has indeed been synchronized.

Install Extensions within Visual Studio Codespaces

The Visual Studio Codespaces web-based editor is built on the foundation of Visual Studio Code (VS Code). As such, it shares lots of things including a familiar user interface / experience, and the ability to install VS Code Extensions. This allows you to essentially use the same VS Code editor with Extensions installed from your web browser, on any device!

You can install Extension on Visual Studio Codespaces in the same fashion as installing extensions in VS Code.

Open the Extensions tab by clicking the icon on the left side of the editor Search for and locate your Extension(s) of choice. Click the Install button for the Extension to install it within the Visual Studio Codespaces editor.

Screenshot: Install Extensions in Visual Studio Codespaces IDE

Visual Studio Codespaces Resources in your Azure Subscription

When you create a Visual Studio Codespaces Billing Plan, that plan is billed against your Azure Subscription. This means the Billing Plan is created within your Azure Subscription, and resides alongside all your other Azure resources.

VS Codespaces Billing Plan within Azure

VS Codespaces Billing Plan within Resource Group

Wrap Up

As you can see Visual Studio Codespaces (formerly Visual Studio Online) is fairly easy to get started with. Also, using the Visual Studio Code IDE user interface and experience makes the VS Codespaces editor familiar to use. You can even install Extensions in Visual Studio Codespaces!

Happy coding!

P.S. Originally announced in May 2019 as Visual Studio Online (VSO), it’s amazing to finally get public access to and be able to start trying out / using Visual Studio Codespaces.

Article Author

Chris Pietschmann Chris is the Founder of Build5Nines.com and a Microsoft MVP in Azure & IoT with 20 years of experience designing and building Cloud & Enterprise systems. He is also a Microsoft Certified: Azure Solutions Architect, developer, Microsoft Certified Trainer (MCT), and Cloud Advocate. He has a passion for technology and sharing what he learns with others to help enable them to learn faster and be more productive.