Visual Studio Code for the Web

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="awa-expId" content="vscw_aaflight1016_control:103441;" /> <meta name="awa-env" content="prod" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="hNs7DXrTySP_X-0P_AC0WulAXvUwgSXEmgfcO2r79dw" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@code" /> <meta name="description" content="Visual Studio Code for the Web and the vscode.dev URL" /> <meta name="keywords" content="" /> <meta name="ms.prod" content="vs-code" /> <meta name="ms.TOCTitle" content="" /> <meta name="ms.ContentId" content="d665a790-1da1-4f45-bc0f-c09822528e55" /> <meta name="ms.date" content="02/06/2025" /> <meta name="ms.topic" content="conceptual" />  <meta name="twitter:card" content="summary_large_image" /> <meta property="og:url" content="https://code.visualstudio.com/docs/editor/vscode-web" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Visual Studio Code for the Web" /> <meta property="og:description" content="Visual Studio Code for the Web and the vscode.dev URL" /> <meta property="og:image" content="https://code.visualstudio.com/opengraphimg/opengraph-docs.png" /> <link rel="shortcut icon" href="/assets/favicon.ico" sizes="128x128" /> <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"> <title>Visual Studio Code for the Web</title> <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/dist/v2/style.css"> <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script> <script type="text/javascript" src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-4.min.js"></script> <script type="text/javascript"> // Leave as var; siteConsent is initialized and referenced elsewhere. var siteConsent = null; const GPC_DataSharingOptIn = false; WcpConsent.onInitCallback(function () { window.appInsights = new oneDS.ApplicationInsights(); window.appInsights.initialize({ instrumentationKey: "1a3eb3104447440391ad5f2a6ee06a0a-62879566-bc58-4741-9650-302bf2af703f-7103", propertyConfiguration: { userConsented: false, gpcDataSharingOptIn: false, callback: { userConsentDetails: siteConsent ? siteConsent.getConsent : undefined }, }, cookieCfg: { ignoreCookies: ["MSCC"] }, webAnalyticsConfiguration:{ // Web Analytics Plugin configuration urlCollectQuery: true, urlCollectHash: true, autoCapture: { scroll: true, pageView: true, onLoad: true, onUnload: true, click: true, resize: true, jsError: true } } }, []); window.appInsights.getPropertyManager().getPropertiesContext().web.gpcDataSharingOptIn = GPC_DataSharingOptIn; }); </script> <link rel="alternate" type="application/atom+xml" title="RSS Feed for code.visualstudio.com" href="/feed.xml" /> </head> <body >  <script> function setTheme(themeName) { if (themeName === 'dark') { document.documentElement.removeAttribute('data-theme'); // dark is default, so no data-theme attribute needed } if (themeName === 'light') { document.documentElement.setAttribute('data-theme', themeName); } return; } // Determine initial theme: user preference or system preference let theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); setTheme(theme); // Apply the initial theme // Listen for changes in the system theme preference window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (!localStorage.getItem('theme')) { // Only if no user preference is saved setTheme(e.matches ? 'dark' : 'light'); } }); </script> <div id="main"> <div class="navbar-fixed-container"> <div class="navbar navbar-inverse navbar-fixed-top " data-spy="affix" data-offset-top="1"> <div id='cookie-banner'></div> <nav role="navigation" aria-label="Top Level"> <div class="container"> <div class="nav navbar-header"> <a class="navbar-brand" href="/"><span>Visual Studio Code</span></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand and Collapse Menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active" ><a id="nav-docs" href="/docs">Docs</a></li> <li ><a id="nav-updates" href="/updates">Updates</a></li> <li ><a id="nav-blogs" href="/blogs">Blog</a></li> <li ><a id="nav-extend" href="/api">API</a></li> <li><a href="https://marketplace.visualstudio.com/VSCode" target="_blank" rel="noopener" id="nav-extensions">Extensions</a></li> <li ><a id="nav-faqs" href="/docs/supporting/faq">FAQ</a></li> <li class='search visible-xs visible-sm' ><a href="/Search">Search</a></li> <li ><a id="nav-copilot" href="/docs/copilot/overview">GitHub Copilot</a></li> </ul> </ul> <ul class="nav navbar-nav navbar-right" role="presentation"> <li> <button type="button" class="theme-switch" id="theme-toggle"> <img class="theme-icon-light" src="/assets/icons/theme-light.svg" alt="Switch to the dark theme" /> <img class="theme-icon-dark" src="/assets/icons/theme-dark.svg" alt="Switch to the light theme" /> </button> </li> <li> <a href="/Search" title="Search" class="btn search-btn" id="nav-search"> <img class="search-icon-light" src="/assets/icons/search.svg" width="16px" height="16px" alt="Search" /> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" width="16px" height="16px" alt="Search" /> </a> </li> <li class="search" role="presentation"> <form class="nav-search search-form" role="search" aria-label="Search"> <div class="input-group" role="presentation"> <input type="text" name="q" class="search-box form-control" placeholder="Search Docs" aria-label="Search text"/> <span class="input-group-btn"> <button tabindex="0" class="btn" type="submit" aria-label="Search"> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" alt="Search" /> <img class="search-icon-light" src="/assets/icons/search.svg" alt="Search" /> </button> </span> </div> </form> </li>  <li><a class="link-button" href="/Download" id="nav-download"> <span>Download</span></a></li> </ul> </div> </div> </nav> </div> </div> <div class="updates-banner "> <div class="container"> <p class="message">馃殌 Get <a class="copilot-deep-link" href="vscode://github.copilot-chat?referrer=vscode-updatebanner" id="banner-link-updates" rel="noopener">GitHub Copilot Free</a> in VS Code!</p> </div> <div tabindex="0" role="button" title="Dismiss this update" class="dismiss-btn" id="banner-dismiss-btn"><span class="sr-only">Dismiss this update</span><span aria-hidden="true" class="glyph-icon"></span></div> </div>   <div id="main-content"> <script> function closeReportIssue() { var element = document.getElementById('surveypopup'); element.parentElement.removeChild(element); } function reportIssue(tutorial, page) { var div = document.createElement('div'); div.innerHTML = '<div id="surveypopup" class="overlay visible"><div class="surveypopup"><div id="surveytitle">Tell us more<a href="javascript:void(0)" onclick="closeReportIssue()">X</a></div><div id="surveydiv"><iframe frameBorder="0" scrolling="0" src="https://www.research.net/r/PWZWZ52?tutorial=' + tutorial + '&step=' + page + '"></iframe></div></div></div>'; document.body.appendChild(div.children[0]); } </script> <div class="container body-content docs"> <div class="row">  <div class="col-xs-12 col-md-2 docs-navbar-container"> <nav id="docs-navbar" aria-label="Topics" class="docs-nav visible-md visible-lg"> <ul class="nav" id="main-nav"> <li > <a class="docs-home" href="/docs" >Overview</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#setup-articles" data-parent="#main-nav" data-toggle="collapse">Setup</a> <ul id="setup-articles" class="collapse "> <li > <a href="/docs/setup/setup-overview" >Overview</a> </li> <li > <a href="/docs/setup/linux" >Linux</a> </li> <li > <a href="/docs/setup/mac" >macOS</a> </li> <li > <a href="/docs/setup/windows" >Windows</a> </li> <li > <a href="/docs/setup/raspberry-pi" >Raspberry Pi</a> </li> <li > <a href="/docs/setup/network" >Network</a> </li> <li > <a href="/docs/setup/additional-components" >Additional Components</a> </li> <li > <a href="/docs/setup/enterprise" >Enterprise</a> </li> <li > <a href="/docs/setup/uninstall" >Uninstall</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#getstarted-articles" data-parent="#main-nav" data-toggle="collapse">Getting Started</a> <ul id="getstarted-articles" class="collapse "> <li > <a href="/docs/getstarted/getting-started" >VS Code Tutorial</a> </li> <li > <a href="/docs/getstarted/copilot-quickstart" >Copilot Quickstart</a> </li> <li > <a href="/docs/getstarted/userinterface" >User Interface</a> </li> <li > <a href="/docs/getstarted/personalize-vscode" >Personalize VS Code</a> </li> <li > <a href="/docs/getstarted/extensions" >Install Extensions</a> </li> <li > <a href="/docs/getstarted/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/getstarted/introvideos" >Intro Videos</a> </li> </ul> </li> <li class="panel active expanded"> <a class="area" role="button" href="#editor-articles" data-parent="#main-nav" data-toggle="collapse">User Guide</a> <ul id="editor-articles" class="collapse in"> <li > <a href="/docs/editor/codebasics" >Basic Editing</a> </li> <li > <a href="/docs/editor/extension-marketplace" >Extension Marketplace</a> </li> <li > <a href="/docs/editor/extension-runtime-security" >Extension Runtime Security</a> </li> <li > <a href="/docs/editor/intellisense" >IntelliSense</a> </li> <li > <a href="/docs/editor/editingevolved" >Code Navigation</a> </li> <li > <a href="/docs/editor/refactoring" >Refactoring</a> </li> <li > <a href="/docs/editor/debugging" >Debugging</a> </li> <li > <a href="/docs/editor/debugging-configuration" >Debug Configuration</a> </li> <li > <a href="/docs/editor/testing" >Testing</a> </li> <li class="active"> <a href="/docs/editor/vscode-web" aria-label="Current Page: VS Code for the Web">VS Code for the Web</a> </li> <li > <a href="/docs/editor/keybindings" >Keyboard Shortcuts</a> </li> <li > <a href="/docs/editor/settings" >Settings</a> </li> <li > <a href="/docs/editor/themes" >Themes</a> </li> <li > <a href="/docs/editor/locales" >Display Language</a> </li> <li > <a href="/docs/editor/tasks" >Tasks</a> </li> <li > <a href="/docs/editor/profiles" >Profiles</a> </li> <li > <a href="/docs/editor/settings-sync" >Settings Sync</a> </li> <li > <a href="/docs/editor/userdefinedsnippets" >Snippets</a> </li> <li > <a href="/docs/editor/emmet" >Emmet</a> </li> <li > <a href="/docs/editor/command-line" >Command Line Interface</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#editor-workspaces-articles" data-parent="#editor-articles" data-toggle="collapse">Workspaces</a> <ul id="editor-workspaces-articles" class="collapse "> <li > <a href="/docs/editor/workspaces/workspaces" >Workspaces</a> </li> <li > <a href="/docs/editor/workspaces/workspace-trust" >Workspace Trust</a> </li> <li > <a href="/docs/editor/workspaces/multi-root-workspaces" >Multi-root Workspaces</a> </li> </ul> </li> <li > <a href="/docs/editor/accessibility" >Accessibility</a> </li> <li > <a href="/docs/editor/voice" >Voice Interactions</a> </li> <li > <a href="/docs/editor/custom-layout" >Custom Layout</a> </li> <li > <a href="/docs/editor/port-forwarding" >Port Forwarding</a> </li> <li > <a href="/docs/editor/telemetry" >Telemetry</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#sourcecontrol-articles" data-parent="#main-nav" data-toggle="collapse">Source Control</a> <ul id="sourcecontrol-articles" class="collapse "> <li > <a href="/docs/sourcecontrol/overview" >Overview</a> </li> <li > <a href="/docs/sourcecontrol/intro-to-git" >Introduction to Git</a> </li> <li > <a href="/docs/sourcecontrol/github" >Collaborate on GitHub</a> </li> <li > <a href="/docs/sourcecontrol/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#terminal-articles" data-parent="#main-nav" data-toggle="collapse">Terminal</a> <ul id="terminal-articles" class="collapse "> <li > <a href="/docs/terminal/getting-started" >Getting Started Tutorial</a> </li> <li > <a href="/docs/terminal/basics" >Terminal Basics</a> </li> <li > <a href="/docs/terminal/profiles" >Terminal Profiles</a> </li> <li > <a href="/docs/terminal/shell-integration" >Shell Integration</a> </li> <li > <a href="/docs/terminal/appearance" >Appearance</a> </li> <li > <a href="/docs/terminal/advanced" >Advanced</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#copilot-articles" data-parent="#main-nav" data-toggle="collapse">GitHub Copilot</a> <ul id="copilot-articles" class="collapse "> <li > <a href="/docs/copilot/overview" >Overview</a> </li> <li > <a href="/docs/copilot/setup" >Setup</a> </li> <li > <a href="/docs/copilot/getting-started" >Copilot Quickstart</a> </li> <li > <a href="/docs/copilot/ai-powered-suggestions" >Code Completions</a> </li> <li > <a href="/docs/copilot/copilot-chat" >Copilot Chat</a> </li> <li > <a href="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</a> </li> <li > <a href="/docs/copilot/copilot-edits" >Copilot Edits</a> </li> <li > <a href="/docs/copilot/copilot-customization" >Customizing Copilot</a> </li> <li > <a href="/docs/copilot/prompt-crafting" >Best Practices</a> </li> <li > <a href="/docs/copilot/workspace-context" >Workspace Context</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#copilot-guides-articles" data-parent="#copilot-articles" data-toggle="collapse">Guides</a> <ul id="copilot-guides-articles" class="collapse "> <li > <a href="/docs/copilot/guides/test-with-copilot" >Test with Copilot</a> </li> <li > <a href="/docs/copilot/guides/debug-with-copilot" >Debug with Copilot</a> </li> </ul> </li> <li > <a href="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</a> </li> <li > <a href="/docs/copilot/copilot-settings" >Settings Reference</a> </li> <li > <a href="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</a> </li> <li > <a href="/docs/copilot/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#languages-articles" data-parent="#main-nav" data-toggle="collapse">Languages</a> <ul id="languages-articles" class="collapse "> <li > <a href="/docs/languages/overview" >Overview</a> </li> <li > <a href="/docs/languages/javascript" >JavaScript</a> </li> <li > <a href="/docs/languages/json" >JSON</a> </li> <li > <a href="/docs/languages/html" >HTML</a> </li> <li > <a href="/docs/languages/css" >CSS, SCSS and Less</a> </li> <li > <a href="/docs/languages/typescript" >TypeScript</a> </li> <li > <a href="/docs/languages/markdown" >Markdown</a> </li> <li > <a href="/docs/languages/powershell" >PowerShell</a> </li> <li > <a href="/docs/languages/cpp" >C++</a> </li> <li > <a href="/docs/languages/java" >Java</a> </li> <li > <a href="/docs/languages/php" >PHP</a> </li> <li > <a href="/docs/languages/python" >Python</a> </li> <li > <a href="/docs/languages/julia" >Julia</a> </li> <li > <a href="/docs/languages/r" >R</a> </li> <li > <a href="/docs/languages/ruby" >Ruby</a> </li> <li > <a href="/docs/languages/rust" >Rust</a> </li> <li > <a href="/docs/languages/go" >Go</a> </li> <li > <a href="/docs/languages/tsql" >T-SQL</a> </li> <li > <a href="/docs/languages/csharp" >C#</a> </li> <li > <a href="/docs/languages/dotnet" >.NET</a> </li> <li > <a href="/docs/languages/polyglot" >Polyglot</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#nodejs-articles" data-parent="#main-nav" data-toggle="collapse">Node.js / JavaScript</a> <ul id="nodejs-articles" class="collapse "> <li > <a href="/docs/nodejs/working-with-javascript" >Working with JavaScript</a> </li> <li > <a href="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</a> </li> <li > <a href="/docs/nodejs/nodejs-debugging" >Node.js Debugging</a> </li> <li > <a href="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</a> </li> <li > <a href="/docs/nodejs/browser-debugging" >Browser Debugging</a> </li> <li > <a href="/docs/nodejs/angular-tutorial" >Angular Tutorial</a> </li> <li > <a href="/docs/nodejs/reactjs-tutorial" >React Tutorial</a> </li> <li > <a href="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</a> </li> <li > <a href="/docs/nodejs/debugging-recipes" >Debugging Recipes</a> </li> <li > <a href="/docs/nodejs/profiling" >Performance Profiling</a> </li> <li > <a href="/docs/nodejs/extensions" >Extensions</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#typescript-articles" data-parent="#main-nav" data-toggle="collapse">TypeScript</a> <ul id="typescript-articles" class="collapse "> <li > <a href="/docs/typescript/typescript-tutorial" >Tutorial</a> </li> <li > <a href="/docs/typescript/typescript-compiling" >Compiling</a> </li> <li > <a href="/docs/typescript/typescript-editing" >Editing</a> </li> <li > <a href="/docs/typescript/typescript-refactoring" >Refactoring</a> </li> <li > <a href="/docs/typescript/typescript-debugging" >Debugging</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#python-articles" data-parent="#main-nav" data-toggle="collapse">Python</a> <ul id="python-articles" class="collapse "> <li > <a href="/docs/python/python-quick-start" >Quick Start</a> </li> <li > <a href="/docs/python/python-tutorial" >Tutorial</a> </li> <li > <a href="/docs/python/run" >Run Python Code</a> </li> <li > <a href="/docs/python/editing" >Editing</a> </li> <li > <a href="/docs/python/linting" >Linting</a> </li> <li > <a href="/docs/python/formatting" >Formatting</a> </li> <li > <a href="/docs/python/debugging" >Debugging</a> </li> <li > <a href="/docs/python/environments" >Environments</a> </li> <li > <a href="/docs/python/testing" >Testing</a> </li> <li > <a href="/docs/python/jupyter-support-py" >Python Interactive</a> </li> <li > <a href="/docs/python/tutorial-django" >Django Tutorial</a> </li> <li > <a href="/docs/python/tutorial-fastapi" >FastAPI Tutorial</a> </li> <li > <a href="/docs/python/tutorial-flask" >Flask Tutorial</a> </li> <li > <a href="/docs/python/tutorial-create-containers" >Create Containers</a> </li> <li > <a href="/docs/python/python-on-azure" >Deploy Python Apps</a> </li> <li > <a href="/docs/python/python-web" >Python in the Web</a> </li> <li > <a href="/docs/python/settings-reference" >Settings Reference</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#java-articles" data-parent="#main-nav" data-toggle="collapse">Java</a> <ul id="java-articles" class="collapse "> <li > <a href="/docs/java/java-tutorial" >Getting Started</a> </li> <li > <a href="/docs/java/java-editing" >Navigate and Edit</a> </li> <li > <a href="/docs/java/java-refactoring" >Refactoring</a> </li> <li > <a href="/docs/java/java-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/java/java-project" >Project Management</a> </li> <li > <a href="/docs/java/java-build" >Build Tools</a> </li> <li > <a href="/docs/java/java-debugging" >Run and Debug</a> </li> <li > <a href="/docs/java/java-testing" >Testing</a> </li> <li > <a href="/docs/java/java-spring-boot" >Spring Boot</a> </li> <li > <a href="/docs/java/java-tomcat-jetty" >Application Servers</a> </li> <li > <a href="/docs/java/java-on-azure" >Deploy Java Apps</a> </li> <li > <a href="/docs/java/java-gui" >GUI Applications</a> </li> <li > <a href="/docs/java/extensions" >Extensions</a> </li> <li > <a href="/docs/java/java-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#cpp-articles" data-parent="#main-nav" data-toggle="collapse">C++</a> <ul id="cpp-articles" class="collapse "> <li > <a href="/docs/cpp/introvideos-cpp" >Intro Videos</a> </li> <li > <a href="/docs/cpp/config-linux" >GCC on Linux</a> </li> <li > <a href="/docs/cpp/config-mingw" >GCC on Windows</a> </li> <li > <a href="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</a> </li> <li > <a href="/docs/cpp/config-clang-mac" >Clang on macOS</a> </li> <li > <a href="/docs/cpp/config-msvc" >Microsoft C++ on Windows</a> </li> <li > <a href="/docs/cpp/build-with-cmake" >Build with CMake</a> </li> <li > <a href="/docs/cpp/cmake-linux" >CMake Tools on Linux</a> </li> <li > <a href="/docs/cpp/cmake-quickstart" >CMake Quick Start</a> </li> <li > <a href="/docs/cpp/cpp-ide" >Editing and Navigating</a> </li> <li > <a href="/docs/cpp/cpp-debug" >Debugging</a> </li> <li > <a href="/docs/cpp/launch-json-reference" >Configure Debugging</a> </li> <li > <a href="/docs/cpp/cpp-refactoring" >Refactoring</a> </li> <li > <a href="/docs/cpp/customize-default-settings-cpp" >Settings</a> </li> <li > <a href="/docs/cpp/configure-intellisense" >Configure IntelliSense</a> </li> <li > <a href="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for Cross-Compiling</a> </li> <li > <a href="/docs/cpp/faq-cpp" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#csharp-articles" data-parent="#main-nav" data-toggle="collapse">C#</a> <ul id="csharp-articles" class="collapse "> <li > <a href="/docs/csharp/introvideos-csharp" >Intro Videos</a> </li> <li > <a href="/docs/csharp/get-started" >Get Started</a> </li> <li > <a href="/docs/csharp/navigate-edit" >Navigate and Edit</a> </li> <li > <a href="/docs/csharp/intellicode" >IntelliCode</a> </li> <li > <a href="/docs/csharp/refactoring" >Refactoring</a> </li> <li > <a href="/docs/csharp/formatting-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/csharp/project-management" >Project Management</a> </li> <li > <a href="/docs/csharp/build-tools" >Build Tools</a> </li> <li > <a href="/docs/csharp/package-management" >Package Management</a> </li> <li > <a href="/docs/csharp/debugging" >Run and Debug</a> </li> <li > <a href="/docs/csharp/testing" >Testing</a> </li> <li > <a href="/docs/csharp/cs-dev-kit-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#containers-articles" data-parent="#main-nav" data-toggle="collapse">Docker</a> <ul id="containers-articles" class="collapse "> <li > <a href="/docs/containers/overview" >Overview</a> </li> <li > <a href="/docs/containers/quickstart-node" >Node.js</a> </li> <li > <a href="/docs/containers/quickstart-python" >Python</a> </li> <li > <a href="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</a> </li> <li > <a href="/docs/containers/debug-common" >Debug</a> </li> <li > <a href="/docs/containers/docker-compose" >Docker Compose</a> </li> <li > <a href="/docs/containers/quickstart-container-registries" >Registries</a> </li> <li > <a href="/docs/containers/app-service" >Deploy to Azure</a> </li> <li > <a href="/docs/containers/choosing-dev-environment" >Choose a Dev Environment</a> </li> <li > <a href="/docs/containers/reference" >Customize</a> </li> <li > <a href="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</a> </li> <li > <a href="/docs/containers/troubleshooting" >Tips and Tricks</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#datascience-articles" data-parent="#main-nav" data-toggle="collapse">Data Science</a> <ul id="datascience-articles" class="collapse "> <li > <a href="/docs/datascience/overview" >Overview</a> </li> <li > <a href="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</a> </li> <li > <a href="/docs/datascience/data-science-tutorial" >Data Science Tutorial</a> </li> <li > <a href="/docs/datascience/python-interactive" >Python Interactive</a> </li> <li > <a href="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</a> </li> <li > <a href="/docs/datascience/data-wrangler" >Data Wrangler</a> </li> <li > <a href="/docs/datascience/pytorch-support" >PyTorch Support</a> </li> <li > <a href="/docs/datascience/azure-machine-learning" >Azure Machine Learning</a> </li> <li > <a href="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</a> </li> <li > <a href="/docs/datascience/notebooks-web" >Jupyter Notebooks on the Web</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#intelligentapps-articles" data-parent="#main-nav" data-toggle="collapse">Intelligent Apps</a> <ul id="intelligentapps-articles" class="collapse "> <li > <a href="/docs/intelligentapps/overview" >AI Toolkit Overview</a> </li> <li > <a href="/docs/intelligentapps/models" >Models</a> </li> <li > <a href="/docs/intelligentapps/playground" >Playground</a> </li> <li > <a href="/docs/intelligentapps/bulkrun" >Bulk Run</a> </li> <li > <a href="/docs/intelligentapps/evaluation" >Evaluation</a> </li> <li > <a href="/docs/intelligentapps/finetune" >Fine-tune</a> </li> <li > <a href="/docs/intelligentapps/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#azure-articles" data-parent="#main-nav" data-toggle="collapse">Azure</a> <ul id="azure-articles" class="collapse "> <li > <a href="/docs/azure/overview" >Overview</a> </li> <li > <a href="/docs/azure/gettingstarted" >Getting Started</a> </li> <li > <a href="/docs/azure/deployment" >Deployment</a> </li> <li > <a href="/docs/azure/docker" >Docker</a> </li> <li > <a href="/docs/azure/aksextensions" >Azure Kubernetes Service</a> </li> <li > <a href="/docs/azure/kubernetes" >Kubernetes</a> </li> <li > <a href="/docs/azure/mongodb" >MongoDB</a> </li> <li > <a href="/docs/azure/remote-debugging" >Remote Debugging for Node.js</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#remote-articles" data-parent="#main-nav" data-toggle="collapse">Remote</a> <ul id="remote-articles" class="collapse "> <li > <a href="/docs/remote/remote-overview" >Overview</a> </li> <li > <a href="/docs/remote/ssh" >SSH</a> </li> <li > <a href="/docs/remote/dev-containers" >Dev Containers</a> </li> <li > <a href="/docs/remote/wsl" >Windows Subsystem for Linux</a> </li> <li > <a href="/docs/remote/codespaces" >GitHub Codespaces</a> </li> <li > <a href="/docs/remote/vscode-server" >VS Code Server</a> </li> <li > <a href="/docs/remote/tunnels" >Tunnels</a> </li> <li > <a href="/docs/remote/ssh-tutorial" >SSH Tutorial</a> </li> <li > <a href="/docs/remote/wsl-tutorial" >WSL Tutorial</a> </li> <li > <a href="/docs/remote/troubleshooting" >Tips and Tricks</a> </li> <li > <a href="/docs/remote/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#devcontainers-articles" data-parent="#main-nav" data-toggle="collapse">Dev Containers</a> <ul id="devcontainers-articles" class="collapse "> <li > <a href="/docs/devcontainers/containers" >Overview</a> </li> <li > <a href="/docs/devcontainers/tutorial" >Tutorial</a> </li> <li > <a href="/docs/devcontainers/attach-container" >Attach to Container</a> </li> <li > <a href="/docs/devcontainers/create-dev-container" >Create Dev Container</a> </li> <li > <a href="/docs/devcontainers/containers-advanced" >Advanced Containers</a> </li> <li > <a href="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</a> </li> <li > <a href="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</a> </li> <li > <a href="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/devcontainers/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#reference-articles" data-parent="#main-nav" data-toggle="collapse">Reference</a> <ul id="reference-articles" class="collapse "> <li > <a href="/docs/reference/default-keybindings" >Default Keyboard Shortcuts</a> </li> <li > <a href="/docs/reference/default-settings" >Default Settings</a> </li> <li > <a href="/docs/reference/variables-reference" >Substitution Variables</a> </li> </ul> </li> </ul> </nav> <nav id="small-nav" aria-label="Topics" class="docs-nav hidden-md hidden-lg"> <label class="faux-h4" for="small-nav-dropdown">Topics</label> <select id="small-nav-dropdown" aria-label="topics"> <option value="/docs" >Overview</option> <optgroup label="Setup"> <option value="/docs/setup/setup-overview" >Overview</option> <option value="/docs/setup/linux" >Linux</option> <option value="/docs/setup/mac" >macOS</option> <option value="/docs/setup/windows" >Windows</option> <option value="/docs/setup/raspberry-pi" >Raspberry Pi</option> <option value="/docs/setup/network" >Network</option> <option value="/docs/setup/additional-components" >Additional Components</option> <option value="/docs/setup/enterprise" >Enterprise</option> <option value="/docs/setup/uninstall" >Uninstall</option> </optgroup> <optgroup label="Getting Started"> <option value="/docs/getstarted/getting-started" >VS Code Tutorial</option> <option value="/docs/getstarted/copilot-quickstart" >Copilot Quickstart</option> <option value="/docs/getstarted/userinterface" >User Interface</option> <option value="/docs/getstarted/personalize-vscode" >Personalize VS Code</option> <option value="/docs/getstarted/extensions" >Install Extensions</option> <option value="/docs/getstarted/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/getstarted/introvideos" >Intro Videos</option> </optgroup> <optgroup label="User Guide"> <option value="/docs/editor/codebasics" >Basic Editing</option> <option value="/docs/editor/extension-marketplace" >Extension Marketplace</option> <option value="/docs/editor/extension-runtime-security" >Extension Runtime Security</option> <option value="/docs/editor/intellisense" >IntelliSense</option> <option value="/docs/editor/editingevolved" >Code Navigation</option> <option value="/docs/editor/refactoring" >Refactoring</option> <option value="/docs/editor/debugging" >Debugging</option> <option value="/docs/editor/debugging-configuration" >Debug Configuration</option> <option value="/docs/editor/testing" >Testing</option> <option value="/docs/editor/vscode-web" selected>VS Code for the Web</option> <option value="/docs/editor/keybindings" >Keyboard Shortcuts</option> <option value="/docs/editor/settings" >Settings</option> <option value="/docs/editor/themes" >Themes</option> <option value="/docs/editor/locales" >Display Language</option> <option value="/docs/editor/tasks" >Tasks</option> <option value="/docs/editor/profiles" >Profiles</option> <option value="/docs/editor/settings-sync" >Settings Sync</option> <option value="/docs/editor/userdefinedsnippets" >Snippets</option> <option value="/docs/editor/emmet" >Emmet</option> <option value="/docs/editor/command-line" >Command Line Interface</option> <optgroup label="User Guide - Workspaces"> <option value="/docs/editor/workspaces/workspaces" >Workspaces</option> <option value="/docs/editor/workspaces/workspace-trust" >Workspace Trust</option> <option value="/docs/editor/workspaces/multi-root-workspaces" >Multi-root Workspaces</option> </optgroup> <option value="/docs/editor/accessibility" >Accessibility</option> <option value="/docs/editor/voice" >Voice Interactions</option> <option value="/docs/editor/custom-layout" >Custom Layout</option> <option value="/docs/editor/port-forwarding" >Port Forwarding</option> <option value="/docs/editor/telemetry" >Telemetry</option> </optgroup> <optgroup label="Source Control"> <option value="/docs/sourcecontrol/overview" >Overview</option> <option value="/docs/sourcecontrol/intro-to-git" >Introduction to Git</option> <option value="/docs/sourcecontrol/github" >Collaborate on GitHub</option> <option value="/docs/sourcecontrol/faq" >FAQ</option> </optgroup> <optgroup label="Terminal"> <option value="/docs/terminal/getting-started" >Getting Started Tutorial</option> <option value="/docs/terminal/basics" >Terminal Basics</option> <option value="/docs/terminal/profiles" >Terminal Profiles</option> <option value="/docs/terminal/shell-integration" >Shell Integration</option> <option value="/docs/terminal/appearance" >Appearance</option> <option value="/docs/terminal/advanced" >Advanced</option> </optgroup> <optgroup label="GitHub Copilot"> <option value="/docs/copilot/overview" >Overview</option> <option value="/docs/copilot/setup" >Setup</option> <option value="/docs/copilot/getting-started" >Copilot Quickstart</option> <option value="/docs/copilot/ai-powered-suggestions" >Code Completions</option> <option value="/docs/copilot/copilot-chat" >Copilot Chat</option> <option value="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</option> <option value="/docs/copilot/copilot-edits" >Copilot Edits</option> <option value="/docs/copilot/copilot-customization" >Customizing Copilot</option> <option value="/docs/copilot/prompt-crafting" >Best Practices</option> <option value="/docs/copilot/workspace-context" >Workspace Context</option> <optgroup label="GitHub Copilot - Guides"> <option value="/docs/copilot/guides/test-with-copilot" >Test with Copilot</option> <option value="/docs/copilot/guides/debug-with-copilot" >Debug with Copilot</option> </optgroup> <option value="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</option> <option value="/docs/copilot/copilot-settings" >Settings Reference</option> <option value="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</option> <option value="/docs/copilot/faq" >FAQ</option> </optgroup> <optgroup label="Languages"> <option value="/docs/languages/overview" >Overview</option> <option value="/docs/languages/javascript" >JavaScript</option> <option value="/docs/languages/json" >JSON</option> <option value="/docs/languages/html" >HTML</option> <option value="/docs/languages/css" >CSS, SCSS and Less</option> <option value="/docs/languages/typescript" >TypeScript</option> <option value="/docs/languages/markdown" >Markdown</option> <option value="/docs/languages/powershell" >PowerShell</option> <option value="/docs/languages/cpp" >C++</option> <option value="/docs/languages/java" >Java</option> <option value="/docs/languages/php" >PHP</option> <option value="/docs/languages/python" >Python</option> <option value="/docs/languages/julia" >Julia</option> <option value="/docs/languages/r" >R</option> <option value="/docs/languages/ruby" >Ruby</option> <option value="/docs/languages/rust" >Rust</option> <option value="/docs/languages/go" >Go</option> <option value="/docs/languages/tsql" >T-SQL</option> <option value="/docs/languages/csharp" >C#</option> <option value="/docs/languages/dotnet" >.NET</option> <option value="/docs/languages/polyglot" >Polyglot</option> </optgroup> <optgroup label="Node.js / JavaScript"> <option value="/docs/nodejs/working-with-javascript" >Working with JavaScript</option> <option value="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</option> <option value="/docs/nodejs/nodejs-debugging" >Node.js Debugging</option> <option value="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</option> <option value="/docs/nodejs/browser-debugging" >Browser Debugging</option> <option value="/docs/nodejs/angular-tutorial" >Angular Tutorial</option> <option value="/docs/nodejs/reactjs-tutorial" >React Tutorial</option> <option value="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</option> <option value="/docs/nodejs/debugging-recipes" >Debugging Recipes</option> <option value="/docs/nodejs/profiling" >Performance Profiling</option> <option value="/docs/nodejs/extensions" >Extensions</option> </optgroup> <optgroup label="TypeScript"> <option value="/docs/typescript/typescript-tutorial" >Tutorial</option> <option value="/docs/typescript/typescript-compiling" >Compiling</option> <option value="/docs/typescript/typescript-editing" >Editing</option> <option value="/docs/typescript/typescript-refactoring" >Refactoring</option> <option value="/docs/typescript/typescript-debugging" >Debugging</option> </optgroup> <optgroup label="Python"> <option value="/docs/python/python-quick-start" >Quick Start</option> <option value="/docs/python/python-tutorial" >Tutorial</option> <option value="/docs/python/run" >Run Python Code</option> <option value="/docs/python/editing" >Editing</option> <option value="/docs/python/linting" >Linting</option> <option value="/docs/python/formatting" >Formatting</option> <option value="/docs/python/debugging" >Debugging</option> <option value="/docs/python/environments" >Environments</option> <option value="/docs/python/testing" >Testing</option> <option value="/docs/python/jupyter-support-py" >Python Interactive</option> <option value="/docs/python/tutorial-django" >Django Tutorial</option> <option value="/docs/python/tutorial-fastapi" >FastAPI Tutorial</option> <option value="/docs/python/tutorial-flask" >Flask Tutorial</option> <option value="/docs/python/tutorial-create-containers" >Create Containers</option> <option value="/docs/python/python-on-azure" >Deploy Python Apps</option> <option value="/docs/python/python-web" >Python in the Web</option> <option value="/docs/python/settings-reference" >Settings Reference</option> </optgroup> <optgroup label="Java"> <option value="/docs/java/java-tutorial" >Getting Started</option> <option value="/docs/java/java-editing" >Navigate and Edit</option> <option value="/docs/java/java-refactoring" >Refactoring</option> <option value="/docs/java/java-linting" >Formatting and Linting</option> <option value="/docs/java/java-project" >Project Management</option> <option value="/docs/java/java-build" >Build Tools</option> <option value="/docs/java/java-debugging" >Run and Debug</option> <option value="/docs/java/java-testing" >Testing</option> <option value="/docs/java/java-spring-boot" >Spring Boot</option> <option value="/docs/java/java-tomcat-jetty" >Application Servers</option> <option value="/docs/java/java-on-azure" >Deploy Java Apps</option> <option value="/docs/java/java-gui" >GUI Applications</option> <option value="/docs/java/extensions" >Extensions</option> <option value="/docs/java/java-faq" >FAQ</option> </optgroup> <optgroup label="C++"> <option value="/docs/cpp/introvideos-cpp" >Intro Videos</option> <option value="/docs/cpp/config-linux" >GCC on Linux</option> <option value="/docs/cpp/config-mingw" >GCC on Windows</option> <option value="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</option> <option value="/docs/cpp/config-clang-mac" >Clang on macOS</option> <option value="/docs/cpp/config-msvc" >Microsoft C++ on Windows</option> <option value="/docs/cpp/build-with-cmake" >Build with CMake</option> <option value="/docs/cpp/cmake-linux" >CMake Tools on Linux</option> <option value="/docs/cpp/cmake-quickstart" >CMake Quick Start</option> <option value="/docs/cpp/cpp-ide" >Editing and Navigating</option> <option value="/docs/cpp/cpp-debug" >Debugging</option> <option value="/docs/cpp/launch-json-reference" >Configure Debugging</option> <option value="/docs/cpp/cpp-refactoring" >Refactoring</option> <option value="/docs/cpp/customize-default-settings-cpp" >Settings</option> <option value="/docs/cpp/configure-intellisense" >Configure IntelliSense</option> <option value="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for Cross-Compiling</option> <option value="/docs/cpp/faq-cpp" >FAQ</option> </optgroup> <optgroup label="C#"> <option value="/docs/csharp/introvideos-csharp" >Intro Videos</option> <option value="/docs/csharp/get-started" >Get Started</option> <option value="/docs/csharp/navigate-edit" >Navigate and Edit</option> <option value="/docs/csharp/intellicode" >IntelliCode</option> <option value="/docs/csharp/refactoring" >Refactoring</option> <option value="/docs/csharp/formatting-linting" >Formatting and Linting</option> <option value="/docs/csharp/project-management" >Project Management</option> <option value="/docs/csharp/build-tools" >Build Tools</option> <option value="/docs/csharp/package-management" >Package Management</option> <option value="/docs/csharp/debugging" >Run and Debug</option> <option value="/docs/csharp/testing" >Testing</option> <option value="/docs/csharp/cs-dev-kit-faq" >FAQ</option> </optgroup> <optgroup label="Docker"> <option value="/docs/containers/overview" >Overview</option> <option value="/docs/containers/quickstart-node" >Node.js</option> <option value="/docs/containers/quickstart-python" >Python</option> <option value="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</option> <option value="/docs/containers/debug-common" >Debug</option> <option value="/docs/containers/docker-compose" >Docker Compose</option> <option value="/docs/containers/quickstart-container-registries" >Registries</option> <option value="/docs/containers/app-service" >Deploy to Azure</option> <option value="/docs/containers/choosing-dev-environment" >Choose a Dev Environment</option> <option value="/docs/containers/reference" >Customize</option> <option value="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</option> <option value="/docs/containers/troubleshooting" >Tips and Tricks</option> </optgroup> <optgroup label="Data Science"> <option value="/docs/datascience/overview" >Overview</option> <option value="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</option> <option value="/docs/datascience/data-science-tutorial" >Data Science Tutorial</option> <option value="/docs/datascience/python-interactive" >Python Interactive</option> <option value="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</option> <option value="/docs/datascience/data-wrangler" >Data Wrangler</option> <option value="/docs/datascience/pytorch-support" >PyTorch Support</option> <option value="/docs/datascience/azure-machine-learning" >Azure Machine Learning</option> <option value="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</option> <option value="/docs/datascience/notebooks-web" >Jupyter Notebooks on the Web</option> </optgroup> <optgroup label="Intelligent Apps"> <option value="/docs/intelligentapps/overview" >AI Toolkit Overview</option> <option value="/docs/intelligentapps/models" >Models</option> <option value="/docs/intelligentapps/playground" >Playground</option> <option value="/docs/intelligentapps/bulkrun" >Bulk Run</option> <option value="/docs/intelligentapps/evaluation" >Evaluation</option> <option value="/docs/intelligentapps/finetune" >Fine-tune</option> <option value="/docs/intelligentapps/faq" >FAQ</option> </optgroup> <optgroup label="Azure"> <option value="/docs/azure/overview" >Overview</option> <option value="/docs/azure/gettingstarted" >Getting Started</option> <option value="/docs/azure/deployment" >Deployment</option> <option value="/docs/azure/docker" >Docker</option> <option value="/docs/azure/aksextensions" >Azure Kubernetes Service</option> <option value="/docs/azure/kubernetes" >Kubernetes</option> <option value="/docs/azure/mongodb" >MongoDB</option> <option value="/docs/azure/remote-debugging" >Remote Debugging for Node.js</option> </optgroup> <optgroup label="Remote"> <option value="/docs/remote/remote-overview" >Overview</option> <option value="/docs/remote/ssh" >SSH</option> <option value="/docs/remote/dev-containers" >Dev Containers</option> <option value="/docs/remote/wsl" >Windows Subsystem for Linux</option> <option value="/docs/remote/codespaces" >GitHub Codespaces</option> <option value="/docs/remote/vscode-server" >VS Code Server</option> <option value="/docs/remote/tunnels" >Tunnels</option> <option value="/docs/remote/ssh-tutorial" >SSH Tutorial</option> <option value="/docs/remote/wsl-tutorial" >WSL Tutorial</option> <option value="/docs/remote/troubleshooting" >Tips and Tricks</option> <option value="/docs/remote/faq" >FAQ</option> </optgroup> <optgroup label="Dev Containers"> <option value="/docs/devcontainers/containers" >Overview</option> <option value="/docs/devcontainers/tutorial" >Tutorial</option> <option value="/docs/devcontainers/attach-container" >Attach to Container</option> <option value="/docs/devcontainers/create-dev-container" >Create Dev Container</option> <option value="/docs/devcontainers/containers-advanced" >Advanced Containers</option> <option value="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</option> <option value="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</option> <option value="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/devcontainers/faq" >FAQ</option> </optgroup> <optgroup label="Reference"> <option value="/docs/reference/default-keybindings" >Default Keyboard Shortcuts</option> <option value="/docs/reference/default-settings" >Default Settings</option> <option value="/docs/reference/variables-reference" >Substitution Variables</option> </optgroup> </select> </nav> </div>  <div class="col-xs-12 visible-xs"> <nav aria-labelledby="small-right-nav-label" class="small-nav docs-nav updates-nav"> <label class="faux-h4" for="small-right-nav-dropdown" id="small-right-nav-label">In this article</label> <select id="small-right-nav-dropdown" class="small-nav-select" aria-label="Sections"> <option value="#_relationship-to-vs-code-desktop">Relationship to VS Code Desktop</option> <option value="#_opening-a-project">Opening a project</option> <option value="#_github-repos">GitHub repos</option> <option value="#_azure-repos">Azure Repos</option> <option value="#_more-custom-urls">More custom URLs</option> <option value="#_continue-working-in-a-different-environment">Continue working in a different environment</option> <option value="#_saving-and-sharing-work">Saving and sharing work</option> <option value="#_use-your-own-compute-instance-with-remote-tunnels">Use your own compute instance with Remote Tunnels</option> <option value="#_safe-exploration">Safe exploration</option> <option value="#_run-anywhere">Run anywhere</option> <option value="#_language-support">Language support</option> <option value="#_limitations">Limitations</option> <option value="#_additional-browser-setup">Additional browser setup</option> </select> </nav> </div>  <main class="col-xs-12 col-sm-9 col-md-8 body"> <div class="edit-github pull-right"> <a href="https://vscode.dev/github/microsoft/vscode-docs/blob/main/docs/editor/vscode-web.md" class="btn btn-default" title="Edit this document in vscode.dev"> <span class="glyphicon glyphicon-pencil"></span> <span class="hidden-xs">Edit</span> </a> </div> <h1>Visual Studio Code for the Web</h1> <p>Visual Studio Code for the Web provides a free, zero-install Microsoft Visual Studio Code experience running entirely in your browser, allowing you to quickly and safely browse source code repositories and make lightweight code changes. To get started, go to <a href="https://vscode.dev" class="external-link" target="_blank">https://vscode.dev</a> in your browser.</p> <p>VS Code for the Web has many of the features of VS Code Desktop that you love, including search and syntax highlighting while browsing and editing, along with extension support to work on your codebase and make simpler edits. In addition to opening repositories, forks, and pull requests from source control providers like GitHub and Azure Repos, you can also work with code that is stored on your local machine.</p> <p>VS Code for the Web runs entirely in your web browser, so there are certain limitations compared to the desktop experience, which you can read more about <a href="#_limitations">below</a>.</p> <p>The following video gives a quick overview of Visual Studio Code for the Web.</p> <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/2sdXMJZKLJE" title="Introduction to Visual Studio Code for the Web" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <h2 id="_relationship-to-vs-code-desktop" data-needslink="_relationship-to-vs-code-desktop">Relationship to VS Code Desktop</h2> <p>VS Code for the Web provides a browser-based experience for navigating files and repositories and committing lightweight code changes. However, if you need access to a runtime to run, build, or debug your code, you want to use platform features such as a terminal, or you want to run extensions that aren't supported in the web, we recommend moving your work to the desktop application, <a href="https://github.com/features/codespaces" class="external-link" target="_blank">GitHub Codespaces</a>, or using <a href="#_use-your-own-compute-instance-with-remote-tunnels">Remote - Tunnels</a> for the full capabilities of VS Code. In addition, VS Code Desktop lets you use a full set of keyboard shortcuts not limited by your browser.</p> <p>When you're ready to switch, you'll be able to <a href="#_continue-working-in-a-different-environment">"upgrade"</a> to the full VS Code experience with a few clicks.</p> <p>You can also switch between the Stable and Insiders versions of VS Code for the Web by selecting the gear icon, then <strong>Switch to Insiders Version...</strong>, or by navigating directly to <a href="https://insiders.vscode.dev" class="external-link" target="_blank">https://insiders.vscode.dev</a>.</p> <h2 id="_opening-a-project" data-needslink="_opening-a-project">Opening a project</h2> <p>By navigating to <a href="https://vscode.dev" class="external-link" target="_blank">https://vscode.dev</a>, you can create a new local file or project, work on an existing local project, or access source code repositories hosted elsewhere, such as on GitHub and Azure Repos (part of Azure DevOps).</p> <p>You can create a new local file in the web just as you would in a VS Code Desktop environment, using <strong>File</strong> > <strong>New File</strong> from the Command Palette (<span class="keybinding">F1</span>).</p> <h2 id="_github-repos" data-needslink="_github-repos">GitHub repos</h2> <p>You can open a GitHub repository in VS Code for the Web directly from a URL, following the schema: <code>https://vscode.dev/github/<organization>/<repo></code>. Using the <a href="https://github.com/microsoft/vscode" class="external-link" target="_blank">VS Code repository</a> as an example, this would look like: <code>https://vscode.dev/github/microsoft/vscode</code>.</p> <p>This experience is delivered at a custom <code>vscode.dev/github</code> URL, which is powered by the <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub" class="external-link" target="_blank">GitHub Repositories</a> extension (which is part of the broader <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.remote-repositories" class="external-link" target="_blank">Remote Repositories</a> extension).</p> <p>GitHub Repositories allows you to remotely browse and edit a repository from within the editor, without needing to pull code onto your local machine. You can learn more about the extension and how it works in our <a href="/docs/sourcecontrol/github#_github-repositories-extension">GitHub Repositories</a> guide.</p> <blockquote><p><strong>Note</strong>: The <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub" class="external-link" target="_blank">GitHub Repositories</a> extension works in VS Code Desktop as well to provide fast repository browsing and editing. Once you have the extension installed, you can open a repo with the <strong>GitHub Repositories: Open Repository...</strong> command.</p> </blockquote><p>You can also open GitHub repositories in <code>vscode.dev</code> through your browser's search bar (aka omnibox) by installing the <code>vscode.dev</code> <a href="https://chrome.google.com/webstore/detail/vs-code/kobakmhnkfaghloikphojodjebdelppk" class="external-link" target="_blank">extension</a> for Chrome and Edge. Then, type <code>code</code> to activate the omnibox, followed by your repository's name. Suggestions are populated by your browser search history, so if the repo you want doesn't come up, you can also type in the fully qualified <code><owner>/<repo></code> name to open it, for example <code>microsoft/vscode</code>.</p> <p><img src="/assets/docs/editor/vscode-web/chrome-omnibox-extension.png" alt="Type in your browser and search a GitHub repository to open in vscode.dev" loading="lazy"></p> <p>If you're already in VS Code for the Web at <a href="https://vscode.dev" class="external-link" target="_blank">https://vscode.dev</a>, you can alternatively navigate to different repos via the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.remote-repositories" class="external-link" target="_blank">Remote Repositories</a> extension commands. Select the remote indicator in the lower left of the Status bar, and you'll be presented with the <strong>Open Remote Repository...</strong> command.</p> <p><img src="/assets/docs/editor/vscode-web/remote-repositories.png" alt="GitHub Repositories" loading="lazy"></p> <h2 id="_azure-repos" data-needslink="_azure-repos">Azure Repos</h2> <p>You can open Azure Repos just like Github repos in VS Code for the Web.</p> <p>When you navigate to a URL with the schema <code>https://vscode.dev/azurerepos/<organization>/<project>/<repo></code>, you will be able to read, search the files in the repo, and commit your changes to Azure Repos. You can fetch, pull, and sync changes, and view branches.</p> <p>You can open any repository, branch, or tag from Azure Repos in VS Code for the Web by prefixing <code>vscode.dev</code> to the Azure Repos URL.</p> <p>Alternatively, when you are on an Azure DevOps repository or pull request, you can press (<span class="keybinding">.</span>) to open it in VS Code for the Web.</p> <h2 id="_more-custom-urls" data-needslink="_more-custom-urls">More custom URLs</h2> <p>Like in the desktop, you can customize VS Code for the Web through a rich ecosystem of extensions that support just about every back end, language, and service. <code>vscode.dev</code> includes URLs that provide shortcuts to common experiences.</p> <p>We've explored a couple of URLs already (<code>vscode.dev/github</code> and <code>vscode.dev/azurerepos</code>). Here's a more complete list:</p> <table class="table table-striped"> <thead> <tr> <th>Service</th> <th>URL Structure</th> <th>Docs</th> </tr> </thead> <tbody> <tr> <td>GitHub</td> <td><code>/github/<org>/<repo></code></td> <td><a href="#_github-repos">More info above</a></td> </tr> <tr> <td>Azure Repos</td> <td><code>/azurerepos/<org>/<project>/<repo></code></td> <td><a href="#_azure-repos">More info above</a></td> </tr> <tr> <td>Visual Studio Live Share</td> <td><code>/editor/liveshare/<sessionId></code></td> <td><a href="#_visual-studio-live-share">More info below</a></td> </tr> <tr> <td>Visual Studio Marketplace</td> <td><code>/editor/marketplace/<marketplacePublisher></code><br><code>/<extensionId>/<extensionVersion></code></td> <td><a href="https://insiders.vscode.dev/editor/marketplace/Brigit/devcontainer-image-convert/0.0.1" class="external-link" target="_blank">Example route</a> to edit <a href="https://marketplace.visualstudio.com/items?itemName=Brigit.devcontainer-image-convert" class="external-link" target="_blank">this extension</a></td> </tr> <tr> <td>Power Pages</td> <td><code>/power/pages</code></td> <td><a href="https://learn.microsoft.com/power-pages/configure/visual-studio-code-editor" class="external-link" target="_blank">Power Pages docs</a></td> </tr> <tr> <td>Profiles</td> <td><code>/editor/profile/github/<GUID></code></td> <td><a href="/docs/editor/profiles#_save-as-a-github-gist">Profiles docs</a></td> </tr> <tr> <td>Themes</td> <td><code>/editor/theme/<extensionId></code></td> <td><a href="#_themes">More info below</a></td> </tr> <tr> <td>MakeCode</td> <td><code>/edu/makecode</code></td> <td><a href="https://arcade.makecode.com/vscode" class="external-link" target="_blank">MakeCode docs</a></td> </tr> <tr> <td>VS Code for Education</td> <td><code>/edu</code></td> <td><a href="https://vscodeedu.com/" class="external-link" target="_blank">VS Code for Education landing page</a></td> </tr> <tr> <td>Azure Machine Learning (AML)</td> <td><code>/+ms-toolsai.vscode-ai-remote-web</code></td> <td><a href="https://learn.microsoft.com/azure/machine-learning/how-to-launch-vs-code-remote?view=azureml-api-2&tabs=vscode-web" class="external-link" target="_blank">AML docs</a></td> </tr> </tbody> </table> <p>Please note that some URLs must be entered in a specific way (for example, <code>vscode.dev/editor/liveshare</code> requires an active Live Share session). Please review each service's documentation for specific access and usage information.</p> <p>There's more information on some of these URLs below.</p> <h3 id="_themes" data-needslink="_themes">Themes</h3> <p>You can share and experience color themes through VS Code for the Web through the URL schema: <code>https://vscode.dev/editor/theme/<extensionId></code>.</p> <p>For instance, you can go to <a href="https://vscode.dev/editor/theme/sdras.night-owl" class="external-link" target="_blank">https://vscode.dev/editor/theme/sdras.night-owl</a> to experience the <a href="https://marketplace.visualstudio.com/items?itemName=sdras.night-owl" class="external-link" target="_blank">Night Owl theme</a> without having to go through the download and install process.</p> <blockquote><p>Note: The color theme URL schema works for themes that are fully declarative (no code).</p> </blockquote><p>An extension can define multiple themes. You can use the schema <code>/editor/theme/<extensionId>/<themeName></code>. If no <code>themeName</code> is specified, VS Code for the Web will take the first theme.</p> <p>As a theme author, you can add the following badge to your extension readme to allow users to easily try out your theme in VS Code for the Web (replacing <code><extensionId></code> with your theme extension's unique identifier):</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">[</span><span style="color: #D4D4D4">![</span><span style="color: #CE9178">Preview in vscode.dev</span><span style="color: #D4D4D4">](</span><span style="color: #D4D4D4; font-weight: bold">https://img.shields.io/badge/preview%20in-vscode.dev-blue</span><span style="color: #D4D4D4">)</span><span style="color: #BBBBBB">](</span><span style="color: #BBBBBB; font-weight: bold">https://vscode.dev/editor/theme/<extensionId></span><span style="color: #BBBBBB">)</span></span> <span class="line"></span></code></pre> <h3 id="_visual-studio-live-share" data-needslink="_visual-studio-live-share">Visual Studio Live Share</h3> <p><a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare" class="external-link" target="_blank">Live Share</a> guest sessions are available in the browser through the <code>https://vscode.dev/editor/liveshare</code> URL. The <code>sessionId</code> will be passed to the extension to make joining a seamless experience.</p> <h2 id="_continue-working-in-a-different-environment" data-needslink="_continue-working-in-a-different-environment">Continue working in a different environment</h2> <p>In some cases, you will want to access a different environment that has the ability to run code. You can switch to working on a repository in a development environment that has support for a local file system and full language and development tooling.</p> <p>The GitHub Repositories extension makes it easy for you to clone the repository locally, reopen it on the desktop, or create a GitHub codespace for the current repository (if you have the <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces" class="external-link" target="_blank">GitHub Codespaces</a> extension installed and access to create GitHub codespaces). To do this, use the <strong>Continue Working On...</strong> command available from the Command Palette (<span class="keybinding">F1</span>) or click on the Remote indicator in the Status bar.</p> <h2 id="_saving-and-sharing-work" data-needslink="_saving-and-sharing-work">Saving and sharing work</h2> <p>When working on a local file in the web, your work is saved automatically if you have <a href="/docs/editor/codebasics#_save--auto-save">Auto Save</a> enabled. You can also save manually as you do when working in desktop VS Code (for example <strong>File</strong> > <strong>Save</strong>).</p> <p>When working on a remote repository, your work is saved in the browser's local storage until you commit it. If you open a repo or pull request using GitHub Repositories, you can push your changes in the Source Control view to persist any new work.</p> <p>You can also continue working in other environments via <a href="#_continue-working-in-a-different-environment">Continue Working On</a>.</p> <p>The first time that you use <strong>Continue Working On</strong> with uncommitted changes, you will have the option to bring your edits to your selected development environment using <strong>Cloud Changes</strong>, which uses a VS Code service to store your pending changes. This is described further in the <a href="/docs/sourcecontrol/github#_continue-working-on">GitHub Repositories</a> doc.</p> <h2 id="_use-your-own-compute-instance-with-remote-tunnels" data-needslink="_use-your-own-compute-instance-with-remote-tunnels">Use your own compute instance with Remote Tunnels</h2> <p>You may develop against another machine in VS Code for the Web using the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.remote-server" class="external-link" target="_blank">Remote - Tunnels</a> extension.</p> <p>The Remote - Tunnels extension lets you connect to a remote machine, like a desktop PC or virtual machine (VM), via a secure tunnel. You can then securely connect to that machine from anywhere, without the requirement of SSH. This lets you "bring your own compute" to vscode.dev, enabling additional scenarios like running your code in the browser.</p> <p>You may learn more about Remote - Tunnels in its <a href="/docs/remote/tunnels">documentation</a>.</p> <h2 id="_safe-exploration" data-needslink="_safe-exploration">Safe exploration</h2> <p>VS Code for the Web runs entirely in your web browser's sandbox and offers a very limited execution environment.</p> <p>When accessing code from remote repositories, the web editor doesn't "clone" the repo, but instead loads the code by invoking the services' APIs directly from your browser; this further reduces the attack surface when cloning untrusted repositories.</p> <p>When working with local files, VS Code for the Web loads them through your browser's file system access APIs, which limit the scope of what the browser can access.</p> <h2 id="_run-anywhere" data-needslink="_run-anywhere">Run anywhere</h2> <p>Similar to <a href="/docs/remote/codespaces">GitHub Codespaces</a>, VS Code for the Web can run on tablets, like iPads.</p> <h2 id="_language-support" data-needslink="_language-support">Language support</h2> <p>Language support is a bit more nuanced on the web, including code editing, navigation, and browsing. The desktop experiences are typically powered by language services and compilers that expect a file system, runtime, and compute environment. In the browser, these experiences are powered by language services running in the browser that provide source code tokenization and syntax colorization, completions, and many single-file operations.</p> <p>Generally, experiences fall into the following categories:</p> <ul> <li><strong>Good:</strong> For most programming languages, VS Code for the Web gives you code syntax colorization, text-based completions, and bracket pair colorization. Using a <a href="https://tree-sitter.github.io/tree-sitter" class="external-link" target="_blank">Tree-sitter</a> syntax tree through the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.anycode" class="external-link" target="_blank">anycode extension</a>, we're able to provide additional experiences such as <strong>Outline/Go to Symbol</strong> and <strong>Symbol Search</strong> for popular languages such as C/C++, C#, Java, PHP, Rust, and Go.</li> <li><strong>Better:</strong> The TypeScript, JavaScript, and Python experiences are all powered by language services that run natively in the browser. With these programming languages, you'll get the "<strong>Good</strong>" experience plus rich single file completions, semantic highlighting, syntax errors, and more.</li> <li><strong>Best:</strong> For many "webby" languages, such as JSON, HTML, CSS, and LESS, etc., the coding experience in vscode.dev is nearly identical to the desktop (including Markdown preview!).</li> </ul> <p>You can determine the level of language support in your current file through the Language Status Indicator in the Status bar:</p> <p><img src="/assets/docs/editor/vscode-web/status-indicator.png" alt="Language status indicator" loading="lazy"></p> <h2 id="_limitations" data-needslink="_limitations">Limitations</h2> <p>Since VS Code for the Web runs completely within the browser, some experiences will naturally be more constrained when compared to what you can do in the desktop app. For example, the terminal and debugger are not available, which makes sense since you can't compile, run, and debug a Rust or Go application within the browser sandbox.</p> <h3 id="_extensions" data-needslink="_extensions">Extensions</h3> <p>Only a subset of extensions can run in the browser. You can use the Extensions view to install extensions in the web, and extensions that cannot be installed will have a warning icon and <strong>Learn Why</strong> link. We expect more extensions to become enabled over time.</p> <p><img src="/assets/docs/editor/vscode-web/extension-limit.png" alt="Limited extension support" loading="lazy"></p> <p>When you install an extension, it is saved in the browser's local storage. You can ensure your extensions are synced across VS Code instances, including different browsers and even the desktop, by enabling <a href="/docs/editor/settings-sync">Settings Sync</a>.</p> <p>When an Extension Pack contains extensions that do not run in the browser sandbox, you will get an informational message with the option to see the extensions included in the pack.</p> <p><img src="/assets/docs/editor/vscode-web/python-extension-limit.png" alt="Python extension pack limit" loading="lazy"></p> <p>When extensions are executed in the browser sandbox, they are more restricted. Extensions that are purely declarative, such as most themes, snippets, or grammars, can run unmodified and are available in VS Code for the Web without any modification from the extension authors. Extensions that are running code need to be updated to support running in the browser sandbox. You can read more about what is involved to support extensions in the browser in the <a href="/api/extension-guides/web-extensions">web extension authors guide</a>.</p> <p>There are also extensions that run in the browser with partial support only. A good example is a language extension that <a href="/docs/nodejs/working-with-javascript#_partial-intellisense-mode">restricts its support</a> to single files or the currently opened files.</p> <h3 id="_file-system-api" data-needslink="_file-system-api">File system API</h3> <p>Edge and Chrome today support the <a href="https://developer.mozilla.org/docs/Web/API/File_System_Access_API" class="external-link" target="_blank">File System API</a>, allowing web pages to access the local file system. If your browser does not support the File System API, you cannot open a folder locally, but you can open files instead.</p> <h3 id="_browser-support" data-needslink="_browser-support">Browser support</h3> <p>You can use VS Code for the Web in the latest versions of Chrome, Edge, Firefox, and Safari. Older versions of each browser may not work - we only guarantee support for the latest version.</p> <blockquote><p><strong>Tip:</strong> One way to check the compatible browser version is to look at the version of <a href="https://playwright.dev/" class="external-link" target="_blank">Playright</a> currently used for testing VS Code and review its supported browser versions. You can find the currently used Playwright version in the VS Code repo's <a href="https://github.com/microsoft/vscode/blob/main/package.json" class="external-link" target="_blank">package.json</a> file at <code>devDependencies/@playwright/test</code>. Once you know the Playwright version, for example <code>1.37</code>, you can then review the <strong>Browser Versions</strong> section in their <a href="https://playwright.dev/docs/release-notes" class="external-link" target="_blank">Release notes</a>.</p> </blockquote><p>Webviews might appear differently or have some unexpected behavior in Firefox and Safari. You can view issue queries in the VS Code GitHub repo to track issues related to specific browsers, such as with the <a href="https://github.com/microsoft/vscode/labels/safari" class="external-link" target="_blank">Safari label</a> and <a href="https://github.com/microsoft/vscode/labels/firefox" class="external-link" target="_blank">Firefox label</a>.</p> <p>There are additional steps you can take to improve your browser experience using VS Code for the Web. Review the <a href="#_additional-browser-setup">Additional browser setup</a> section for more information.</p> <h3 id="_mobile-support" data-needslink="_mobile-support">Mobile support</h3> <p>You can use VS Code for the Web on mobile devices, but smaller screens may have certain limitations.</p> <h3 id="_keyboard-shortcuts" data-needslink="_keyboard-shortcuts">Keyboard shortcuts</h3> <p>Certain keyboard shortcuts may also work differently in the web.</p> <table class="table table-striped"> <thead> <tr> <th>Issue</th> <th>Reason</th> </tr> </thead> <tbody> <tr> <td><span class="dynamic-keybinding" data-commandId="workbench.action.showCommands" data-osx="鈬р寴P" data-win="Ctrl+Shift+P" data-linux="Ctrl+Shift+P"><span class="keybinding">鈬р寴P</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+P</span>)</span> won't launch the Command Palette in Firefox.</td> <td><span class="dynamic-keybinding" data-commandId="workbench.action.showCommands" data-osx="鈬р寴P" data-win="Ctrl+Shift+P" data-linux="Ctrl+Shift+P"><span class="keybinding">鈬р寴P</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+P</span>)</span> is reserved in Firefox. <br> As a workaround, use <span class="keybinding">F1</span> to launch the Command Palette.</td> </tr> <tr> <td><span class="dynamic-keybinding" data-commandId="workbench.action.files.newUntitledFile" data-osx="鈱楴" data-win="Ctrl+N" data-linux="Ctrl+N"><span class="keybinding">鈱楴</span> (Windows, Linux <span class="keybinding">Ctrl+N</span>)</span> for new file doesn't work in web.</td> <td><span class="dynamic-keybinding" data-commandId="workbench.action.files.newUntitledFile" data-osx="鈱楴" data-win="Ctrl+N" data-linux="Ctrl+N"><span class="keybinding">鈱楴</span> (Windows, Linux <span class="keybinding">Ctrl+N</span>)</span> opens a new window instead. <br> As a workaround, you can use <span class="keybinding">Ctrl+Alt+N</span> (<span class="keybinding">Cmd+Alt+N</span> on macOS).</td> </tr> <tr> <td><span class="dynamic-keybinding" data-commandId="workbench.action.closeActiveEditor" data-osx="鈱榃" data-win="Ctrl+F4" data-linux="Ctrl+W"><span class="keybinding">鈱榃</span> (Windows <span class="keybinding">Ctrl+F4</span>, Linux <span class="keybinding">Ctrl+W</span>)</span> for closing an editor doesn't work in web.</td> <td><span class="dynamic-keybinding" data-commandId="workbench.action.closeActiveEditor" data-osx="鈱榃" data-win="Ctrl+F4" data-linux="Ctrl+W"><span class="keybinding">鈱榃</span> (Windows <span class="keybinding">Ctrl+F4</span>, Linux <span class="keybinding">Ctrl+W</span>)</span> closes the current tab in browsers. <br> As a workaround, you can use <span class="keybinding">Ctrl+Shift+Alt+N</span> (<span class="keybinding">Cmd+Shift+Alt+N</span> on macOS).</td> </tr> <tr> <td><span class="dynamic-keybinding" data-commandId="workbench.action.tasks.build" data-osx="鈬р寴B" data-win="Ctrl+Shift+B" data-linux="Ctrl+Shift+B"><span class="keybinding">鈬р寴B</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+B</span>)</span> will not toggle the favorites bar in the browser.</td> <td>VS Code for the Web overrides this and redirects to the "Build" menu in the Command Palette.</td> </tr> <tr> <td><span class="keybinding">Alt+Left</span> and <span class="keybinding">Alt+Right</span> should navigate within the editor but may incorrectly trigger tab history navigation.</td> <td>If focus is outside the editor, these shortcuts trigger tab history navigation instead.</td> </tr> </tbody> </table> <h2 id="_additional-browser-setup" data-needslink="_additional-browser-setup">Additional browser setup</h2> <p>There are additional browser configuration steps you can take when working with VS Code in a browser.</p> <h3 id="_opening-new-tabs-and-windows" data-needslink="_opening-new-tabs-and-windows">Opening new tabs and windows</h3> <p>In certain cases, you may need to open a new tab or window while working in VS Code for the Web. VS Code might ask you for permission to access the clipboard when reading from it. Depending on your browser, you may grant access to the clipboard or otherwise allow for pop-up windows in different ways:</p> <ul> <li>Chrome, Edge, Firefox: Search for "site permissions" in your browser's settings, or look for the following option in the address bar on the right:</li> </ul> <p><img src="/assets/docs/editor/vscode-web/allow-clipboard-access.png" alt="Allow clipboard access in the browser" loading="lazy"></p> <ul> <li>Safari: In the Safari browser, go to <strong>Preferences...</strong> > <strong>Websites</strong> > <strong>Pop-up Windows</strong> > the domain you're accessing (for example, <code>vscode.dev</code>), and select <strong>Allow</strong> from the dropdown.</li> </ul> <div class="feedback"></div> <div class="body-footer">02/06/2025</div> </main>  <div class="col-sm-3 col-md-2 hidden-xs docs-subnavbar-container"> <nav id="docs-subnavbar" aria-label="On Page" data-spy="affix" data-offset-top="20"> <h4><span class="sr-only">In this article there are 13 sections</span><span aria-hidden="true">In this article</span></h4> <ul class="nav"> <li><a href="#_relationship-to-vs-code-desktop">Relationship to VS Code Desktop</a></li> <li><a href="#_opening-a-project">Opening a project</a></li> <li><a href="#_github-repos">GitHub repos</a></li> <li><a href="#_azure-repos">Azure Repos</a></li> <li><a href="#_more-custom-urls">More custom URLs</a></li> <li><a href="#_continue-working-in-a-different-environment">Continue working in a different environment</a></li> <li><a href="#_saving-and-sharing-work">Saving and sharing work</a></li> <li><a href="#_use-your-own-compute-instance-with-remote-tunnels">Use your own compute instance with Remote Tunnels</a></li> <li><a href="#_safe-exploration">Safe exploration</a></li> <li><a href="#_run-anywhere">Run anywhere</a></li> <li><a href="#_language-support">Language support</a></li> <li><a href="#_limitations">Limitations</a></li> <li><a href="#_additional-browser-setup">Additional browser setup</a></li> </ul> <div class="connect-widget"></div> </nav> </div>  <div class="col-xs-12 visible-xs"> <div class="connect-widget"></div> </div> </div> </div> </div> </div> <footer role="contentinfo" class="container"> <div class="footer-container"> <div class="footer-row"> <div class="footer-social"> <ul class="links"> <li> <a href="https://go.microsoft.com/fwlink/?LinkID=533687"><img src="/assets/icons/x-icon.svg" class="x-icon" alt="Follow us on X"></a> </li> <li> <a href="https://github.com/microsoft/vscode"><img src="/assets/icons/github-icon.svg" alt="VS Code on Github"></a> </li> <li> <a href="https://www.youtube.com/@code"><img src="/assets/icons/youtube-icon.svg" alt="VS Code on YouTube"></a> </li> <script> function manageConsent() { if (siteConsent && siteConsent.isConsentRequired) { siteConsent.manageConsent(); } } </script> </ul> <a id="footer-microsoft-link" class="microsoft-logo" href="https://www.microsoft.com"> <img src="/assets/icons/microsoft.svg" alt="Microsoft homepage" /> </a> </div> </div> <div class="footer-row"> <ul class="links"> <li><a id="footer-support-link" href="https://support.serviceshub.microsoft.com/supportforbusiness/create?sapId=d66407ed-3967-b000-4cfb-2c318cad363d" target="_blank" rel="noopener">Support</a></li> <li><a id="footer-privacy-link" href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener">Privacy</a></li> <li style="display: none;"><a id="footer-cookie-link" style="cursor: pointer;" onclick="manageConsent()" target="_blank" rel="noopener">Manage Cookies</a></li> <li><a id="footer-terms-link" href="https://www.microsoft.com/legal/terms-of-use" target="_blank" rel="noopener">Terms of Use</a></li> <li><a id="footer-license-link" href="/License" target="_blank" rel="noopener">License</a></li> </ul> </div> </div> </footer> <script type="module"> document.addEventListener('DOMContentLoaded', () => { const copilotDeepLinks = document.querySelectorAll('.copilot-deep-link'); if (copilotDeepLinks.length === 0) { return; } if (window.innerWidth < 992) { for (const link of copilotDeepLinks) { link.href = 'https://aka.ms/vscode-activatecopilotfree'; } } }); </script> <script src="/dist/index.js"></script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Visual Studio Code", "softwareVersion": "1.97", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "applicationCategory": "DeveloperApplication", "applicationSubCategory": "Text Editor", "alternateName": "VS Code", "datePublished": "2021-11-03", "operatingSystem": "Mac, Linux, Windows", "logo": "https://code.visualstudio.com/assets/apple-touch-icon.png", "screenshot": "https://code.visualstudio.com/assets/home/home-screenshot-win.png", "releaseNotes": "https://code.visualstudio.com/updates", "downloadUrl": "https://code.visualstudio.com/download", "license": "https://code.visualstudio.com/license", "softwareRequirements": "https://code.visualstudio.com/docs/supporting/requirements", "url" : "https://code.visualstudio.com", "author": { "@type": "Organization", "name": "Microsoft" }, "publisher": { "@type": "Organization", "name": "Microsoft" }, "maintainer": { "@type": "Organization", "name": "Microsoft" }, "potentialAction": { "@type": "SearchAction", "target": "https://code.visualstudio.com/Search?q={search_term_string}", "query-input": "required name=search_term_string" }, "sameAs" : [ "https://en.wikipedia.org/wiki/Visual_Studio_Code", "https://twitter.com/code", "https://www.youtube.com/code", "https://www.tiktok.com/@vscode", "https://github.com/microsoft/vscode" ] } </script> </body> </html>

CINXE.COM

Visual Studio Code for the Web