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.
- 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.
- 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.
- 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 asbuild5nines/az-kung-fu.
- GitHub Project URL: You can specify the full URL of the homepage for a GitHub project. Such as
- Instance Type: 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.
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.
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.
About the Author
Chris Pietschmann
Chris Pietschmann is a Microsoft MVP, HashiCorp Ambassador, and Microsoft Certified Trainer (MCT) with 20+ years of experience designing and building Cloud & Enterprise systems. He has worked with companies of all sizes from startups to large enterprises. He has a passion for technology and sharing what he learns with others to help enable them to learn faster and be more productive.
Benefits of Convention over Configuration for IaC Deployment Projects
How to Perform Simple String Concatenation in Terraform
Azure CDN POP Locations: Interactive Map of Azure CDN Points of Presence
Azure Functions: Extend Execution Timeout Past 5 Minutes
Terraform: Deploy to Multiple Azure Subscriptions in Single Project
Azure Regions: Interactive Map of Global Datacenters
Interesting! If I understand this right, I would be able to use a lower spec laptop to build apps?
Yes
Chris, nice article. Question for you though – since I have been trying to setup a codespace on the behalf of a front end developer on our team. Is there a way to give access/permission or even transfer a codespace to that person so they can access it when logged in. Or is the only option to have them setup the codespace? I also see the option for collaboration but that requires me to initiate and be in that same space which isn’t the goal here.
You should be able to set that up. You may want to check out the Microsoft documentation for more information.