Visual Studio Code for the web (2023)

Visual Studio Code for the web provides a free, no-install Microsoft Visual Studio Code environment that runs entirely in your browser, allowing you to quickly and securely browse source code repositories and make small changes to your code. To get started, go tohttps://vscode.devin your browser.

VS Code for the web has many of the VS Code Desktop features you love, including search and syntax highlighting for browsing and editing, and support for extensions to work in your codebase and make editing easier. . In addition to accessing repositories, forks, and pull requests from source control providers such as GitHub and Azure Repos (in preview), you can also work with code stored on your local machine.

VS Code for the web runs entirely in your web browser, so there are some limitations compared to the desktop environment that you can learn more about.below.

Relation to the VS Code desktop

VS Code for the web provides a browser-based environment for viewing files and repositories and making light code changes. However, if you need access to the runtime to run, compile, or debug your code, or if you want to use platform features like the terminal, we recommend moving your work to a desktop app orGithub codingfor all VS Code capabilities. In addition, VS Code Desktop allows you to run extensions that are not supported by the web version and use a full set of keyboard shortcuts that are not limited by the browser.

If you're ready to change, you can do it"improvement"just a few clicks to take full advantage of VS Code Desktop.

You can also switch between Stable and Insider versions of VS Code for the web by selecting the gear iconSwitching to Insider Edition...or directly to

open the project

When navigating to, you can create a new local file or project, work on an existing local project, or access source code repositories hosted elsewhere such as GitHub and Azure Repos (part of Azure DevOps).

You can go to the project repository directly from the URL, as follows: habitsVS code repositoryfor example it looks like this:

To work with GitHub and Azure Repos, VSCode for the web supports two paths,


Azure repositories:

From the search bar of your browser (also known as omnibox) you can easily access any GitHub Just enlargementfor chrome and border. then writecodeto activate the omnibox, then the name of your repository. Suggestions are populated based on your browser's search history, so if the repository you want isn't showing up, you can get the full one as well./name to open it, for exampleMicrosoft/vscode.

Visual Studio Code for the web (1)

If you're already using VS Code for the web at, you can also browse different repositories with the fileExternal repositoriesextension commands. Select the remote indicator in the lower left corner of the status bar and you will getOpen remote repository...Command.

Visual Studio Code for the web (2)

GitHub Repositories is a basic component that provides the ability to remotely view and edit a repository from within the editor.

Instead of cloning your work, GitHub Repositories creates a virtual file system for accessing repositories and fetching requests, so you can get productive quickly without having to download code to your local machine. More information about the extension can be found in ourGitHub repositoriesguide.

Observation: The GitHub Repositories extension also works in VS Code Desktop to quickly browse and edit your repository.

You can create a new file online like in VS Code Desktop environment usingDuration>new filefrom the command palette (F1).

Azure repositories (preview)

Support for Azure Repos (part of Azure DevOps) in Visual Studio Code for the web is in preview and the environment will grow and evolve over time.

When you go to the url with the scheme, you can read and search files in the repository and commit changes to the Azure repositories. You can fetch, fetch and sync changes and view branches.

You can access any repository, branch or tag from Azure Repos in VS Code for the web by prefixingvscode.devto the Azure Repos URL.

You can also click (.) to open it in

current restrictions

Currently, Azure Repos support is read-only. The commit, branch, branch, and PR actions are disabled in the source control view and command palette.

More custom URLs

Just like on the desktop, you can customize VSCode for the web with a rich ecosystem of extensions that support virtually every backend, language, and service. Unlike desktops, we can easily deliver personalized experiences with pre-installed extensions on an exclusive basisvscode.devAdres URL ( above).

They like

You can share and use color themes through VS Code for the web via the URL scheme:

You can go e.g themewithout having to go through the download and installation process.

Note: The color theme URL scheme works for themes that are fully declarative (no code).

An extension can define multiple themes. You can use the schedule/theme/extensionId/themeName. Buttheme nameis specified, VS Code for the web takes the first theme.

As a theme author, you can add the following badge to your extension's readme file so that users can easily test your theme in VS Code for the web (replacingwith your theme extension's unique ID):

