The Visual Studio Online (VS Online) 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 Online Billing Plan and Environment

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

  1. Start by opening a web browser and navigating to https://online.visualstudio.com.

  2. Once logged in, for the first time, you will see a screen showing that you do not have any environments, with a Create environment button.

    Visual Studio Online - You don't have any environments

  3. Click the Create environment button.

  4. This will open up a Create a Billing Plan pane. You will use this to specify a new Visual Studio Online Billing Plan to create within your Azure Subscription.

    Visual Studio Online - Create a Billing Plan pane

    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.

    Expanding Advanced Options will reveal the following configurations:

    • 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.

  5. The Create Environment dialog will now open. You will use this to specify a new Environment to create within Visual Studio Online.

    Visual Studio Online - Create Environment pane

    Specify the following values in this pane:

    • Environment Name: Specify a name for the new Environment. You should use a name that resembles the project or task you’ll use this environment for.

    • Git Repository: Specify a Git Repository for this Environment 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/crpietschmann/jsQuizEngine.

      • GitHub Short Form: You can specify a slash delimited formatted GitHub Repository name in the format of organization/repo; such as crpietschmann/jsQuizEngine.

    • Instance Type: Specify the CPU core and Memory configuration that will be provisioned for the Visual Studio Online Environment.

    • Suspend idle environment after…: Specify the length of time until the Environment is suspended automatically when not in use.

    Fill in your desired values, then click Create.

  6. The Visual Studio Online Environment that was specified will now be in a Creating state.

    Visual Studio Online - Environment in Creating state

  7. After a few seconds, the new environment should be ready for use.

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

Here’s an overview of opening the Visual Studio Online (VS Online) editor, making some code changes, and committing those changes back to the GitHub Repository for a VS Online Environment.

  1. Once logged into Visual Studio Online, you will see a list of the Environments you have created within your Billing Plan and Azure Subscription.

  2. Open the Environment, by clicking on the Environment Name.

    Visual Studio Online - Environment List

  3. The Visual Studio Online editor will open. You can see this has the same user interface (UI) as the Visual Studio Code (VSCode) editor we’ve all become familiar with.

  4. Within the Workspace pane on the left side of the screen, click on a file in the project to open it within the editor.

    Visual Studio Online - Web-based Editor

  5. Make some changes to the file, then save them by clicking the hamburger menu in the upper-left, and selecting File, then Save.

    Visual Studio Online - File Save Menu

    Note: You can see there are several menu options available within the Visual Studio Online editor, and that it is the same VS Code style experience you’ve grown to love.

  6. 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.

    Visual Studio Online - Source Control Tab

  7. 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.

    Visual Studio Online - Source Control tab - Sync Menu

  8. 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.

    Visual Studio Online - Confirm Sync

  9. 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 Online with the necessary permissions it needs against GitHub for your account.

    Visual Studio Online prompt for GitHub permissions

  10. Clicking the Authorize button will authorize Visual Studio Online to access your GitHub Account.

  11. After Visual Studio Online 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 Online

The Visual Studio Online (VS Online or VSO) 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 Online in the same fashion as installing extensions in VS Code.

  1. Open the Extensions tab by clicking the icon on the left side of the editor
  2. Search for and locate your Extension(s) of choice.
  3. Click the Install button for the Extension to install it within the Visual Studio Online editor.
Getting Started with Visual Studio Online - Cloud IDE 1

Visual Studio Online Resources in your Azure Subscription

When you create a Visual Studio Online 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.

Wrap Up

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

Happy coding!

P.S. Originally announced in May 2019, it’s amazing to finally get public access to and be able to start trying out / using Visual Studio Online. Also, I know the “Visual Studio Online” name was originally used for what is now “Azure DevOps”, but the use of this name for a code editor is much more suited than a source control (plus other features) solution as it was in the past. It’s just too bad for people searching for information on the new Visual Studio Online, versus all the old docs / blogs / etc out there on the old Visual Studio Online. It just means that we need to post more content on the new Visual Studio Online, and I’m sure the search engines will get the idea eventually for those searching.


Microsoft MVP

Chris is a Microsoft MVP and has nearly 20 years of experience designing and building Cloud & Enterprise systems. He is also a Microsoft Certified Azure Solutions Architect and developer, a 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.

Pin It on Pinterest