Visual Studio Code tips and tricks

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="awa-expId" content="vscw_aaflight1016_treatment:103440;" /> <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 Tips and Tricks for power users." /> <meta name="keywords" content="" /> <meta name="ms.prod" content="vs-code" /> <meta name="ms.TOCTitle" content="" /> <meta name="ms.ContentId" content="9bbbe55d-cf81-428f-8a9f-4f60280cb874" /> <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/getstarted/tips-and-tricks" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Visual Studio Code tips and tricks" /> <meta property="og:description" content="Visual Studio Code Tips and Tricks for power users." /> <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 tips and tricks</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="/">Visual Studio Code</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand and Collapse Menu"> </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"/> <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> </div> </form> </li>  <li><a class="link-button" href="/Download" id="nav-download"> Download</a></li> </ul> </div> </div> </nav> </div> </div> <div class="updates-banner "> <div class="container"> 🚀 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! </div> <div tabindex="0" role="button" title="Dismiss this update" class="dismiss-btn" id="banner-dismiss-btn">Dismiss this update</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 active expanded"> <a class="area" role="button" href="#getstarted-articles" data-parent="#main-nav" data-toggle="collapse">Getting Started</a> <ul id="getstarted-articles" class="collapse in"> <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 class="active"> <a href="/docs/getstarted/tips-and-tricks" aria-label="Current Page: Tips and Tricks">Tips and Tricks</a> </li> <li > <a href="/docs/getstarted/introvideos" >Intro Videos</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/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 > <a href="/docs/editor/vscode-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" selected>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" >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="#_basics">Basics</option> <option value="#_command-line">Command line</option> <option value="#_status-bar">Status Bar</option> <option value="#_customization">Customization</option> <option value="#_extensions">Extensions</option> <option value="#_files-and-folders">Files and folders</option> <option value="#_editing-hacks">Editing hacks</option> <option value="#_intellisense">IntelliSense</option> <option value="#_snippets">Snippets</option> <option value="#_git-integration">Git integration</option> <option value="#_git-blame">Git blame</option> <option value="#_compare-file-with-the-clipboard">Compare file with the clipboard</option> <option value="#_debugging">Debugging</option> <option value="#_task-runner">Task runner</option> <option value="#_portable-mode">Portable mode</option> <option value="#_insiders-builds">Insiders builds</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/getstarted/tips-and-tricks.md" class="btn btn-default" title="Edit this document in vscode.dev"> Edit </a> </div> <h1>Visual Studio Code tips and tricks</h1> Use the tips and tricks in this article to jump right in and learn how to be productive with Visual Studio Code. Become familiar with the powerful editing, code intelligence, and source code control features and learn useful keyboard shortcuts. Make sure to explore the other in-depth topics in <a href="/docs/getstarted/userinterface">Getting Started</a> and the <a href="/docs/editor/codebasics">User Guide</a> to learn more. If you're just getting started, make sure to check out the <a href="/docs/getstarted/getting-started">VS Code tutorial</a> for a step-by-step to discover the key features. <blockquote>If you don't have Visual Studio Code installed, go to the <a href="/download">Download</a> page. You can find platform specific setup instructions at <a href="/docs/setup/linux">Running VS Code on Linux</a>, <a href="/docs/setup/mac">macOS</a>, and <a href="/docs/setup/windows">Windows</a>. </blockquote>Prefer a video? You can watch the VS Code Day talks <a href="https://learn.microsoft.com/en-us/events/visual-studio-code-vs-code-day-2021/vs-code-tips-and-tricks" class="external-link" target="_blank">Visual Studio Code tips and tricks</a> or <a href="https://learn.microsoft.com/en-us/shows/vs-code-day-2023/elevate-your-vs-code-experience" class="external-link" target="_blank">Elevate your VS Code experience</a>. <h2 id="_basics" data-needslink="_basics">Basics</h2> <h3 id="_getting-started" data-needslink="_getting-started">Getting started</h3> The best way of exploring VS Code hands-on is to open the Welcome page and then pick a Walkthrough for a self-guided tour through the setup steps, features, and deeper customizations that VS Code offers. As you discover and learn, the walkthroughs track your progress. Open the Welcome page from the Help > Welcome menu or use the Help: Welcome command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). <img src="/assets/docs/getstarted/tips-and-tricks/welcome-page.png" alt="Welcome page" loading="lazy"> Extensions can also contribute walkthroughs. You can also directly open a walkthrough by using the Help: Open Walkthrough... command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). <img src="/assets/docs/getstarted/tips-and-tricks/open-walkthrough.png" alt="Open walkthrough command in the Command Palette" loading="lazy"> If you are looking to improve your code editing skills, open the Interactive Editor Playground. Try out VS Code's <a href="/docs/editor/codebasics">code editing features</a>, like multi-cursor editing, <a href="/docs/editor/intellisense">IntelliSense</a>, Snippets, <a href="/docs/editor/emmet">Emmet</a>, and more. Open the Welcome page from the Help > Editor Playground menu or use the Help: Interactive Editor Playground command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). <img src="/assets/docs/getstarted/tips-and-tricks/interactive_playground.png" alt="Interactive editor playground" loading="lazy"> <h3 id="_command-palette" data-needslink="_command-palette">Command Palette</h3> Access all available commands based on your current context. Keyboard Shortcut: ⇧⌘P (Windows, Linux Ctrl+Shift+P) <img src="/assets/docs/getstarted/tips-and-tricks/OpenCommandPalette.gif" alt="Command Palette" loading="lazy"> <div class="markdown-alert tip" dir="auto"> <svg class="markdown-alert-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"> <path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"> </path> </svg> Tip You can move the Command Palette to another location by grabbing the top edge with the mouse cursor and dragging it somewhere else. You can also select the Customize Layout control in the title bar, and then select one of the preconfigured Quick Input Positions. </div><img src="/assets/docs/getstarted/tips-and-tricks/command-palette-position.png" alt="Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options." loading="lazy"> <h3 id="_default-keyboard-shortcuts" data-needslink="_default-keyboard-shortcuts">Default keyboard shortcuts</h3> Many of the commands in the Command Palette have default keyboard shortcuts associated with them. You can see the default keyboard shortcut alongside the command in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). <img src="/assets/docs/getstarted/tips-and-tricks/keyboard-references.png" alt="keyboard references" loading="lazy"> <h3 id="_keyboard-reference-sheets" data-needslink="_keyboard-reference-sheets">Keyboard reference sheets</h3> Download the keyboard shortcut reference sheet for your platform (<a href="https://go.microsoft.com/fwlink/?linkid=832143" class="external-link" target="_blank">macOS</a>, <a href="https://go.microsoft.com/fwlink/?linkid=832145" class="external-link" target="_blank">Windows</a>, <a href="https://go.microsoft.com/fwlink/?linkid=832144" class="external-link" target="_blank">Linux</a>). <img src="/assets/docs/getstarted/tips-and-tricks/KeyboardReferenceSheet.png" alt="Keyboard Reference Sheet" loading="lazy"> <h3 id="_floating-windows" data-needslink="_floating-windows">Floating windows</h3> You can open an editor in a floating window, for example to move the editor to another place on your monitor or even to another monitor. To open an editor in a floating window, drag it out of the main window and drop it anywhere outside of the current VS Code window. Another way to detach an editor is to right-click on an editor tab, and select the option Move into New Window (<code>workbench.action.moveEditorToNewWindow</code>) or Copy into New Window (⌘K O (Windows, Linux Ctrl+K O)). <video src="/assets/docs/getstarted/tips-and-tricks/floating-windows.mp4" autoplay loop controls muted></video> <h3 id="_integrated-terminal" data-needslink="_integrated-terminal">Integrated Terminal</h3> Keyboard Shortcut: ⌃` (Windows, Linux Ctrl+`) <img src="/assets/docs/getstarted/tips-and-tricks/integrated_terminal.png" alt="Integrated terminal" loading="lazy"> You can select another terminal shell from the dropdown. Depending on your operating system and system configuration, you might see different shells listed. Further reading: <ul> <li><a href="/docs/terminal/basics">Integrated Terminal</a> documentation</li> <li><a href="https://www.growingwiththeweb.com/2017/03/mastering-vscodes-terminal.html" class="external-link" target="_blank">Mastering VS Code's Terminal article</a></li> </ul> <h3 id="_toggle-sidebar" data-needslink="_toggle-sidebar">Toggle Sidebar</h3> Keyboard Shortcut: ⌘B (Windows, Linux Ctrl+B) <img src="/assets/docs/getstarted/tips-and-tricks/toggle_side_bar.gif" alt="toggle side bar" loading="lazy"> <h3 id="_toggle-panel" data-needslink="_toggle-panel">Toggle Panel</h3> Keyboard Shortcut: ⌘J (Windows, Linux Ctrl+J) <img src="/assets/docs/getstarted/tips-and-tricks/toggle_panel.gif" alt="toggle panel" loading="lazy"> <h3 id="_zen-mode" data-needslink="_zen-mode">Zen mode</h3> Enter distraction-free Zen mode. Keyboard Shortcut: ⌘K Z (Windows, Linux Ctrl+K Z) <img src="/assets/docs/getstarted/tips-and-tricks/zen_mode.gif" alt="zen mode" loading="lazy"> Press Esc twice to exit Zen Mode. <h2 id="_command-line" data-needslink="_command-line">Command line</h2> VS Code has a powerful command line interface (CLI) which enables you to customize how the editor is launched to support various scenarios. For example, you can start VS Code from the command line to open a diff editor for comparing two files. <blockquote>Make sure the VS Code binary is on your path so you can simply type 'code' to launch VS Code. See the platform specific setup topics if VS Code is added to your environment path during installation (<a href="/docs/setup/linux">Running VS Code on Linux</a>, <a href="/docs/setup/mac">macOS</a>, <a href="/docs/setup/windows">Windows</a>). </blockquote><pre class="shiki" style="background-color: #1e1e1e"><code># open code with current directory code . # open the current directory in the most recently used code window code -r . # create a new window code -n # change the language code --locale=es # open diff editor code --diff <file1> <file2> # open file at specific line and column <file:line[:character]> code --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions . </code></pre> <h3 id="_vscode-folder" data-needslink="_vscode-folder">.vscode folder</h3> Workspace-specific configuration files are in a <code>.vscode</code> folder at the root of your workspace. For example, <code>tasks.json</code> for the <a href="/docs/editor/tasks">Task Runner</a> and <code>launch.json</code> for the <a href="/docs/editor/debugging">debugger</a>. <h2 id="_status-bar" data-needslink="_status-bar">Status Bar</h2> <h3 id="_errors-and-warnings" data-needslink="_errors-and-warnings">Errors and warnings</h3> Keyboard Shortcut: ⇧⌘M (Windows, Linux Ctrl+Shift+M) Quickly jump to errors and warnings in the project. Cycle through errors with F8 or ⇧F8 (Windows, Linux Shift+F8) <img src="/assets/docs/getstarted/tips-and-tricks/Errors_Warnings.gif" alt="errors and warnings" loading="lazy"> You can filter problem list either by type ('info', 'errors', 'warnings') or by matching text. <h3 id="_change-language-mode" data-needslink="_change-language-mode">Change language mode</h3> The language mode in the Status Bar indicates the language (for example, Markdown, Python, and more) that is associated with the active editor. You can change the language mode for the current editor by selecting the Status Bar language mode indicator, or by using the keyboard shortcut. Keyboard Shortcut: ⌘K M (Windows, Linux Ctrl+K M) <img src="/assets/docs/getstarted/tips-and-tricks/change_syntax.gif" alt="change syntax" loading="lazy"> If you want to persist the new language mode for a file type, use the Configure File Association for command to associate the current file extension with an installed language. <h2 id="_customization" data-needslink="_customization">Customization</h2> There are many options to customize VS Code to meet your preferences: <ul> <li>Change your theme</li> <li>Change your keyboard shortcuts</li> <li>Tune your settings</li> <li>Add JSON validation</li> <li>Create snippets</li> <li>Install extensions</li> </ul> <h3 id="_change-your-theme" data-needslink="_change-your-theme">Change your theme</h3> VS Code comes with a number of built-in <a href="/docs/editor/themes">color themes</a>. Use the Preferences: Color Theme command or use the keyboard shortcut. Keyboard Shortcut: ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T) <img src="/assets/docs/getstarted/tips-and-tricks/PreviewThemes.gif" alt="Preview themes" loading="lazy"> You can install more themes from the VS Code extension <a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs" class="external-link" target="_blank">Marketplace</a>. Select the Preferences: Color Theme > + Browse Additional Color Themes... command to search themes from the Marketplace. Additionally, you can install and change your File Icon themes. <img src="/assets/docs/getstarted/tips-and-tricks/PreviewFileIconThemes.gif" alt="File icon themes" loading="lazy"> <h3 id="_keymaps" data-needslink="_keymaps">Keymaps</h3> Are you used to keyboard shortcuts from another editor? You can install a Keymap extension that brings the keyboard shortcuts from your favorite editor to VS Code. Use the Preferences: Keymaps command to see the current list on the <a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Installs" class="external-link" target="_blank">Visual Studio Marketplace</a>. Some of the more popular keymaps are: <ul> <li><a href="https://marketplace.visualstudio.com/items?itemName=vscodevim.vim" class="external-link" target="_blank">Vim</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings" class="external-link" target="_blank">Sublime Text Keymap</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=hiro-sun.vscode-emacs" class="external-link" target="_blank">Emacs Keymap</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings" class="external-link" target="_blank">Atom Keymap</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.brackets-keybindings" class="external-link" target="_blank">Brackets Keymap</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=alphabotsec.vscode-eclipse-keybindings" class="external-link" target="_blank">Eclipse Keymap</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings" class="external-link" target="_blank">Visual Studio Keymap</a></li> </ul> <h3 id="_customize-your-keyboard-shortcuts" data-needslink="_customize-your-keyboard-shortcuts">Customize your keyboard shortcuts</h3> You can view and customize the keyboard shortcuts in the Keyboard Shortcuts editor. Use the Preferences: Open Keyboard Shortcuts command or use the shortcut to open the editor. Keyboard Shortcut: ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S) Select the pencil icon or use Enter on a specific entry to edit the keyboard shortcut. Filter the list by using the search field. <img src="/assets/docs/getstarted/tips-and-tricks/keyboard-shortcuts.png" alt="keyboard shortcuts" loading="lazy"> You can also search for shortcuts and add your own keyboard shortcuts to the <code>keybindings.json</code> file. <img src="/assets/docs/getstarted/tips-and-tricks/KeyboardShortcuts.gif" alt="customize keyboard shortcuts" loading="lazy"> See more in <a href="/docs/editor/keybindings">Key Bindings for Visual Studio Code</a>. <h3 id="_tune-your-settings" data-needslink="_tune-your-settings">Tune your settings</h3> By default, VS Code shows the Settings editor to view and edit settings. You can also edit the underlying <code>settings.json</code> file by using the Open User Settings (JSON) command or by changing your default settings editor with the <a href="vscode://settings/workbench.settings.editor" codesetting="true"></a>workbench.settings.editor setting. Open User Settings <code>settings.json</code> Keyboard Shortcut: ⌘, (Windows, Linux Ctrl+,) Change the font size of various UI elements <pre class="shiki" style="background-color: #1e1e1e"><code>// Main editor "editor.fontSize": 18, // Terminal panel "terminal.integrated.fontSize": 14, // Output panel "[Log]": { "editor.fontSize": 15 } </code></pre> Change the zoom level <pre class="shiki" style="background-color: #1e1e1e"><code>"window.zoomLevel": 5 </code></pre> Font ligatures <pre class="shiki" style="background-color: #1e1e1e"><code>"editor.fontFamily": "Fira Code", "editor.fontLigatures": true </code></pre> <blockquote>Tip: You need to have a font installed that supports font ligatures. <a href="https://github.com/tonsky/FiraCode" class="external-link" target="_blank">FiraCode</a> is a popular font on the VS Code team. </blockquote><img src="/assets/docs/getstarted/tips-and-tricks/font-ligatures-annotated.png" alt="font ligatures" loading="lazy"> Auto Save <pre class="shiki" style="background-color: #1e1e1e"><code>"files.autoSave": "afterDelay" </code></pre> You can also toggle Auto Save from the top-level menu with the File > Auto Save. Format on save <pre class="shiki" style="background-color: #1e1e1e"><code>"editor.formatOnSave": true </code></pre> Format on paste <pre class="shiki" style="background-color: #1e1e1e"><code>"editor.formatOnPaste": true </code></pre> Change the size of Tab characters <pre class="shiki" style="background-color: #1e1e1e"><code>"editor.tabSize": 4 </code></pre> Spaces or Tabs <pre class="shiki" style="background-color: #1e1e1e"><code>"editor.insertSpaces": true </code></pre> Render whitespace <pre class="shiki" style="background-color: #1e1e1e"><code>"editor.renderWhitespace": "all" </code></pre> Whitespace characters are rendered by default in text selection. Ignore files / folders Removes these files / folders from your editor window. <pre class="shiki" style="background-color: #1e1e1e"><code>"files.exclude": { "somefolder/": true, "somefile": true } </code></pre> Remove these files / folders from search results. <pre class="shiki" style="background-color: #1e1e1e"><code>"search.exclude": { "someFolder/": true, "somefile": true } </code></pre> Learn about the many <a href="/docs/editor/settings">other customizations</a>. <h3 id="_language-specific-settings" data-needslink="_language-specific-settings">Language specific settings</h3> You can scope settings for specific languages by using the language identifier. You can find a list of commonly used language IDs in the <a href="/docs/languages/identifiers">Language Identifiers</a> reference. <pre class="shiki" style="background-color: #1e1e1e"><code>"[languageid]": { } </code></pre> <blockquote>Tip: You can also create language-specific settings with the Configure Language Specific Settings command. <img src="/assets/docs/getstarted/tips-and-tricks/lang-based-settings.png" alt="language based settings" loading="lazy"> </blockquote><h3 id="_add-json-validation" data-needslink="_add-json-validation">Add JSON validation</h3> JSON validation is enabled by default for many file types. Create your own schema and validation in <code>settings.json</code>: <pre class="shiki" style="background-color: #1e1e1e"><code>"json.schemas": [ { "fileMatch": [ "bower.json" ], "url": "https://json.schemastore.org/bower" } ] </code></pre> or for a schema defined in your workspace: <pre class="shiki" style="background-color: #1e1e1e"><code>"json.schemas": [ { "fileMatch": [ "**/foo.json" ], "url": "./myschema.json" } ] </code></pre> or to use a custom schema: <pre class="shiki" style="background-color: #1e1e1e"><code>"json.schemas": [ { "fileMatch": [ "/.myconfig" ], "schema": { "type": "object", "properties": { "name" : { "type": "string", "description": "The name of the entry" } } } } ] </code></pre> See more in the <a href="/docs/languages/json">JSON</a> documentation. <h3 id="_configure-the-default-browser" data-needslink="_configure-the-default-browser">Configure the default browser</h3> In VS Code, you can Ctrl+click (Cmd+click on macOS) on a link to open it in your default browser. You can configure the default browser by setting the <a href="vscode://settings/workbench.externalBrowser" codesetting="true"></a>workbench.externalBrowser <a href="/docs/editor/settings">setting</a>. Specify the full path to the browser executable as the settings value. Alternatively, to ensure correct functioning across devices, you can also use browser aliases, such as <code>edge</code>, <code>chrome</code>, or <code>firefox</code>. <pre class="shiki" style="background-color: #1e1e1e"><code>"workbench.externalBrowser": "edge" </code></pre> <h3 id="_combine-multiple-logs-into-a-single-view" data-needslink="_combine-multiple-logs-into-a-single-view">Combine multiple logs into a single view</h3> The Output panel shows the output of various services. Each services typically has their own log. To analyze related log information from multiple services, you can combine multiple logs into a single compound log. Select Create Compound Log... from the overflow menu of the Output panel. <video src="/assets/docs/getstarted/tips-and-tricks/compound-log.mp4" title="Video showing how to create a compound log that combines the log messages from two other logs." autoplay loop controls muted></video> <h2 id="_extensions" data-needslink="_extensions">Extensions</h2> Keyboard Shortcut: ⇧⌘X (Windows, Linux Ctrl+Shift+X) <h3 id="_find-extensions" data-needslink="_find-extensions">Find extensions</h3> You can use multiple sources to find extensions: <ul> <li>In the VS Code <a href="https://marketplace.visualstudio.com/vscode" class="external-link" target="_blank">Marketplace</a>.</li> <li>Search inside VS Code in the Extensions view.</li> <li>View extension recommendations</li> <li>Community curated extension lists, such as <a href="https://github.com/viatsko/awesome-vscode" class="external-link" target="_blank">awesome-vscode</a>.</li> </ul> <h3 id="_find-popular-extensions" data-needslink="_find-popular-extensions">Find popular extensions</h3> In the Extensions view, select the Filter control, and then either select Most Popular or Sort By > Install Count. <img src="/assets/docs/getstarted/tips-and-tricks/show-popular-extensions.png" alt="install extensions" loading="lazy"> <h3 id="_extension-recommendations" data-needslink="_extension-recommendations">Extension recommendations</h3> In the Extensions view, select the Filter control, and then select Recommended to view the list of recommended extensions. <img src="/assets/docs/getstarted/tips-and-tricks/show-recommended-extensions.png" alt="show recommended extensions" loading="lazy"> <h3 id="_create-your-own-extension" data-needslink="_create-your-own-extension">Create your own extension</h3> Are you interested in creating your own extension? You can learn how to do this in the <a href="/api">Extension API documentation</a>, specifically check out the <a href="/api/references/contribution-points">documentation on contribution points</a>. <ul> <li>configuration</li> <li>commands</li> <li>keyboard shortcuts</li> <li>languages</li> <li>debuggers</li> <li>grammars</li> <li>themes</li> <li>snippets</li> <li>jsonValidation</li> </ul> <h2 id="_files-and-folders" data-needslink="_files-and-folders">Files and folders</h2> <h3 id="_simple-file-dialog" data-needslink="_simple-file-dialog">Simple file dialog</h3> With the simple file dialog, you can replace the system's default file dialog for opening and saving files and folders with a simpler Quick Pick dialog within VS Code. After you enable the Simple File Dialog, you can browse and select files and folders by using a Quick Pick inside VS Code. <img src="/assets/docs/getstarted/tips-and-tricks/simple-file-dialog.png" alt="Simple File Dialog" loading="lazy"> To enable the simple file dialog, configure the <code>files.simpleDialog</code> <a href="/docs/editor/settings">setting</a>: <pre class="shiki" style="background-color: #1e1e1e"><code> "files.simpleDialog.enable": true </code></pre> <h3 id="_show-explorer-view" data-needslink="_show-explorer-view">Show Explorer view</h3> Keyboard Shortcut: ⇧⌘E (Windows, Linux Ctrl+Shift+E) <h3 id="_quick-open" data-needslink="_quick-open">Quick Open</h3> Quickly search and open files. Keyboard Shortcut: ⌘P (Windows, Linux Ctrl+P) <img src="/assets/docs/getstarted/tips-and-tricks/QuickOpen.gif" alt="Quick Open" loading="lazy"> Tip: Type ? to view command suggestions. <img src="/assets/docs/getstarted/tips-and-tricks/quick-open-command-dropdown.png" alt="Quick Open command list" loading="lazy"> Typing commands such as <code>edt</code> or <code>term</code> followed by a space brings up a dropdown list. <img src="/assets/docs/getstarted/tips-and-tricks/term-quick-open.png" alt="term command in Quick Open" loading="lazy"> <h4 id="_navigate-between-recently-opened-files" data-needslink="_navigate-between-recently-opened-files">Navigate between recently opened files</h4> Repeatedly press the Quick Open keyboard shortcut to cycle quickly between recently opened files. <h4 id="_open-multiple-files-from-quick-open" data-needslink="_open-multiple-files-from-quick-open">Open multiple files from Quick Open</h4> You can open multiple files from Quick Open by pressing Right Arrow. This opens the currently selected file in the background, and you can continue selecting files from Quick Open. <h3 id="_navigate-between-recently-opened-folders-and-workspaces" data-needslink="_navigate-between-recently-opened-folders-and-workspaces">Navigate between recently opened folders and workspaces</h3> Open a recent folder or workspace. Keyboard Shortcut: ⌃R (Windows, Linux Ctrl+R) Displays a Quick Pick dropdown with the list from File > Open Recent with recently opened folders and workspaces followed by files. <h3 id="_create-or-open-a-file-from-a-link" data-needslink="_create-or-open-a-file-from-a-link">Create or open a file from a link</h3> Keyboard Shortcut: Ctrl+click (Cmd+click on macOS) You can quickly open a file or image, or create a new file by moving the cursor to the file link and then pressing Ctrl+click. <img src="/assets/docs/getstarted/tips-and-tricks/create_open_file.gif" alt="create and open file" loading="lazy"> <h3 id="_close-the-currently-opened-folder" data-needslink="_close-the-currently-opened-folder">Close the currently opened folder</h3> Keyboard Shortcut: ⌘K F (Windows, Linux Ctrl+K F) <h3 id="_navigation-history" data-needslink="_navigation-history">Navigation history</h3> Navigate entire history: ⌃Tab (Windows, Linux Ctrl+Tab) Navigate back: ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-) Navigate forward: ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-) <img src="/assets/docs/getstarted/tips-and-tricks/navigate_history.gif" alt="navigate history" loading="lazy"> <h3 id="_file-associations" data-needslink="_file-associations">File associations</h3> Create language associations for files that aren't detected correctly. For example, many configuration files with custom file extensions are actually JSON. <pre class="shiki" style="background-color: #1e1e1e"><code>"files.associations": { ".database": "json" } </code></pre> <h3 id="_preventing-dirty-writes" data-needslink="_preventing-dirty-writes">Preventing dirty writes</h3> VS Code will show you an error message when you try to save a file that cannot be saved because it has changed on disk. VS Code blocks saving the file to prevent overwriting changes that have been made outside of the editor. To resolve the save conflict, select the Compare action in the notification popup to open a diff editor that shows you the contents of the file on disk (to the left) compared to the contents in VS Code (on the right): <img src="/assets/docs/getstarted/tips-and-tricks/dirty-write.png" alt="dirty write" loading="lazy"> Use the actions in the editor toolbar to resolve the save conflict. You can either Accept your changes and thereby overwriting any changes on disk, or Revert to the version on disk. Reverting means that your changes will be lost. Note: The file remains dirty and cannot be saved until you pick one of the two actions to resolve the conflict. <h2 id="_editing-hacks" data-needslink="_editing-hacks">Editing hacks</h2> Here is a selection of common features for editing code. If you're more familiar with the keyboard shortcuts for another editor, consider installing a <a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Installs" class="external-link" target="_blank">keymap extension</a>. Tip: You can see recommended keymap extensions in the Extensions view by filtering the search to <code>@recommended:keymaps</code>. <h3 id="_side-by-side-editing" data-needslink="_side-by-side-editing">Side by side editing</h3> Keyboard Shortcut: ⌘\ (Windows, Linux Ctrl+\) You can also drag and drop editors to create new editor groups and move editors between groups. <img src="/assets/docs/getstarted/tips-and-tricks/split_editor.gif" alt="split editors" loading="lazy"> <h3 id="_switch-between-editors" data-needslink="_switch-between-editors">Switch between editors</h3> Keyboard Shortcut: ⌘1 (Windows, Linux Ctrl+1), ⌘2 (Windows, Linux Ctrl+2), ⌘3 (Windows, Linux Ctrl+3) <img src="/assets/docs/getstarted/tips-and-tricks/navigate_editors.gif" alt="navigate editors" loading="lazy"> <h3 id="_multi-cursor-selection" data-needslink="_multi-cursor-selection">Multi cursor selection</h3> To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+Click on macOS). To set cursors above or below the current position use: Keyboard Shortcut: ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) or ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) <img src="/assets/docs/getstarted/tips-and-tricks/multicursor.gif" alt="multi cursor" loading="lazy"> You can add additional cursors to all occurrences of the current selection with ⇧⌘L (Windows, Linux Ctrl+Shift+L). <img src="/assets/docs/getstarted/tips-and-tricks/add_cursor_current_selection.gif" alt="add cursor to all occurrences of current selection" loading="lazy"> <blockquote>Note: You can also change the modifier to Ctrl/Cmd for applying multiple cursors with the <a href="vscode://settings/editor.multiCursorModifier" codesetting="true"></a>editor.multiCursorModifier <a href="/docs/editor/settings">setting</a> . See <a href="/docs/editor/codebasics#_multicursor-modifier">Multi-cursor Modifier</a> for details. </blockquote>If you do not want to add all occurrences of the current selection, you can use ⌘D (Windows, Linux Ctrl+D) instead. This only selects the next occurrence after the one you selected so you can add selections one by one. <img src="/assets/docs/getstarted/tips-and-tricks/add_cursor_current_selection_one_by_one.gif" alt="add cursor to next occurrences of current selection one by one" loading="lazy"> <h3 id="_column-box-selection" data-needslink="_column-box-selection">Column (box) selection</h3> You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line. <img src="/assets/docs/getstarted/tips-and-tricks/column-select.gif" alt="Column text selection" loading="lazy"> You can also use <a href="/docs/editor/codebasics#_column-box-selection">keyboard shortcuts</a> to trigger column selection. <h3 id="_vertical-rulers" data-needslink="_vertical-rulers">Vertical rulers</h3> You can add vertical column rulers to the editor with the <a href="vscode://settings/editor.rulers" codesetting="true"></a>editor.rulers setting, which takes an array of column character positions where you'd like vertical rulers. <pre class="shiki" style="background-color: #1e1e1e"><code>{ "editor.rulers": [20, 40, 60] } </code></pre> <img src="/assets/docs/getstarted/tips-and-tricks/editor-rulers.png" alt="Editor rulers in the editor" loading="lazy"> <h3 id="_fast-scrolling" data-needslink="_fast-scrolling">Fast scrolling</h3> Pressing the Alt key enables fast scrolling in the editor and Explorers. By default, fast scrolling uses a 5X speed multiplier but you can control the multiplier with the Editor: Fast Scroll Sensitivity (<a href="vscode://settings/editor.fastScrollSensitivity" codesetting="true"></a>editor.fastScrollSensitivity) setting. <h3 id="_locked-scrolling" data-needslink="_locked-scrolling">Locked scrolling</h3> You can synchronize scrolling across all visible editors by using the View: Toggle Locked Scrolling Across Editors command. This means that when you scroll in one editor, all the other editors scroll by the same amount, keeping everything aligned. <img src="/assets/docs/getstarted/tips-and-tricks/locked-scrolling.gif" alt="Locked scrolling in the editor" loading="lazy"> You can choose to only activate the scrolling sync when you're holding down a specific keyboard shortcut. Set up a keyboard shortcut for the <code>workbench.action.holdLockedScrolling</code> command to temporarily lock scrolling across editors. <h3 id="_copy-line-up-down" data-needslink="_copy-line-up-down">Copy line up / down</h3> Keyboard Shortcut: ⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) or ⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down) <blockquote>The commands Copy Line Up/Down are unbound on Linux because the VS Code default keyboard shortcuts would conflict with Ubuntu keyboard shortcuts, see <a href="https://github.com/microsoft/vscode/issues/509" class="external-link" target="_blank">Issue #509</a>. You can still set the commands <code>editor.action.copyLinesUpAction</code> and <code>editor.action.copyLinesDownAction</code> to your own preferred keyboard shortcuts. </blockquote><img src="/assets/docs/getstarted/tips-and-tricks/copy_line_down.gif" alt="copy line down" loading="lazy"> <h3 id="_move-line-up-and-down" data-needslink="_move-line-up-and-down">Move line up and down</h3> Keyboard Shortcut: ⌥↑ (Windows, Linux Alt+Up) or ⌥↓ (Windows, Linux Alt+Down) <img src="/assets/docs/getstarted/tips-and-tricks/move_line.gif" alt="move line up and down" loading="lazy"> <h3 id="_shrink-expand-selection" data-needslink="_shrink-expand-selection">Shrink / expand selection</h3> Keyboard Shortcut: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) or ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right) <img src="/assets/docs/getstarted/tips-and-tricks/shrink_expand_selection.gif" alt="shrink expand selection" loading="lazy"> You can learn more in the <a href="/docs/editor/codebasics#_shrinkexpand-selection">Basic Editing</a> documentation. <h3 id="_go-to-symbol-in-file" data-needslink="_go-to-symbol-in-file">Go to Symbol in File</h3> Keyboard Shortcut: ⇧⌘O (Windows, Linux Ctrl+Shift+O) <img src="/assets/docs/getstarted/tips-and-tricks/find_by_symbol.gif" alt="Find by symbol" loading="lazy"> You can group the symbols by kind by adding a colon, <code>@:</code>. <img src="/assets/docs/getstarted/tips-and-tricks/group_symbols_by_kind.png" alt="group symbols by kind" loading="lazy"> <h3 id="_go-to-symbol-in-workspace" data-needslink="_go-to-symbol-in-workspace">Go to Symbol in Workspace</h3> Keyboard Shortcut: ⌘T (Windows, Linux Ctrl+T) <img src="/assets/docs/getstarted/tips-and-tricks/go_to_symbol_in_workspace.png" alt="go to symbol in workspace" loading="lazy"> <h3 id="_outline-view" data-needslink="_outline-view">Outline view</h3> The Outline view in the File Explorer (default collapsed at the bottom) shows you the symbols of the currently open file. <img src="/assets/docs/getstarted/tips-and-tricks/outline-view.png" alt="Outline view" loading="lazy"> You can sort by symbol name, category, and position in the file and allows quick navigation to symbol locations. <h3 id="_navigate-to-a-specific-line" data-needslink="_navigate-to-a-specific-line">Navigate to a specific line</h3> Keyboard Shortcut: ⌃G (Windows, Linux Ctrl+G) <h3 id="_undo-cursor-position" data-needslink="_undo-cursor-position">Undo cursor position</h3> Keyboard Shortcut: ⌘U (Windows, Linux Ctrl+U) <h3 id="_trim-trailing-whitespace" data-needslink="_trim-trailing-whitespace">Trim trailing whitespace</h3> Keyboard Shortcut: ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X) <img src="/assets/docs/getstarted/tips-and-tricks/trim_whitespace.gif" alt="trailing whitespace" loading="lazy"> <h3 id="_transform-text-commands" data-needslink="_transform-text-commands">Transform text commands</h3> You can change selected text to uppercase, lowercase, and title case with the Transform commands from the Command Palette. <img src="/assets/docs/getstarted/tips-and-tricks/transform-text-commands.png" alt="Transform text commands" loading="lazy"> <h3 id="_code-formatting" data-needslink="_code-formatting">Code formatting</h3> Currently selected source code: ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F) Whole document format: ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) <img src="/assets/docs/getstarted/tips-and-tricks/code_formatting.gif" alt="code formatting" loading="lazy"> <h3 id="_code-folding" data-needslink="_code-folding">Code folding</h3> Keyboard Shortcut: ⌥⌘[ (Windows, Linux Ctrl+Shift+[), ⌥⌘] (Windows, Linux Ctrl+Shift+]) and ⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L) <img src="/assets/docs/getstarted/tips-and-tricks/code_folding.gif" alt="code folding" loading="lazy"> You can also fold/unfold all regions in the editor with Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) and Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)). You can fold all block comments with Fold All Block Comments (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)). <h3 id="_select-current-line" data-needslink="_select-current-line">Select current line</h3> Keyboard Shortcut: ⌘L (Windows, Linux Ctrl+L) <h3 id="_navigate-to-beginning-and-end-of-file" data-needslink="_navigate-to-beginning-and-end-of-file">Navigate to beginning and end of file</h3> Keyboard Shortcut: ⌘↑ (Windows, Linux Ctrl+Home) and ⌘↓ (Windows, Linux Ctrl+End) <h3 id="_open-markdown-preview" data-needslink="_open-markdown-preview">Open Markdown preview</h3> In a Markdown file, use Keyboard Shortcut: ⇧⌘V (Windows, Linux Ctrl+Shift+V) <img src="/assets/docs/getstarted/tips-and-tricks/markdown-preview.png" alt="Markdown preview" loading="lazy"> <h3 id="_side-by-side-markdown-edit-and-preview" data-needslink="_side-by-side-markdown-edit-and-preview">Side by side Markdown edit and preview</h3> In a Markdown file, use Keyboard Shortcut: ⌘K V (Windows, Linux Ctrl+K V) The preview and editor will synchronize with your scrolling in either view. <img src="/assets/docs/getstarted/tips-and-tricks/markdown-preview-side-by-side.png" alt="side by side Markdown preview" loading="lazy"> <h2 id="_intellisense" data-needslink="_intellisense">IntelliSense</h2> ⌃Space (Windows, Linux Ctrl+Space) to trigger the Suggestions widget. <img src="/assets/docs/getstarted/tips-and-tricks/intellisense.gif" alt="intellisense" loading="lazy"> You can view available methods, parameter hints, short documentation, etc. <h3 id="_peek" data-needslink="_peek">Peek</h3> Select a symbol then type ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10). Alternatively, you can use the context menu. <img src="/assets/docs/getstarted/tips-and-tricks/peek.gif" alt="peek" loading="lazy"> <h3 id="_go-to-definition" data-needslink="_go-to-definition">Go to Definition</h3> Select a symbol then type F12. Alternatively, you can use the context menu or Ctrl+click (Cmd+click on macOS). <img src="/assets/docs/getstarted/tips-and-tricks/goto_definition.gif" alt="go to definition" loading="lazy"> You can go back to your previous location with the Go > Back command or ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-). You can also see the type definition if you press Ctrl (Cmd on macOS) when you are hovering over the type. <h3 id="_go-to-references" data-needslink="_go-to-references">Go to References</h3> Select a symbol then type ⇧F12 (Windows, Linux Shift+F12). Alternatively, you can use the context menu. <img src="/assets/docs/getstarted/tips-and-tricks/find_all_references.gif" alt="peek references" loading="lazy"> <h3 id="_find-all-references-view" data-needslink="_find-all-references-view">Find All References view</h3> Select a symbol then type ⇧⌥F12 (Windows, Linux Shift+Alt+F12) to open the References view showing all your file's symbols in a dedicated view. <h3 id="_rename-symbol" data-needslink="_rename-symbol">Rename Symbol</h3> Select a symbol then type F2. Alternatively, you can use the context menu. <img src="/assets/docs/getstarted/tips-and-tricks/rename_symbol.gif" alt="rename symbol" loading="lazy"> <h3 id="_search-and-modify" data-needslink="_search-and-modify">Search and modify</h3> Besides searching and replacing expressions, you can also search and reuse parts of what was matched, using regular expressions with capturing groups. Enable regular expressions in the search box by clicking the Use Regular Expression <code>.*</code> button (⌥⌘R (Windows, Linux Alt+R)) and then write a regular expression and use parentheses to define groups. You can then reuse the content matched in each group by using <code>$1</code>, <code>$2</code>, etc. in the Replace field. <img src="/assets/docs/getstarted/tips-and-tricks/search_and_modify.png" alt="search and modify" loading="lazy"> <h3 id="_eslintrcjson" data-needslink="_eslintrcjson">.eslintrc.json</h3> Install the <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" class="external-link" target="_blank">ESLint extension</a>. Configure your linter however you'd like. Consult the <a href="https://eslint.org/docs/user-guide/configuring" class="external-link" target="_blank">ESLint specification</a> for details on its linting rules and options. Here is configuration to use ES6. <pre class="shiki" style="background-color: #1e1e1e"><code>{ "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true, "classes": true, "defaultParams": true } }, "rules": { "no-const-assign": 1, "no-extra-semi": 0, "semi": 0, "no-fallthrough": 0, "no-empty": 0, "no-mixed-spaces-and-tabs": 0, "no-redeclare": 0, "no-this-before-super": 1, "no-undef": 1, "no-unreachable": 1, "no-use-before-define": 0, "constructor-super": 1, "curly": 0, "eqeqeq": 0, "func-names": 0, "valid-typeof": 1 } } </code></pre> <h3 id="_packagejson" data-needslink="_packagejson">package.json</h3> See IntelliSense for your <code>package.json</code> file. <img src="/assets/docs/getstarted/tips-and-tricks/package_json_intellisense.gif" alt="package json intellisense" loading="lazy"> <h3 id="_emmet-syntax" data-needslink="_emmet-syntax">Emmet syntax</h3> <a href="/docs/editor/emmet">Support for Emmet syntax</a>. <img src="/assets/docs/getstarted/tips-and-tricks/emmet_syntax.gif" alt="emmet syntax" loading="lazy"> <h2 id="_snippets" data-needslink="_snippets">Snippets</h2> <h3 id="_create-custom-snippets" data-needslink="_create-custom-snippets">Create custom snippets</h3> File > Preferences > Configure Snippets, select the language, and create a snippet. <pre class="shiki" style="background-color: #1e1e1e"><code>"create component": { "prefix": "component", "body": [ "class $1 extends React.Component {", "", "\trender() {", "\t\treturn ($2);", "\t}", "", "}" ] }, </code></pre> See more details in <a href="/docs/editor/userdefinedsnippets">Creating your own Snippets</a>. <h2 id="_git-integration" data-needslink="_git-integration">Git integration</h2> Keyboard Shortcut: ⌃⇧G (Windows, Linux Ctrl+Shift+G) Git integration comes "out-of-the-box" with VS Code. You can install other source control management (SCM) providers from the VS Code <a href="/docs/editor/extension-marketplace">Extension Marketplace</a>. This section describes the Git integration but much of the UI and gestures are common for other SCM providers. <h2 id="_git-blame" data-needslink="_git-blame">Git blame</h2> VS Code shows git blame information inline in the editor and in the Status Bar. Hover over the Status Bar item or inline hint to view detailed git blame information. <img src="/assets/docs/getstarted/1_97/scm-git-blame.png" alt="Screenshot that shows Git blame information when hovering over the git blame item in the Status Bar." loading="lazy"> To enable or disable git blame information, use the Git: Toggle Git Blame Editor Decoration and Git: Toggle Git Blame Status Bar Item commands, or configure these settings: <ul> <li><a href="vscode://settings/git.blame.statusBarItem.enabled" codesetting="true"></a>git.blame.statusBarItem.enabled (enabled by default)</li> <li><a href="vscode://settings/git.blame.editorDecoration.enabled" codesetting="true"></a>git.blame.editorDecoration.enabled</li> </ul> Learn more about <a href="/docs/sourcecontrol/overview#_git-blame-information">git blame support in VS Code</a> and how to customize the layout. <h3 id="_diffs" data-needslink="_diffs">Diffs</h3> From the Source Control view, select a file to open the diff editor. Alternatively, select the Open Changes button in the top right corner to diff the current open file. <img src="/assets/docs/getstarted/tips-and-tricks/msee-changes.gif" alt="git diff from source control" loading="lazy"> <h4 id="_views" data-needslink="_views">Views</h4> The default view for diffs is the side by side view. Toggle inline view by selecting the More Actions (...) button in the top right, and then selecting Inline View. <img src="/assets/docs/getstarted/tips-and-tricks/mdiff-switch-to-inline.png" alt="Screenshot that shows the More Actions menu in the diff editor, highlighting the Inline View menu item" loading="lazy"> If you prefer to have the inline view as the default, configure the <code>"diffEditor.renderSideBySide": false</code> setting. <h4 id="_accessible-diff-viewer" data-needslink="_accessible-diff-viewer">Accessible Diff Viewer</h4> Navigate through diffs with F7 and ⇧F7 (Windows, Linux Shift+F7). This presents changes in a unified patch format. Lines can be navigated with arrow keys and pressing Enter jumps back in the diff editor and the selected line. <img src="/assets/docs/getstarted/tips-and-tricks/diff_review_pane.png" alt="diff_review_pane" loading="lazy"> <h4 id="_edit-pending-changes" data-needslink="_edit-pending-changes">Edit pending changes</h4> While you're viewing changes in the diff editor, you can make edits directly in the pending changes side of the diff editor. <h3 id="_branches" data-needslink="_branches">Branches</h3> Easily switch between Git branches via the Status Bar. <img src="/assets/docs/getstarted/tips-and-tricks/switch-branch.gif" alt="switch branches" loading="lazy"> <h3 id="_staging" data-needslink="_staging">Staging</h3> <h4 id="_stage-file-changes" data-needslink="_stage-file-changes">Stage file changes</h4> Hover over the number of files and select the plus button to stage a file. Select the minus button to unstage changes. <img src="/assets/docs/getstarted/tips-and-tricks/stage-unstage.gif" alt="git stage all" loading="lazy"> <h4 id="_stage-selected" data-needslink="_stage-selected">Stage selected</h4> You can stage a portion of a file by making a text selection in a file and then choosing Stage Selected Ranges from the Command Palette or from the diff editor context menu (right-click). <h3 id="_undo-last-commit" data-needslink="_undo-last-commit">Undo last commit</h3> Select the (...) button, and then select Commit > Undo Last Commit to undo the previous commit. The changes are added to the Staged Changes section. <img src="/assets/docs/getstarted/tips-and-tricks/mundo-last-commit.gif" alt="undo last commit" loading="lazy"> <h3 id="_see-git-output" data-needslink="_see-git-output">See Git output</h3> VS Code makes it easy to see what Git commands are actually running. This can be helpful when you're still learning Git or when you're debugging a difficult source control issue. To view the Git output, select the (...) button in the Source Control view, and then select Show Git Output, use the Git: Show Git Output command, or use the Toggle Output command (⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)) and then select Git from the dropdown. <h3 id="_gutter-indicators" data-needslink="_gutter-indicators">Gutter indicators</h3> The editor provides visual cues in the gutter about where and which changes (added, changed, or remove lines) were made. See <a href="/docs/sourcecontrol/overview#_gutter-indicators">the source control documentation</a> for more details. <img src="/assets/docs/getstarted/tips-and-tricks/mgutter_icons.gif" alt="git gutter indicators" loading="lazy"> <h3 id="_resolve-merge-conflicts" data-needslink="_resolve-merge-conflicts">Resolve merge conflicts</h3> During a merge, go to the Source Control view (⌃⇧G (Windows, Linux Ctrl+Shift+G)) and make changes in the diff view. You can resolve merge conflicts with the inline CodeLens which lets you Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes. <img src="/assets/docs/getstarted/tips-and-tricks/merge-conflict.png" alt="Git merge" loading="lazy"> Learn more about <a href="/docs/sourcecontrol/overview#_merge-conflicts">resolving merge conflicts</a> in the source control documentation. <h3 id="_set-vs-code-as-default-merge-tool" data-needslink="_set-vs-code-as-default-merge-tool">Set VS Code as default merge tool</h3> <pre class="shiki" style="background-color: #1e1e1e"><code>git config --global merge.tool vscode git config --global mergetool.vscode.cmd 'code --wait $MERGED' </code></pre> <h3 id="_set-vs-code-as-default-diff-tool" data-needslink="_set-vs-code-as-default-diff-tool">Set VS Code as default diff tool</h3> <pre class="shiki" style="background-color: #1e1e1e"><code>git config --global diff.tool vscode git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE' </code></pre> <h2 id="_compare-file-with-the-clipboard" data-needslink="_compare-file-with-the-clipboard">Compare file with the clipboard</h2> Keyboard Shortcut: ⌘K C (Windows, Linux Ctrl+K C) Quickly compare the active file with the contents of the clipboard with the File: Compare Active File with Clipboard command in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). <h2 id="_debugging" data-needslink="_debugging">Debugging</h2> <h3 id="_configure-debugger" data-needslink="_configure-debugger">Configure debugger</h3> From the Run and Debug view (⇧⌘D (Windows, Linux Ctrl+Shift+D)), select create a launch.json file, which prompts you to select the environment that matches your project (Node.js, Python, C++, and more). This generates a <code>launch.json</code> file in your workspace that contains the debugger configuration. Node.js support is built-in and other environments require installing the appropriate language extensions. See the <a href="/docs/editor/debugging">debugging documentation</a> for more details. <img src="/assets/docs/getstarted/tips-and-tricks/configure-debug.png" alt="configure debugging" loading="lazy"> <h3 id="_breakpoints-and-stepping-through" data-needslink="_breakpoints-and-stepping-through">Breakpoints and stepping through</h3> Toggle a breakpoint by selecting the editor margin or by using F9 on the current line. Breakpoints in the editor margin are normally shown as red filled circles. Once a debug session starts, the Debug toolbar appears on the top of the editor and enables you to step through or into the code while debugging. Learn more about <a href="/docs/editor/debugging#_debug-actions">debug actions</a> in the debugging documentation. <img src="/assets/docs/getstarted/tips-and-tricks/node_debug.gif" alt="debug" loading="lazy"> <h3 id="_data-inspection" data-needslink="_data-inspection">Data inspection</h3> Variables can be inspected in the VARIABLES section of the Run and Debug view, by hovering over their source in the editor, or by using the debug console. <img src="/assets/docs/getstarted/tips-and-tricks/debug_data_inspection.gif" alt="data inspection" loading="lazy"> <h3 id="_logpoints" data-needslink="_logpoints">Logpoints</h3> Logpoints act much like breakpoints but instead of halting the debugger when they are hit, they log a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be modified or paused. Add a logpoint with the Add Logpoint command in the left editor gutter and it will be displayed as a "diamond" shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces ('{}'). <img src="/assets/docs/getstarted/tips-and-tricks/logpoint.png" alt="Logpoint set in the editor" loading="lazy"> <h3 id="_triggered-breakpoints" data-needslink="_triggered-breakpoints">Triggered breakpoints</h3> A triggered breakpoint is a breakpoint that is automatically enabled once another breakpoint is hit. They can be very useful when diagnosing failure cases in code that happen only after a certain precondition. Triggered breakpoints can be set by right-clicking on the glyph margin, selecting Add Triggered Breakpoint, and then choosing which other breakpoint enables the breakpoint. <video src="/assets/docs/editor/debugging/debug-triggered-breakpoint.mp4" autoplay loop controls muted></video> <h2 id="_task-runner" data-needslink="_task-runner">Task runner</h2> Tasks in VS Code can be configured to run scripts and start processes so that these tools can be used from within VS Code without having to enter a command line or write new code. <h3 id="_auto-detect-tasks" data-needslink="_auto-detect-tasks">Auto detect tasks</h3> Select Terminal from the top-level menu, run the command Configure Tasks, then select the type of task you'd like to run. This generates a <code>tasks.json</code> file with content like the following. See the <a href="/docs/editor/tasks">Tasks</a> documentation for more details. <pre class="shiki" style="background-color: #1e1e1e"><code>{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "type": "npm", "script": "install", "group": { "kind": "build", "isDefault": true } } ] } </code></pre> There are occasionally issues with auto generation. Check out the documentation for getting things to work properly. <h3 id="_run-tasks-from-the-terminal-menu" data-needslink="_run-tasks-from-the-terminal-menu">Run tasks from the Terminal menu</h3> Select Terminal from the top-level menu, run the command Run Task, and select the task you want to run. Terminate the running task by running the command Terminate Task <img src="/assets/docs/getstarted/tips-and-tricks/task_runner.gif" alt="task runner" loading="lazy"> <h3 id="_define-keyboard-shortcuts-for-tasks" data-needslink="_define-keyboard-shortcuts-for-tasks">Define keyboard shortcuts for tasks</h3> You can define a keyboard shortcut for any task. From the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)), select Preferences: Open Keyboard Shortcuts File, bind the desired shortcut to the <code>workbench.action.tasks.runTask</code> command, and define the Task as <code>args</code>. For example, to bind Ctrl+H to the <code>Run tests</code> task, add the following: <pre class="shiki" style="background-color: #1e1e1e"><code>{ "key": "ctrl+h", "command": "workbench.action.tasks.runTask", "args": "Run tests" } </code></pre> <h3 id="_run-npm-scripts-as-tasks-from-the-explorer" data-needslink="_run-npm-scripts-as-tasks-from-the-explorer">Run npm scripts as tasks from the Explorer</h3> From the Explorer view you can open a script in the editor, run it as a task, and launch it with the node debugger (when the script defines a debug option like <code>--inspect-brk</code>). The default action on click is to open the script. To run a script on a single click, set <a href="vscode://settings/npm.scriptExplorerAction" codesetting="true"></a>npm.scriptExplorerAction to <code>run</code>. Use the setting <a href="vscode://settings/npm.exclude" codesetting="true"></a>npm.exclude to exclude scripts in <code>package.json</code> files contained in particular folders. <img src="/assets/docs/getstarted/tips-and-tricks/script_explorer.png" alt="Filter problems" loading="lazy"> With the setting <a href="vscode://settings/npm.enableRunFromFolder" codesetting="true"></a>npm.enableRunFromFolder, you can enable to run npm scripts from the Explorer view context menu for a folder. The setting enables the command Run NPM Script in Folder... when a folder is selected. The command shows a Quick Pick list of the npm scripts contained in this folder and you can select the script to be executed as a task. <h2 id="_portable-mode" data-needslink="_portable-mode">Portable mode</h2> VS Code has a <a href="/docs/editor/portable">Portable mode</a> which lets you keep settings and data in the same location as your installation, for example, on a USB drive. <h2 id="_insiders-builds" data-needslink="_insiders-builds">Insiders builds</h2> The Visual Studio Code team uses the Insiders version to test the latest features and bug fixes of VS Code. You can also use the Insiders version by <a href="/insiders">downloading it here</a>. <ul> <li>For Early Adopters - Insiders has the most recent code changes for users and extension authors to try out.</li> <li>Frequent Builds - New builds every day with the latest bug fixes and features.</li> <li>Side-by-side install - Insiders installs next to the Stable build allowing you to use either independently.</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>In this article there are 16 sectionsIn this article</h4> <ul class="nav"> <li><a href="#_basics">Basics</a></li> <li><a href="#_command-line">Command line</a></li> <li><a href="#_status-bar">Status Bar</a></li> <li><a href="#_customization">Customization</a></li> <li><a href="#_extensions">Extensions</a></li> <li><a href="#_files-and-folders">Files and folders</a></li> <li><a href="#_editing-hacks">Editing hacks</a></li> <li><a href="#_intellisense">IntelliSense</a></li> <li><a href="#_snippets">Snippets</a></li> <li><a href="#_git-integration">Git integration</a></li> <li><a href="#_git-blame">Git blame</a></li> <li><a href="#_compare-file-with-the-clipboard">Compare file with the clipboard</a></li> <li><a href="#_debugging">Debugging</a></li> <li><a href="#_task-runner">Task runner</a></li> <li><a href="#_portable-mode">Portable mode</a></li> <li><a href="#_insiders-builds">Insiders builds</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 tips and tricks