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 tohttps://insiders.vscode.dev.
open the project
When navigating tohttps://vscode.dev, 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:https://vscode.dev/FUENTE/ORG/REPO. habitsVS code repositoryfor example it looks like this:https://vscode.dev/github/microsoft/vscode.
To work with GitHub and Azure Repos, VSCode for the web supports two paths,vscode.dev/githubWvscode.dev/azurerepos:
GitHub:https://vscode.dev/github/organization/repo
Azure repositories:https://vscode.dev/azurerepos/organization/project/repo
From the search bar of your browser (also known as omnibox) you can easily access any GitHub repositoryvscode.dev. Just installvscode.dev 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.Microsoft/vscode.
If you're already using VS Code for the web athttps://vscode.dev, 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.
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 schemehttps://vscode.dev/azurerepos/organization/project/repo, 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 vscode.dev.
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 (np.vscode.dev/githubWvscode.dev/azurereposdescribed above).
They like
You can share and use color themes through VS Code for the web via the URL scheme:https://vscode.dev/theme/extensionId.
You can go e.ghttps://vscode.dev/theme/sdras.night-owlexperiencenight 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 (replacing
[](https://vscode.dev/tema/share liveGuest sessions are available in the browser viahttps://vscode.dev/liveshareURLsession 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 vscode.dev URL, no need for SSH. This allows you to "bring your own computing power" to vscode.dev, 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 vscode.dev 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:
Borders
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.
extensions
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.
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.
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.
| Problem | Sum |
|---|---|
| ⇧⌘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:
- Safari: Go to Safaripreferences...>websites>avengers appearing> the domain you have access to (eg.
vscode.dev) and selectallowfrom the drop-down list.
3-5-2023