Visual Studio Online VS Code How-to

Sign Up

A Microsoft Account and Azure Subscription are required to use Visual Studio Online.

You can sign up for both, as well as receive various Azure incentives at https://azure.microsoft.com/free/.

Install

Tip

If you don't have Visual Studio Code installed already, you can download it here.

If you'd like to use VS Online from within Visual Studio Code, you'll have to install the VS Online extension. There's two ways to do that:

Install from Visual Studio Code Marketplace

You can install the VS Online extension from the VS Code Marketplace by clicking on the green install button near the top of the page and following the prompts.

Install from within Visual Studio Code

Alternatively, from within VS Code search for 'Visual Studio Online' within the Extensions side bar, select the extension from the list, and press the Install button.

Post installation

When successfully installed, the VS Online panel will be available in the Remote Explorer pane.

Visual Studio Online Remote Explorer

This panel provides a management interface for interacting with VS Online environments, and is covered in full detail in the remainder of this document.

In addition to the panel, VS Code will also show the remote indicator when the VS Online extension is installed. The remote indicator signals your connection status, and provides a list of available VS Online commands when clicked.

Visual Studio Online Remote Indicator

Sign In

To sign into VS Online, you can either press F1 and select the VS Online: Sign In command in the command palette, or click Sign in to view environments... in VS Online panel of the Remote Explorer side bar.

Sign In to Visual Studio Online

From there, press the Sign In button on the notification toast that appears, and follow the prompts in your browser.

Sign In to Visual Studio Online

Create a plan

Once you've signed up and created an Azure subscription, you can access VS Online by creating a VS Online Plan. You can create more than one plan, and plans can be used to group related environments together. They are also the unit of billing, and as such you'll see a line item on your Azure bill for each plan you create.

More information about plans and pricing is available on the VS Online pricing page.

The first time you create an environment , VS Code will automatically walk you through the steps required to create a plan. To explicitly create a new plan, you can either use the VS Online: Create Plan command in the command palette, or by clicking the Select Plan button on the VS Online title bar in the Remote Explorer side bar, then selecting Create new plan... from the quick pick list.

Create Visual Studio Online plan

Follow the prompts to select an Azure subscription to associate the plan with, an Azure region to create the plan in, a name for the Azure resource group to create the plan in, and a name for the plan itself.

  • Azure subscription: You can choose from any Azure subscriptions that was previously selected. To add or remove options from the list, use the Azure: Select Subscriptions command in the command palette.
  • Azure region: Choose an Azure region to create the VS Online plan in. All environments created within this plan, will be provisioned in the region selected. Supported regions are:
    • East US
    • Southeast Asia
    • West Europe
    • West US 2
  • Azure resource group name: Your VS Online plan will be created in a new Azure resource group with the name provided in this step.
  • VS Online plan name: The name of the created VS Online plan. This name is displayed in the Remote Explorer for organization purposes.

Once a plan is created, it will be the selected plan in the Remote Explorer.

Selected Visual Studio Online plan

Only environments contained within the selected plan will be displayed. To select a different plan, you can either use the VS Online: Select Plan command in the command palette, or by clicking the Select Plan button on the VS Online title bar.

Create an environment

Cloud-hosted

Note

Cloud-hosted environments are extremely configurable. See configuring environments for advanced information about how to configure your environments.

To create a new cloud-hosted environment in VS Online, you can either use the VS Online: Create New Environment command in the command palette, or by selecting the Create New Environment button on the VS Online title bar in the Remote Explorer side bar.

Create environment in Visual Studio Code

Follow the prompts to provide an environment name, path to Git repository (optional) and auto-suspend settings.

