Developing with GitHub Codespaces

<!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="Using GitHub Codespaces" /> <meta name="keywords" content="" /> <meta name="ms.prod" content="vs-code" /> <meta name="ms.TOCTitle" content="GitHub Codespaces" /> <meta name="ms.ContentId" content="8d30ed21-208f-4b4e-8510-5a4a33c42618" /> <meta name="ms.date" content="10/29/2024" /> <meta name="ms.topic" content="conceptual" />  <meta name="twitter:card" content="summary_large_image" /> <meta property="og:url" content="https://code.visualstudio.com/docs/remote/codespaces" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Developing with GitHub Codespaces" /> <meta property="og:description" content="Using GitHub Codespaces" /> <meta property="og:image" content="https://code.visualstudio.com/opengraphimg/opengraph-docs.png" /> <link rel="shortcut icon" href="/favicon.ico" sizes="128x128" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <title>Developing with GitHub Codespaces</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"><a href="/updates" id="banner-link-updates">Version 1.95</a> is now available! Read about the new features and fixes from October.</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">Get Started</a> <ul id="getstarted-articles" class="collapse "> <li > <a href="/docs/getstarted/getting-started" >Tutorial</a> </li> <li > <a href="/docs/getstarted/introvideos" >Intro Videos</a> </li> <li > <a href="/docs/getstarted/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/getstarted/userinterface" >User Interface</a> </li> <li > <a href="/docs/getstarted/themes" >Themes</a> </li> <li > <a href="/docs/getstarted/settings" >Settings</a> </li> <li > <a href="/docs/getstarted/keybindings" >Key Bindings</a> </li> <li > <a href="/docs/getstarted/locales" >Display Language</a> </li> <li > <a href="/docs/getstarted/telemetry" >Telemetry</a> </li> <li > <a href="/docs/getstarted/educators-and-students" >Educators & Students</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#editor-articles" data-parent="#main-nav" data-toggle="collapse">User Guide</a> <ul id="editor-articles" class="collapse "> <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/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/testing" >Testing</a> </li> <li > <a href="/docs/editor/vscode-web" >VS Code for the Web</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 > <a href="/docs/editor/workspaces" >Workspaces</a> </li> <li > <a href="/docs/editor/workspace-trust" >Workspace Trust</a> </li> <li > <a href="/docs/editor/multi-root-workspaces" >Multi-root Workspaces</a> </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> </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/copilot-vscode-features" >Copilot Cheat Sheet</a> </li> <li > <a href="/docs/copilot/setup" >Setup</a> </li> <li > <a href="/docs/copilot/getting-started" >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/prompt-crafting" >Best Practices</a> </li> <li > <a href="/docs/copilot/workspace-context" >Workspace Context</a> </li> <li > <a href="/docs/copilot/copilot-customization" >Customizing Copilot</a> </li> <li > <a href="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</a> </li> <li > <a href="/docs/copilot/copilot-settings" >Settings Reference</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 Code</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/cpp-refactoring" >Refactoring</a> </li> <li > <a href="/docs/cpp/launch-json-reference" >Configure debugging</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="#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 active expanded"> <a class="area" role="button" href="#remote-articles" data-parent="#main-nav" data-toggle="collapse">Remote</a> <ul id="remote-articles" class="collapse in"> <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 class="active"> <a href="/docs/remote/codespaces" aria-label="Current Page: GitHub 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 a 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> </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="Get Started"> <option value="/docs/getstarted/getting-started" >Tutorial</option> <option value="/docs/getstarted/introvideos" >Intro Videos</option> <option value="/docs/getstarted/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/getstarted/userinterface" >User Interface</option> <option value="/docs/getstarted/themes" >Themes</option> <option value="/docs/getstarted/settings" >Settings</option> <option value="/docs/getstarted/keybindings" >Key Bindings</option> <option value="/docs/getstarted/locales" >Display Language</option> <option value="/docs/getstarted/telemetry" >Telemetry</option> <option value="/docs/getstarted/educators-and-students" >Educators & Students</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/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/testing" >Testing</option> <option value="/docs/editor/vscode-web" >VS Code for the Web</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> <option value="/docs/editor/workspaces" >Workspaces</option> <option value="/docs/editor/workspace-trust" >Workspace Trust</option> <option value="/docs/editor/multi-root-workspaces" >Multi-root Workspaces</option> <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> </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/copilot-vscode-features" >Copilot Cheat Sheet</option> <option value="/docs/copilot/setup" >Setup</option> <option value="/docs/copilot/getting-started" >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/prompt-crafting" >Best Practices</option> <option value="/docs/copilot/workspace-context" >Workspace Context</option> <option value="/docs/copilot/copilot-customization" >Customizing Copilot</option> <option value="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</option> <option value="/docs/copilot/copilot-settings" >Settings Reference</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 Code</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/cpp-refactoring" >Refactoring</option> <option value="/docs/cpp/launch-json-reference" >Configure debugging</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="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" selected>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 a 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> </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="#_environments">Environments</option> <option value="#_customization">Customization</option> <option value="#_dotfile-per-user-configuration">Dotfile per user configuration</option> <option value="#_getting-started">Getting started</option> <option value="#_extension-authors">Extension authors</option> <option value="#_browserbased-editor">Browser-based editor</option> <option value="#_known-limitations-and-adaptations">Known limitations and adaptations</option> <option value="#_common-questions">Common questions</option> <option value="#_questions-or-feedback">Questions or feedback</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/remote/codespaces.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>GitHub Codespaces</h1> <p><a href="https://github.com/features/codespaces" class="external-link" target="_blank">GitHub Codespaces</a> provides cloud-powered development environments for any activity - whether it's a long-term project, or a short-term task like reviewing a pull request. You can work with these environments from Visual Studio Code or in a browser-based editor.</p> <p><img src="/assets/docs/remote/codespaces/github-codespaces-extension.png" alt="GitHub Codespaces extension" loading="lazy"></p> <h2 id="_environments" data-needslink="_environments">Environments</h2> <p>An environment is the "backend" half of GitHub Codespaces. It's where all of the compute associated with software development happens: compiling, debugging, restoring, etc. When you need to work on a new project, pick up a new task, or review a PR, you can simply spin up a Cloud-hosted environment, and GitHub Codespaces takes care of configuring it correctly. It automatically configures everything you need to work on your project: the source code, runtime, compiler, debugger, editor, custom dotfile configurations, relevant editor extensions and more.</p> <h2 id="_customization" data-needslink="_customization">Customization</h2> <p>GitHub Codespaces are fully customizable on a per project basis. This is accomplished by including a <code>devcontainer.json</code> file in the project's repository, similar to VS Code <a href="/docs/devcontainers/containers">Dev Containers</a> development.</p> <p>Example customizations include:</p> <ul> <li>Setting the Linux-based operating system to use.</li> <li>Automatically installing various tools, runtimes, and frameworks.</li> <li>Forwarding commonly used ports.</li> <li>Setting environment variables.</li> <li>Configuring editor settings and installing preferred extensions.</li> </ul> <p>See the <a href="https://docs.github.com/github/developing-online-with-codespaces/configuring-codespaces-for-your-project" class="external-link" target="_blank">Configuring Codespaces</a> documentation for codespace-specific <code>devcontainer.json</code> settings.</p> <h2 id="_dotfile-per-user-configuration" data-needslink="_dotfile-per-user-configuration">Dotfile per user configuration</h2> <p>Dotfiles are files whose filename begins with a dot (.). They typically contain configuration information for applications and can control how terminals, editors, source control, and various other tools behave. <code>.bashrc</code>, <code>.gitignore</code>, and <code>.editorconfig</code> are examples of dotfiles commonly used by developers.</p> <p>You can specify a GitHub repo containing your dotfiles, a target location for the files, as well as install commands when creating a codespace.</p> <p>See the <a href="https://docs.github.com/github/developing-online-with-codespaces/personalizing-codespaces-for-your-account" class="external-link" target="_blank">Personalizing Codespaces</a> documentation to learn how to add your dotfile configurations to a codespace.</p> <h2 id="_getting-started" data-needslink="_getting-started">Getting started</h2> <p>There are getting started topics for both GitHub Codespaces clients. These will fast-track you through signing in to GitHub Codespaces, creating your first codespace, and connecting to it with your preferred client:</p> <ul> <li><a href="https://docs.github.com/github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code" class="external-link" target="_blank">Codespaces in VS Code</a> - Use the <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces" class="external-link" target="_blank">GitHub Codespaces</a> extension to connect and work in your environment.</li> <li><a href="https://docs.github.com/github/developing-online-with-codespaces/creating-a-codespace" class="external-link" target="_blank">Codespaces in the browser</a> - Connect to your codespace through a browser-based editor.</li> </ul> <h2 id="_extension-authors" data-needslink="_extension-authors">Extension authors</h2> <p>The VS Code extension API hides most of the implementation details of running remotely so many extensions will just work in GitHub Codespaces environments without any modification. However, we recommend that you test your extension in a codespace to be sure that all of its functionality works as expected. See the article on <a href="/api/advanced-topics/remote-extensions">Supporting Remote Development and GitHub Codespaces</a> for details.</p> <h2 id="_browserbased-editor" data-needslink="_browserbased-editor">Browser-based editor</h2> <p>You also have a free, lightweight Visual Studio Code experience entirely in the browser. The web-based editor lets you browse source code repositories from GitHub safely and quickly and make lightweight code changes. You can open any repository, fork, or pull request in the editor, which has many of the features of VS Code, including search and syntax highlighting. If you want to run or debug your code, you can switch to the cloud-hosted environment or the VS Code desktop.</p> <p>To access this browser-based editor, you can go to your repo on github.com and press <span class="keybinding">.</span> (period key) or change the URL of your repository to <code>github.dev/org/repo</code>, replacing <code>github.com</code> with <code>github.dev</code>.</p> <p>Limitation: You may not be able to use the web-based editor if you are running your browser with Incognito mode or have ad blockers enabled.</p> <blockquote><p><strong>Note</strong>: This editor is currently in Technical Preview. You can try it out today and provide feedback at <a href="https://github.co/browser-editor-feedback" class="external-link" target="_blank">https://github.co/browser-editor-feedback</a>.</p> </blockquote><h2 id="_known-limitations-and-adaptations" data-needslink="_known-limitations-and-adaptations">Known limitations and adaptations</h2> <p>While working with Codespaces and specifically VS Code in the web, there are certain limitations to keep in mind. Some of these limitations have workarounds or adaptations in place to provide a consistent development experience.</p> <p>For several issues (especially keybindings or those listed with a workaround for the desktop), you can install and use a Codespace as a <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps-chromium" class="external-link" target="_blank">progressive web application</a> (PWA).</p> <p><img src="/assets/docs/remote/codespaces/PWA-edge-install.png" alt="Installing Codespaces as PWA in Microsoft Edge" loading="lazy"></p> <table class="table table-striped"> <thead> <tr> <th>Issue</th> <th>Reason</th> <th>Workaround</th> </tr> </thead> <tbody> <tr> <td><span class="keybinding">Ctrl+Shift+P</span> won't launch the Command Palette in Firefox.</td> <td><span class="keybinding">Ctrl+Shift+P</span> is reserved in Firefox.</td> <td>Use <span class="keybinding">F1</span> to launch the Command Palette.</td> </tr> <tr> <td>Certain default keybindings (for debugging) are different in the web.</td> <td>Since the browser may already have an action registered for those keybindings, we adjust the default for VS Code in the web.</td> <td>Use the adjusted defaults. They appear on tooltip hovers over the debug actions. <ul><li> Step over is <span class="keybinding">Alt+F10</span> (instead of <span class="keybinding">F10</span>) on all browsers.</li><li> Step into in the web is <span class="keybinding">Alt+F11</span> (instead of <span class="keybinding">F11</span>) on Windows browsers.</li></ul></td> </tr> <tr> <td><span class="keybinding">F11</span> for debugging does not work on macOS in web or desktop.</td> <td>This is a known, non-browser specific limitation. More information can be found in <a href="https://github.com/microsoft/vscode/issues/5102" class="external-link" target="_blank">issue #5102</a>.</td> <td>Disable <span class="keybinding">F11</span> to show desktop on macOS.<ul><li> Go to: <strong>System Preferences</strong> > <strong>Keyboard</strong> > <strong>Shortcuts</strong> </li><li> Uncheck the <strong>Show Desktop F11</strong> option </li></ul></td> </tr> <tr> <td><span class="keybinding">Ctrl+N</span> for new file doesn't work in web.</td> <td><span class="keybinding">Ctrl+N</span> opens a new window instead.</td> <td><span class="keybinding">Ctrl+N</span> for new file works in the desktop.</td> </tr> <tr> <td><span class="keybinding">Ctrl+W</span> for closing an editor doesn't work in web.</td> <td><span class="keybinding">Ctrl+W</span> closes the current tab in browsers.</td> <td><span class="keybinding">Ctrl+W</span> works in the desktop.</td> </tr> <tr> <td><span class="keybinding">Ctrl+Shift+B</span> will not toggle the favorites bar in the browser.</td> <td>Codespaces overrides this and redirects to the "Build" menu in the Command Palette.</td> <td>No current workarounds.</td> </tr> <tr> <td>Dragging and dropping files from VS Code to a Codespace (and vice versa) does not work.</td> <td>You can see more context in <a href="https://github.com/microsoft/vscode/issues/115535" class="external-link" target="_blank">issue #115535</a>.</td> <td>There are a couple of options: <ul><li> You can right-click the file in your Codespace to download it to your local machine. </li><li> You can drag files to your Codespace from the File Explorer. </li></ul></td> </tr> <tr> <td>Angular app debugging isn't supported in the web.</td> <td>Code running in a browser cannot launch another browser instance in debug mode for security reasons.</td> <td>You have a few options: <ul><li>Debug Node.js/service-side js normally.</li><li>Open the Codespace in desktop, in which case the <a href="https://github.com/microsoft/vscode-js-debug-companion" class="external-link" target="_blank">companion</a> will be used to launch your local Edge or Chrome install.</li><ul></td> </tr> <tr> <td>Downloading a file with no extension from the browser automatically adds ".txt"</td> <td>This is how Chrome and Edge behave.</td> <td>Context and potential future solutions in <a href="https://github.com/microsoft/vscode/issues/118436" class="external-link" target="_blank">issue #118436</a>.</td> </tr> <tr> <td>When you download a file from a remote (including Codespaces), attributes such as the executable bit are removed.</td> <td>Context and potential future solutions can be found in <a href="https://github.com/microsoft/vscode/issues/112099" class="external-link" target="_blank">issue #112099</a>.</td> <td>No current workarounds.</td> </tr> <tr> <td>You may see the prompt, "<code>Your_codespace_name</code> can't open this folder because it contains system files" when trying to download certain folders from a Codespace.</td> <td>A user agent is free to impose the level of restrictions on sensitive directories. More information in <a href="https://wicg.github.io/file-system-access/#privacy-wide-access" class="external-link" target="_blank">this spec</a> and <a href="https://source.chromium.org/chromium/chromium/src/+/master:chrome/browser/file_system_access/chrome_file_system_access_permission_context.cc;l=140-208" class="external-link" target="_blank">Chromium's blocklist</a>.</td> <td>No additional workarounds beyond the spec and blocklist.</td> </tr> <tr> <td>Manually visiting <code>http://localhost:forwarded_port</code> won't work to access a forwarded port from a Codespace in the web.</td> <td>This is based on how Codespaces handles port forwarding and generates the correct URL for the web.</td> <td>Click the link from the port forwarding notification to open your app, or the globe icon in the <a href="/docs/devcontainers/containers#_forwarding-or-publishing-a-port">Ports view</a>, both of which will provide the properly generated link. More information in the <a href="https://docs.github.com/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace" class="external-link" target="_blank">Codespaces docs</a>.</td> </tr> </tbody> </table> <h3 id="_some-extensions-behave-differently-in-the-web" data-needslink="_some-extensions-behave-differently-in-the-web">Some extensions behave differently in the web</h3> <table class="table table-striped"> <thead> <tr> <th>Extension</th> <th>Issue / Reason</th> <th>Workaround</th> </tr> </thead> <tbody> <tr> <td>Extensions with keyboard shortcuts that overlap with browser shortcuts, for example <a href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph" class="external-link" target="_blank">Git Graph</a>, which uses <span class="keybinding">Ctrl+R</span> to refresh.</td> <td>The keyboard shortcut may overlap with an existing browser shortcut, for example <span class="keybinding">Ctrl+R</span> refreshes the window in Safari.</td> <td>You can use a desktop-based, rather than web-based, Codespace to fully leverage your keyboard shortcuts. Different browsers may also behave differently (you can refresh Git Graph in Chrome).</td> </tr> <tr> <td>Language packs, for example the <a href="https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja" class="external-link" target="_blank">Japanese Language Pack for Visual Studio Code</a></td> <td>Language pack extensions are currently not supported in web-based Codespaces.</td> <td>You can use a desktop-based Codespace to use language packs and configure the display language.</td> </tr> <tr> <td><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" class="external-link" target="_blank">Bracket Pair Colorizer 2</a></td> <td>It will not work in the browser as it introduces an install location dependency that is not easily fixable.</td> <td>Use <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" class="external-link" target="_blank">Bracket Pair Colorizer</a>.</td> </tr> <tr> <td>Browser Debuggers, such as <a href="https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug" class="external-link" target="_blank">Debugger for Firefox</a>.</td> <td>Extensions that require a UI/Desktop extension host do not load in the browser.</td> <td>You can use these extensions in local VS Code (not connected to Codespaces). Or, while your app is running from a Codespace, you can use an alternative, like Chrome DevTools to inspect elements and set breakpoints.</td> </tr> <tr> <td>Extensions to open a browser, for example <a href="https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser" class="external-link" target="_blank">open in browser</a>.</td> <td>Extensions that require a UI/Desktop extension host do not load in the browser.</td> <td>Use a substitute extension if possible, like <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" class="external-link" target="_blank">Live Server</a>.</td> </tr> <tr> <td><a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager" class="external-link" target="_blank">Project Manager</a></td> <td>Project Manager relies on syncing a custom <code>projects.json</code> file, which <a href="https://github.com/microsoft/vscode/issues/113774" class="external-link" target="_blank">isn't currently supported</a>.</td> <td>You can use the extension in desktop Codespaces or local VS Code to save and manage your projects, as these options won't require syncing a custom file.</td> </tr> <tr> <td>Extensions that rely on Chrome, such as <a href="https://marketplace.visualstudio.com/items?itemName=luciannaie.protractor-test-runner#:~:text=Protractor%20Test%20Runner%20is%20a,that%20has%20protractor%20test%20files." class="external-link" target="_blank">Protractor Test Runner</a> and <a href="https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview" class="external-link" target="_blank">Browser Preview</a>.</td> <td>Chrome is not included in a Codespace.</td> <td>Try to find alternative experiences, or you can use these extensions on your project in local VS Code (not connected to Codespaces).</td> </tr> <tr> <td><a href="https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter" class="external-link" target="_blank">Flutter</a> (and Flutter development overall)</td> <td>Several aspects of the Flutter workflow are limited due to the nature of Docker containers and Codespaces.<ul><li>Flutter recommends installation from snap, but snap cannot be installed within the Codespaces container.</li><li>Android Emulation does not work within a container.</li><li>Codespaces cannot detect USB devices plugged into your machine, which makes development on a physical device impossible.</li><li>Codespaces, like other Linux environments, doesn't support iOS development.</li></ul></td> <td>You can use local VS Code for Flutter development.</td> </tr> <tr> <td><a href="https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop" class="external-link" target="_blank">LaTeX Workshop</a></td> <td>The extension provides three kinds of features to help with LaTeX authoring: 1) a set of views that surface common commands, 2) a PDF previewer, and 3) language features like snippets and IntelliSense. The extension can be used fairly fully featured, but there are some web or security limitations.</td> <td>The following workarounds address limitations in the view and previewer feature areas: <ul><li>The views themselves work without issue, but a few of the commands try to launch native applications, like revealing the output folder in the OS file explorer. These do nothing in the web, so using the desktop is an alternative.</li><li><code>"latex-workshop.view.pdf.viewer"</code> - This setting provides a PDF previewer similar to the <a href="/docs/languages/markdown#_markdown-preview">Markdown preview</a>. You can preview in a browser tab, in a separate PDF viewer, or in a VS Code tab.<br>Only the browser tab is usable in web-based Codespaces. The separate PDF viewer fails silently, and the VS Code tab hits the <a href="/api/extension-guides/webview#_content-security-policy">Content Security Policy</a> issue. The VS Code Tab viewer has other features that aren't available due to this limitation.</li></ul></td> </tr> <tr> <td><a href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph" class="external-link" target="_blank">Git Graph</a></td> <td>Some Git Graph webview functionality may be limited in Codespaces. For instance, switching between a file from a commit and the Git Graph webview may blank out the webview.</td> <td>You can use Git Graph fully within VS Code desktop.</td> </tr> <tr> <td>Other <a href="/docs/remote/remote-overview">Remote Development extensions</a> (WSL, Dev Containers, Remote - SSH) cannot be installed in a Codespace.</td> <td>The Codespace is already a remote context.</td> <td>If you'd like to run in another remote context (for example WSL or a remote SSH computer), open VS Code desktop (not connected to a Codespace) and launch one of the other remote extensions. If you'd like to use a <a href="/docs/devcontainers/create-dev-container">custom dev container</a>, you can use the same <code>.devcontainer</code> in both Codespaces and Dev Containers.</td> </tr> <tr> <td><strong>My_Favorite_Extension</strong> doesn't work and isn't listed above.</td> <td>There are a few other issues that can prevent features from working as expected in remote contexts.</td> <td>In some cases, you can use another command to work around the issue, but in others, the extension may need to be modified. Check out the <a href="/docs/remote/troubleshooting#_extension-tips">remote extension tips</a> for common remote issues and tips on resolving them.</td> </tr> </tbody> </table> <h2 id="_common-questions" data-needslink="_common-questions">Common questions</h2> <h3 id="_why-is-an-extension-not-installable-in-the-browser" data-needslink="_why-is-an-extension-not-installable-in-the-browser">Why is an extension not installable in the browser</h3> <p>There are a small number of extensions that have built-in assumptions or need to run on the desktop. Examples are when an extension accesses files from the VS Code installation on the desktop or when an extension depends on an executable that must run in a desktop environment. When you try to install such an extension in the browser, you will be informed that the extension is not available.</p> <p><strong>Notice</strong> such an extension can still be used when connecting to a Codespace from VS Code running on the desktop.</p> <h3 id="_how-do-i-allow-vs-code-to-access-my-clipboard-for-reading" data-needslink="_how-do-i-allow-vs-code-to-access-my-clipboard-for-reading">How do I allow VS Code to access my clipboard for reading?</h3> <p>In certain cases, VS Code might ask you for permission to access the clipboard when reading from it. You should be able to grant access to the clipboard from your browser either through settings (search for "site permissions") or by looking for this option in the address bar on the right:</p> <p><img src="/assets/docs/remote/codespaces/allow-clipboard-access.png" alt="Allow clipboard access in browser" loading="lazy"></p> <p>Once you have granted VS Code access to the clipboard, you can retry the operation.</p> <h3 id="_how-do-i-allow-vs-code-to-always-open-new-tabs-and-windows" data-needslink="_how-do-i-allow-vs-code-to-always-open-new-tabs-and-windows">How do I allow VS Code to always open new tabs and windows?</h3> <p>Sometimes browsers will, as a security precaution, block VS Code from opening new tabs or windows. If this happens, VS Code will detect the blocking action and explicitly prompt the user. However, you can allow VS Code to always open new windows and tabs by opening the site settings via the context menu in the browser navigation bar and by allowing to <strong>Pop-up Windows</strong>.</p> <p><img src="/assets/docs/remote/codespaces/allow-new-tab.png" alt="Allow pop-up window in browser" loading="lazy"></p> <h3 id="_how-do-i-allow-vs-code-in-a-browser-to-access-local-files-and-folders" data-needslink="_how-do-i-allow-vs-code-in-a-browser-to-access-local-files-and-folders">How do I allow VS Code in a browser to access local files and folders?</h3> <p>Opening local files and folders in VS Code from a browser requires the browser to support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API" class="external-link" target="_blank">File System Access API</a>. As of today both <a href="https://www.microsoft.com/en-us/edge" class="external-link" target="_blank">Microsoft Edge</a> and Google Chrome offer this level of support. If you want to access local files and folders when using VS Code in a browser, please consider to switch to one of these two browsers.</p> <h2 id="_questions-or-feedback" data-needslink="_questions-or-feedback">Questions or feedback</h2> <p>If you have questions, you can consult the GitHub Codespaces <a href="https://docs.github.com/github/developing-online-with-codespaces/troubleshooting-your-codespace" class="external-link" target="_blank">Troubleshooting guide</a>. If you'd like to provide feedback, you can enter issues in the GitHub Codespaces <a href="https://github.com/community/community/discussions/categories/codespaces" class="external-link" target="_blank">Discussions</a>.</p> <div class="feedback"></div> <div class="body-footer">10/29/2024</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 9 sections</span><span aria-hidden="true">In this article</span></h4> <ul class="nav"> <li><a href="#_environments">Environments</a></li> <li><a href="#_customization">Customization</a></li> <li><a href="#_dotfile-per-user-configuration">Dotfile per user configuration</a></li> <li><a href="#_getting-started">Getting started</a></li> <li><a href="#_extension-authors">Extension authors</a></li> <li><a href="#_browserbased-editor">Browser-based editor</a></li> <li><a href="#_known-limitations-and-adaptations">Known limitations and adaptations</a></li> <li><a href="#_common-questions">Common questions</a></li> <li><a href="#_questions-or-feedback">Questions or feedback</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 src="/dist/index.js"></script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Visual Studio Code", "softwareVersion": "1.95", "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

Developing with GitHub Codespaces