[![Example in](](

share liveGuest sessions are available in the browser via IDis passed to the extension to make the join seamless.

Continue working in a different environment

In some cases, you want to access another environment that has the ability to run code. You can go to work in the repository in a development environment that supports the local file system and the full language and development tools.

With the GitHub Repositories extension, you can easily clone your repository locally, reopen it on your computer, or create a GitHub codespace for your current repository (if you haveGithub codinginstalled extension and access to create GitHub codespaces). To do this, usekeep working...command available on the command palette (F1) or click the remote indicator in the status bar.

Leverage your own computing power with VS Code Server

You can develop on another machine in VS Code for the web using VS Code Server.

VS Code Server is a private preview service that can be run on a remote development machine such as a desktop computer or virtual machine (VM). It allows you to securely connect to that remote machine from anywhere via the URL, no need for SSH. This allows you to "bring your own computing power" to, which allows for additional scenarios such as running code in a browser.

More information about VS Code Server can be found atdocumentation.

some recognition

VS Code for the web runs entirely in a web browser sandbox and provides a very limited runtime.

When accessing code from external repositories, the web editor does not "clone" the repository, but instead loads the code by calling service APIs directly from the browser; this further reduces the attack surface when cloning untrusted repositories.

When working with local files, VS Code for the web loads them through the browser's file system access APIs, which restricts browser access.

Save and share your work

When you're working on a local file on the Internet, your work is automatically saved when you're done.automatic savingactivated. You can also save manually as you would when working on a VS Code desktop (p.Duration>Blush).

When you work in a remote repository, your work is stored in your browser's local storage until you commit it. If you open a repository or pull request with GitHub repositories, you can push the changes to the source control view to keep the new work.

run everywhere

EquivalentGithub codingUS Code for the Web works on tablets such as iPads.

language assistance

Language support is a bit more nuanced on the web, including code editing, browsing, and navigation. The desktop environment is often driven by language services and compilers that expect a file system, runtime, and compute environment. In the browser, these experiences are supported by browser-based language services that provide source code tokenization and syntax highlighting, completion, and multiple operations on a single file.

In general, experiences fall into the following categories:

  • GOOD:For most programming languages, VS Code for the web provides code syntax colors, text completions, and parenthesis colors. use onebumoppasysyntax tree forany code extension, we can provide additional experiences such asOverview/Go to symbolWsearch symbolfor popular languages ​​such as C/C++, C#, Java, PHP, Rust and Go.
  • Better:TypeScript, JavaScript, and Python work with language services that run natively in the browser. With these programming languages ​​you get "GOODExperience richer completions for individual files, semantic highlighting, syntax errors, and more.
  • Better:For many "web" languages ​​such as JSON, HTML, CSS and LESS, etc., the coding experience in is almost identical to desktop (markdown preview included!).

You can determine the level of language support in your current case using the language status indicator in the status bar:

Visual Studio Code for the web (3)


Of course, since VS Code for the web runs entirely in the browser, some experiences will be more limited compared to what you can do in the desktop app. For example, terminal and debugger are not available, which makes sense since you can't build, run and debug Rust or Go applications in a browser sandbox.


Only a subset of extensions can run in the browser. You can use the Extensions view to install extensions on the web. Extensions that cannot be installed have a warning icon iI know whyclutch. We expect more extensions to be enabled over time.

Visual Studio Code for the web (4)

Once an extension is installed, it is stored in the browser's local storage. You can ensure extensions are synced between VS Code instances, including across browsers, and even across your desktop by enablingSync settings.

If an extension bundle contains extensions that do not work in the browser sandbox, you will receive an informational message with the option to view the extensions in the bundle.

Visual Studio Code for the web (5)

When extensions run in the browser sandbox, they are more limited. Extensions that are purely declarative, such as most themes, code snippets, or grammars, work as is and are available in VS Code for the web without any changes made by extension authors. Extensions that run code must be updated to support running in a browser sandbox. You can read all about what is needed to support browser extensions inauthor's guide to web extensions.

There are also extensions that only partially work in the browser. A good example is the language extension whichlimit supportto some files or to currently open files.

file system API

Edge and Chrome are now supportedfile system API, which allows websites to access the local file system. If your browser does not support the file system API, you cannot open the folder locally, but you can open files instead.

Browser Compatibility

You can use VS Code for the web on Chrome, Edge, Firefox, and Safari.

Web page views may look different or behave unexpectedly in Firefox and Safari. You can browse the issue queries on the VS Code GitHub repository to find issues related to specific browsers, such astag safariWfirefox label.

There are additional steps you can take to improve your browsing experience with VS Code for the web. look atAdditional browser settingsthe section contains more information.

mobile support

You can use VS Code for the web on mobile devices, but smaller screens may have some limitations.

Keyboard shortcuts

Some keyboard shortcuts may also work differently online.

⇧⌘str(Windows, LinuxCtrl+Shift+P)does not launch the command palette in Firefox.⇧⌘str(Windows, LinuxCtrl+Shift+P)is reserved in Firefox.
Use as a temporary solutionF1to launch the command palette.
⌘N(Windows, LinuxControl+N)for new file not working in web.⌘N(Windows, LinuxControl+N)instead, it opens a new window.
It can be used as a temporary solutionCtrl+Alt+N(Command+Alt+Non macOS).
⌘W(Windows, LinuxControl+W)closing the editor does not work on the network.⌘W(Windows, LinuxControl+W)close current tab in browsers.
It can be used as a temporary solutionCtrl+Shift+Alt+N(Cmd+Shift+Alt+Non macOS).
⇧⌘B(Windows, LinuxCtrl+Shift+B)does not toggle the favorites bar in the browser.VS Code for the web overrides this and redirects to the "Build" menu in the command palette.
Alt+LinkWAlt+RightYou should be navigating in the editor, but this may incorrectly trigger tab history navigation.If the focus is not in the editor, these keyboard shortcuts trigger tab history navigation instead.

Additional browser settings

There are additional browser setup steps you can take when working with VS Code in your browser.

Open new tabs and windows

In some cases, you may need to open a new tab or window while working in VS Code for the web. VS Code may ask you for permission to access the clipboard while reading from it. Depending on your browser, you can grant clipboard access or allow pop-ups in several ways:

  • Chrome, Edge, Firefox: Look for "site permissions" in your browser settings or look for the following option in the address bar on the right:

Visual Studio Code for the web (6)

  • Safari: Go to Safaripreferences...>websites>avengers appearing> the domain you have access to ( and selectallowfrom the drop-down list.


Top Articles
Latest Posts
Article information

Author: Pres. Carey Rath

Last Updated: 07/18/2023

Views: 6181

Rating: 4 / 5 (61 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Pres. Carey Rath

Birthday: 1997-03-06

Address: 14955 Ledner Trail, East Rodrickfort, NE 85127-8369

Phone: +18682428114917

Job: National Technology Representative

Hobby: Sand art, Drama, Web surfing, Cycling, Brazilian jiu-jitsu, Leather crafting, Creative writing

Introduction: My name is Pres. Carey Rath, I am a faithful, funny, vast, joyous, lively, brave, glamorous person who loves writing and wants to share my knowledge and understanding with you.