Visual Studio Code Online Editor



  1. Microsoft Visual Studio Code
  2. Visual Studio Codespaces
  3. Visual Studio online, free

GitHub Codespaces provides cloud-powered development environments for any activity - whether it's a long-term project, or a short-term task like reviewing a pull request. You can work with these environments from Visual Studio Code or in a browser-based editor.

Environments

An environment is the 'backend' half of GitHub Codespaces. It's where all of the compute associated with software development happens: compiling, debugging, restoring, etc. When you need to work on a new project, pick up a new task, or review a PR, you can simply spin up a Cloud-hosted environment, and GitHub Codespaces takes care of configuring it correctly. It automatically configures everything you need to work on your project: the source code, runtime, compiler, debugger, editor, custom dotfile configurations, relevant editor extensions and more.

Vuerd ERD Editor vscode extension. Usage Webview API. ERD data filename.vuerd.json Save a file as a form; Focus on the saved file and click the vuerd icon in the upper right corner of the Editor window. Learn about code editing features in Visual Studio. Organize and edit code in Visual Studio. Learn about working with code projects, using code editor features, and maintaining consistent code style.

Customization

GitHub Codespaces are fully customizable on a per project basis. This is accomplished by including a devcontainer.json file in the project's repository, similar to VS Code Remote Container development.

Example customizations include:

  • Setting which Linux-based operating system to use.
  • Automatically installing various tools, runtimes, and frameworks.
  • Forwarding commonly used ports.
  • Setting environment variables.
  • Configuring editor settings and installing preferred extensions.

See the Configuring Codespaces documentation for codespace-specific devcontainer.json settings.

Dotfile per user configuration

Dotfiles are files whose filename begins with a dot (.). They typically contain configuration information for applications and can control how terminals, editors, source control, and various other tools behave. .bashrc, .gitignore and .editorconfig are examples of dotfiles commonly used by developers.

You can specify a GitHub repo containing your dotfiles, a target location for the files, as well as install commands when creating a codespace.

See the Personalizing Codespaces documentation to learn how to add your dotfile configurations to a codespace.

Getting started

There are getting started topics for both GitHub Codespaces clients. These will fast-track you through signing in to GitHub Codespaces, creating your first codespace, and connecting to it with your preferred client:

  • Codespaces in VS Code - Use the GitHub Codespaces extension to connect and work in your environment.
  • Codespaces in the browser - Connect to your codespace through a browser-based editor.

Extension authors

The VS Code extension API hides most of the implementation details of running remotely so many extensions will just work in GitHub Codespaces environments without any modification. However, we recommend that you test your extension in a codespace to be sure that all of its functionality works as expected. See the article on Supporting Remote Development and GitHub Codespaces for details.

Visual

Common questions

Why is an extension not installable in the browser

There are a small number of extensions that have built-in assumptions or need to run on the desktop. Examples are when an extension accesses files from the VS Code installation on the desktop or when an extension depends on a executable that must run in a desktop environment. When you try to install such an extension in the browser, you will be informed that the extension is not available.

Notice such an extension can still be used when connecting to a Codespace from VS Code running on the desktop.

How do I allow VS Code to access my clipboard for reading?

In certain cases, VS Code might ask you for permission to access the clipboard when reading from it. You should be able to grant access to the clipboard from your browser either through settings (search for 'site permissions') or by looking for this option in the address bar on the right:

Once you have granted VS Code access to the clipboard, you can retry the operation.

Questions or feedback

If you have questions, you can consult the GitHub Codespaces Troubleshooting guide. If you'd like to provide feedback, you can enter issues in the GitHub Codespaces Support Community.

Use the tools you love

Connect to your codespaces from your browser or Visual Studio Code.

Simplify your workflow

Automatically set up dependencies and SSH keys. Go from code to commit faster on any project.

Extend and customize

Configure your editor with dotfiles and extensions to create a consistent environment in every codespace.

With your development in the cloud, you can contribute code from any device.

Contribute to projects without complicating your local setup. Spin up dev environments with a click—even for projects you haven't worked on before—and switch between them with ease.

Codespaces is available in beta. Add yourself to our early-access list to be one of the first to use it.

Request early access

Is Codespaces available to everyone?

Codespaces will be available to a small group of GitHub users while in limited beta. Over time, more users will have access to the beta based on availability and sign up date.

How do I start using Codespaces?

If you’re in the Codespaces beta, you’ll see a “Code” button in the Code tab of all supported repositories.

Is Codespaces available for all repositories?

While in limited beta, Codespaces will be available for repositories you own and public repositories. Additional support will be available as the beta progresses, but for now, Codespaces will not be available for private repositories that belong to organizations.

Can I leave a codespace open?

When you create a codespace, you can leave it open for as long as you wish but it will suspend automatically after 30 minutes of inactivity. You can reconnect at any time through Codespaces in the browser or VS Code.

What if I don’t want to develop in a browser?

If you prefer, you can open a codespace in GitHub and then connect to it in VS Code.

How much does Codespaces cost?

Microsoft Visual Studio Code

For more about Codespaces pricing, see our documentation. Codespaces is free during the limited beta.

How is Codespaces different from VS Code?

Visual Studio Codespaces

Codespaces sets up a cloud-hosted, containerized, and customizable VS Code environment. After set up, you can connect to a codespace through the browser or through VS Code.

How can I configure a codespace?

Visual Studio online, free

Inside of a codespace, you’ll have access to the Visual Studio Code Marketplace, and you can preload any extensions you want loaded at launch using a devcontainer configuration file. You can also personalize your codespace by pulling in dotfiles.