Create environment in Visual Studio Code

  • Name: You can name your environment anything you'd like, but we recommend naming it after the project or task that you'll be using it for. (e.g. 'Todo App Environment', 'PR Review', 'Shopping Cart Feature')
  • Git Repository: If a path to a Git repository is provided, VS Online will automatically clone that repository into the environment. You can specify a Git repository in one of many formats:
    • Absolute Http(s) Git URL: A complete Http or Https Url. It may end in a .git extension. Examples include:
    • GitHub Project URL: The Https Url used to navigate to the homepage of a project on GitHub. (e.g. https://github.com/organization/repo)
    • GitHub Short Form: The forward slash delimited organization/repo format used to refer to projects on GitHub.
    • GitHub Pull Request URL: The Https Url used to navigate to a pull request in GitHub. (e.g. https://github.com/organization/repo/pull/123)
  • Auto-suspend Setting: The length of disconnected time before a VS Online environment will be automatically suspended. Choose between:
    • 5 minutes
    • 30 minutes
    • 2 hours
    • Never auto-suspend the environment. (Manual suspension still available)
  • Instance Type: The CPU and memory configuration that will be provisioned for your environment. Choose Standard Environment (Linux) for most projects, and Premium Environment (Linux) for those that require a little extra power. More information about instance types is available at our pricing page.

Note

Windows based instance types are available as part of our VS Online for Visual Studio Private Preview. Sign up to receive access.

Tip

The guided environment creation experience described above supports Git repositories over the HTTP(S) scheme. To use another source control provider, or Git over SSH, simply leave the Git Repository setting blank, and use the environment's terminal support to clone your source code.

Self-hosted

In addition to cloud-hosted environments, you can also "bring your own" self-hosted environments, registering them with VS Online. To do so, first install VS Code and the VS Online extension on the environment you'd like to register. Then use the VS Online: Register Local Environment command in the command palette:

  • If no folders are currently open in VS Code, you will be prompted to select one. This folder will be opened every time you connect to this environment from another machine. However, you can open any folder after connecting. Register a Local Environment in Visual Studio Code

  • If no plan is selected, you will be prompted to select or create a plan. No charge is incurred for self-hosted environments.

After registering, your self-hosted environment will appear under a new tree view in the VS Online panel of the Remote Explorer side bar.

Register a Local Environment in Visual Studio Code

You can now connect from any machine with the VS Online extension installed or from the browser. The first time you connect may take longer than usual.

If your self-hosted environment becomes unavailable for any reason, see our troubleshooting reference documentation.

Connect to an environment

VS Code makes connecting to environments quick and easy. If you were already connected to an environment when you last shut down VS Code, it will automatically try to re-connect to that environment when you launch it.

If you're creating an environment, a notification toast will appear as soon as the environment is ready. Simply select the Connect button to connect to the new environment.

Connect to a new environment in Visual Studio Code

No matter what, when you're in the process of connecting, VS Code's Remote Indicator will animate during the connection process, and will display the name of the environment once the connection has completed.

Connect to a new environment in Visual Studio Code

To connect to already existing environment, that you're not currently connected to, there's several options:

  1. Use the VS Online: Connect to Environment command in the command palette to be displayed with a quick pick list of environments to connect to.
  2. Alternatively, the quick pick list is displayed by left-clicking the name of any environment in the VS Online panel in the Remote Explorer side bar.
  3. For more advanced options, right-click the name of the environment in the VS Online panel to reveal a context menu with the following options:
    • Connect to Environment: Click to immediately connect to the selected environment.
    • Open Environment in New Window: Click to launch a new VS Code instance that will connect to the selected environment. This is useful for being connected to multiple environments at once.
    • Open in Browser: Click to launch the environment in VS Online's browser-based editor.

Lastly, you can inspect details about the currently selected environment in the Environment Details panel in the Remote Explorer side bar.

Environment Details in Visual Studio Code

Disconnect from an environment

Once connected to an environment, there's four ways to disconnect:

  1. Use the VS Online: Disconnect command in the command palette.
  2. Right-click the name of the connected environment in the VS Online panel to reveal a context menu with a Disconnect option.
  3. Selecting the Disconnect button on the Environment Details title bar in the Remote Explorer side bar.
  4. Close the VS Code window

Disconnect in Visual Studio Code

Suspend an environment

As described on the VS Online pricing page, you pay for active VS Online usage, with a nominal fee for when an environment is suspended.

VS Online will automatically suspend an inactive environment according to the auto-suspend setting used when the environment was created. This helps keep the costs of VS Online as low as possible.

In addition to auto-suspending, you can manually suspend an environment at any time by using the VS Online: Suspend Environment command in the command palette, or by selecting Suspend Environment in the right-click context menu on any environment listed in the VS Online panel of the Remote Explorer side bar.

Delete a cloud-hosted environment

The actively connected environment cannot be deleted from within VS Code, however while disconnected from an environment, there's two ways to permanently delete it:

  1. Use the VS Online: Delete Environment command in the command palette to select the environment to be deleted then press the Delete button on the confirmation prompt.
  2. Right-click the name of the disconnected environment in the VS Online panel to reveal a context menu with a Delete Environment option. Select it and press the Delete button on the confirmation prompt.

Unregister a self-hosted environment

A self-hosted environment can be unregistered from any machine in one of two ways:

  1. Use the VS Online: Unregister Environment command in the command palette to select the environment to be unregistered then press the Unregister button on the confirmation prompt.
  2. Right-click the name of the disconnected environment in the VS Online panel to reveal a context menu with an Unregister Environment option. Select it and press the Unregister button on the confirmation prompt.

Using the integrated terminal

VS Code's integrated terminal and all of its features are fully supported in VS Online. It is important to note, however, that while connected to VS Online, commands issued in the terminal are executed against the environment, not the user's local machine. This provides VS Online users full control over their development environment and how it's configured.

VS Online exposes information about the configuration and creation of an environment in the VS Online terminal. This terminal is read-only, and is meant to be used for troubleshooting purposes.

VS Online Terminal in Visual Studio Code

Attempts to type in the VS Online terminal window will issue a warning notification toast. Press the Open in New Terminal button in the toast, or the New Terminal icon in the Terminal panel to create a new, writable terminal instance.

VS Online Terminal Warning in Visual Studio Code

In addition to the standard integrated terminal features of VS Code, VS Online also allows for the terminal to be personalized using custom dotfiles. See Personalizing environments for more information.

Port Forwarding

VS Online provides access to the applications and services running in remote environments by means of port forwarding. By default, no ports are forwarded for security concerns, however, there are several ways to open ports in the remote environment.

Auto port forwarding

If your application, or any other, indicates that it is serving content from a local port in the integrated terminal, VS Online will automatically forward that port and add it to the list of Forwarded Ports under Environment Details.

In the example below, npx is used to run http-server, which opens port 8080. VS Online correspondingly and automatically forwards port 8080 so it can be accessed from your local environment.

VS Online Auto Port Forwarding

Port forwarding interface

As with all operations in VS Online, you can use the command palette to forward a port. Select the VS Online: Forward Port command and follow its prompts: typing in a port number to forward, and to assign an optional name to the port forwarding rule.

Additionally, you can click the Forward Port button on the Forwarded Ports title bar in the Environment Details panel.

VS Online Port Forwarding Interface

Configured port forwarding

If there's one or more ports that should be forwarded by default for a given repository, that can be configured in devcontainer.json. See the configuring environments reference for more info.

Accessing forwarded ports

Once a port has been forwarded, you can click the Copy Port URL button on the port's title bar in the Environment Details panel. This will copy the full URL to the port into your clipboard so you can paste it into a browser, CLI or the API exploration tool of your choice.

Accessing Forwarded Ports

Stop forwarding ports

There's two ways to stop a forwarded port, regardless of which mechanism was used to create it. You can either use the VS Online: Stop Forwarding Port command in the command palette, or click the Stop Forwarding Port button on the port's title bar in the Environment Details panel.

Stop Port Forwarding

Configuration and personalization

In addition to the above documentation that's specific to VS Code's VS Online extension, VS Online also provides flexible mechanisms to customize environments on a per repo basis, as well as to personalize them on a per user basis. Find out more in the reference documentation: