CINXE.COM
Snippets in Visual Studio Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="awa-expId" content="vscw_aaflight1016_control:103441;" /> <meta name="awa-env" content="prod" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="hNs7DXrTySP_X-0P_AC0WulAXvUwgSXEmgfcO2r79dw" /> <!-- Twitter and Facebook OpenGraph Metadata--> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@code" /> <meta name="description" content="It is easy to add code snippets to Visual Studio Code both for your own use or to share with others on the public Extension Marketplace. TextMate .tmSnippets files are supported." /> <meta name="keywords" content="" /> <meta name="ms.prod" content="vs-code" /> <meta name="ms.TOCTitle" content="" /> <meta name="ms.ContentId" content="79CD9B45-97FF-48B1-8DD5-2555F56206A6" /> <meta name="ms.date" content="02/06/2025" /> <meta name="ms.topic" content="conceptual" /> <!-- Twitter and Facebook OpenGraph Metadata--> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:url" content="https://code.visualstudio.com/docs/editor/userdefinedsnippets" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Snippets in Visual Studio Code" /> <meta property="og:description" content="It is easy to add code snippets to Visual Studio Code both for your own use or to share with others on the public Extension Marketplace. TextMate .tmSnippets files are supported." /> <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>Snippets in Visual Studio Code</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 > <!-- Setting theme here to avoid FOUC --> <script> function setTheme(themeName) { if (themeName === 'dark') { document.documentElement.removeAttribute('data-theme'); // dark is default, so no data-theme attribute needed } if (themeName === 'light') { document.documentElement.setAttribute('data-theme', themeName); } return; } // Determine initial theme: user preference or system preference let theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); setTheme(theme); // Apply the initial theme // Listen for changes in the system theme preference window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (!localStorage.getItem('theme')) { // Only if no user preference is saved setTheme(e.matches ? 'dark' : 'light'); } }); </script> <div id="main"> <div class="navbar-fixed-container"> <div class="navbar navbar-inverse navbar-fixed-top " data-spy="affix" data-offset-top="1"> <div id='cookie-banner'></div> <nav role="navigation" aria-label="Top Level"> <div class="container"> <div class="nav navbar-header"> <a class="navbar-brand" href="/"><span>Visual Studio Code</span></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand and Collapse Menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active" ><a id="nav-docs" href="/docs">Docs</a></li> <li ><a id="nav-updates" href="/updates">Updates</a></li> <li ><a id="nav-blogs" href="/blogs">Blog</a></li> <li ><a id="nav-extend" href="/api">API</a></li> <li><a href="https://marketplace.visualstudio.com/VSCode" target="_blank" rel="noopener" id="nav-extensions">Extensions</a></li> <li ><a id="nav-faqs" href="/docs/supporting/faq">FAQ</a></li> <li class='search visible-xs visible-sm' ><a href="/Search">Search</a></li> <li ><a id="nav-copilot" href="/docs/copilot/overview">GitHub Copilot</a></li> </ul> </ul> <ul class="nav navbar-nav navbar-right" role="presentation"> <li> <button type="button" class="theme-switch" id="theme-toggle"> <img class="theme-icon-light" src="/assets/icons/theme-light.svg" alt="Switch to the dark theme" /> <img class="theme-icon-dark" src="/assets/icons/theme-dark.svg" alt="Switch to the light theme" /> </button> </li> <li> <a href="/Search" title="Search" class="btn search-btn" id="nav-search"> <img class="search-icon-light" src="/assets/icons/search.svg" width="16px" height="16px" alt="Search" /> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" width="16px" height="16px" alt="Search" /> </a> </li> <li class="search" role="presentation"> <form class="nav-search search-form" role="search" aria-label="Search"> <div class="input-group" role="presentation"> <input type="text" name="q" class="search-box form-control" placeholder="Search Docs" aria-label="Search text"/> <span class="input-group-btn"> <button tabindex="0" class="btn" type="submit" aria-label="Search"> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" alt="Search" /> <img class="search-icon-light" src="/assets/icons/search.svg" alt="Search" /> </button> </span> </div> </form> </li> <!-- this was hiden in the home and download page, keeping it for now --> <li><a class="link-button" href="/Download" id="nav-download"> <span>Download</span></a></li> </ul> </div> </div> </nav> </div> </div> <div class="updates-banner "> <div class="container"> <p class="message">馃殌 Get <a class="copilot-deep-link" href="vscode://github.copilot-chat?referrer=vscode-updatebanner" id="banner-link-updates" rel="noopener">GitHub Copilot Free</a> in VS Code!</p> </div> <div tabindex="0" role="button" title="Dismiss this update" class="dismiss-btn" id="banner-dismiss-btn"><span class="sr-only">Dismiss this update</span><span aria-hidden="true" class="glyph-icon"></span></div> </div> <!-- This div wraps around the entire site --> <!-- The body itself should already have a main tag --> <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"> <!-- left nav --> <div class="col-xs-12 col-md-2 docs-navbar-container"> <nav id="docs-navbar" aria-label="Topics" class="docs-nav visible-md visible-lg"> <ul class="nav" id="main-nav"> <li > <a class="docs-home" href="/docs" >Overview</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#setup-articles" data-parent="#main-nav" data-toggle="collapse">Setup</a> <ul id="setup-articles" class="collapse "> <li > <a href="/docs/setup/setup-overview" >Overview</a> </li> <li > <a href="/docs/setup/linux" >Linux</a> </li> <li > <a href="/docs/setup/mac" >macOS</a> </li> <li > <a href="/docs/setup/windows" >Windows</a> </li> <li > <a href="/docs/setup/raspberry-pi" >Raspberry Pi</a> </li> <li > <a href="/docs/setup/network" >Network</a> </li> <li > <a href="/docs/setup/additional-components" >Additional Components</a> </li> <li > <a href="/docs/setup/enterprise" >Enterprise</a> </li> <li > <a href="/docs/setup/uninstall" >Uninstall</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#getstarted-articles" data-parent="#main-nav" data-toggle="collapse">Getting Started</a> <ul id="getstarted-articles" class="collapse "> <li > <a href="/docs/getstarted/getting-started" >Tutorial</a> </li> <li > <a href="/docs/getstarted/copilot-quickstart" >Copilot Quickstart</a> </li> <li > <a href="/docs/getstarted/introvideos" >Intro Videos</a> </li> <li > <a href="/docs/getstarted/userinterface" >User Interface</a> </li> <li > <a href="/docs/getstarted/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/getstarted/themes" >Themes</a> </li> <li > <a href="/docs/getstarted/settings" >Settings</a> </li> <li > <a href="/docs/getstarted/keybindings" >Keyboard Shortcuts</a> </li> <li > <a href="/docs/getstarted/locales" >Display Language</a> </li> <li > <a href="/docs/getstarted/telemetry" >Telemetry</a> </li> </ul> </li> <li class="panel active expanded"> <a class="area" role="button" href="#editor-articles" data-parent="#main-nav" data-toggle="collapse">User Guide</a> <ul id="editor-articles" class="collapse in"> <li > <a href="/docs/editor/codebasics" >Basic Editing</a> </li> <li > <a href="/docs/editor/extension-marketplace" >Extension Marketplace</a> </li> <li > <a href="/docs/editor/extension-runtime-security" >Extension Runtime Security</a> </li> <li > <a href="/docs/editor/intellisense" >IntelliSense</a> </li> <li > <a href="/docs/editor/editingevolved" >Code Navigation</a> </li> <li > <a href="/docs/editor/refactoring" >Refactoring</a> </li> <li > <a href="/docs/editor/debugging" >Debugging</a> </li> <li > <a href="/docs/editor/testing" >Testing</a> </li> <li > <a href="/docs/editor/vscode-web" >VS Code for the Web</a> </li> <li > <a href="/docs/editor/tasks" >Tasks</a> </li> <li > <a href="/docs/editor/profiles" >Profiles</a> </li> <li > <a href="/docs/editor/settings-sync" >Settings Sync</a> </li> <li class="active"> <a href="/docs/editor/userdefinedsnippets" aria-label="Current Page: Snippets">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> </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 > <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> </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" >Tutorial</option> <option value="/docs/getstarted/copilot-quickstart" >Copilot Quickstart</option> <option value="/docs/getstarted/introvideos" >Intro Videos</option> <option value="/docs/getstarted/userinterface" >User Interface</option> <option value="/docs/getstarted/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/getstarted/themes" >Themes</option> <option value="/docs/getstarted/settings" >Settings</option> <option value="/docs/getstarted/keybindings" >Keyboard Shortcuts</option> <option value="/docs/getstarted/locales" >Display Language</option> <option value="/docs/getstarted/telemetry" >Telemetry</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/testing" >Testing</option> <option value="/docs/editor/vscode-web" >VS Code for the Web</option> <option value="/docs/editor/tasks" >Tasks</option> <option value="/docs/editor/profiles" >Profiles</option> <option value="/docs/editor/settings-sync" >Settings Sync</option> <option value="/docs/editor/userdefinedsnippets" selected>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> </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> <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> </select> </nav> </div> <!-- small right nav --> <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="#_builtin-snippets">Built-in snippets</option> <option value="#_install-snippets-from-the-marketplace">Install snippets from the Marketplace</option> <option value="#_create-your-own-snippets">Create your own snippets</option> <option value="#_snippet-scope">Snippet scope</option> <option value="#_snippet-syntax">Snippet syntax</option> <option value="#_using-textmate-snippets">Using TextMate snippets</option> <option value="#_assign-keyboard-shortcuts-to-snippets">Assign keyboard shortcuts to snippets</option> <option value="#_next-steps">Next steps</option> <option value="#_common-questions">Common questions</option> </select> </nav> </div> <!-- main content --> <main class="col-xs-12 col-sm-9 col-md-8 body"> <div class="edit-github pull-right"> <a href="https://vscode.dev/github/microsoft/vscode-docs/blob/main/docs/editor/userdefinedsnippets.md" class="btn btn-default" title="Edit this document in vscode.dev"> <span class="glyphicon glyphicon-pencil"></span> <span class="hidden-xs">Edit</span> </a> </div> <h1>Snippets in Visual Studio Code</h1> <p>Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.</p> <p>In Visual Studio Code, snippets appear in IntelliSense (<span class="dynamic-keybinding" data-commandId="editor.action.triggerSuggest" data-osx="鈱僑pace" data-win="Ctrl+Space" data-linux="Ctrl+Space"><span class="keybinding">鈱僑pace</span> (Windows, Linux <span class="keybinding">Ctrl+Space</span>)</span>) mixed with other suggestions, as well as in a dedicated snippet picker (<strong>Insert Snippet</strong> in the Command Palette). There is also support for tab-completion: Enable it with <code>"editor.tabCompletion": "on"</code>, type a <strong>snippet prefix</strong> (trigger text), and press <span class="dynamic-keybinding" data-commandId="insertSnippet" data-osx="Tab" data-win="Tab" data-linux="Tab"><span class="keybinding">Tab</span></span> to insert a snippet.</p> <p>The snippet syntax follows the <a href="https://manual.macromates.com/en/snippets" class="external-link" target="_blank">TextMate snippet syntax</a> with the exceptions of 'interpolated shell code' and the use of <code>\u</code>; both are not supported.</p> <p><img src="/assets/docs/editor/userdefinedsnippets/ajax-snippet.gif" alt="ajax snippet" loading="lazy"></p> <h2 id="_builtin-snippets" data-needslink="_builtin-snippets">Built-in snippets</h2> <p>VS Code has built-in snippets for a number of languages such as: JavaScript, TypeScript, Markdown, and PHP.</p> <p><img src="/assets/docs/editor/userdefinedsnippets/builtin-javascript-snippets.png" alt="builtin javascript snippet" loading="lazy"></p> <p>You can see the available snippets for a language by running the <strong>Insert Snippet</strong> command in the Command Palette to get a list of the snippets for the language of the current file. However, keep in mind that this list also includes user snippets that you have defined, and any snippets provided by extensions you have installed.</p> <h2 id="_install-snippets-from-the-marketplace" data-needslink="_install-snippets-from-the-marketplace">Install snippets from the Marketplace</h2> <p>Many <a href="/docs/editor/extension-marketplace">extensions</a> on the <a href="https://marketplace.visualstudio.com/vscode" class="external-link" target="_blank">VS Code Marketplace</a> include snippets. You can search for extensions that contains snippets in the Extensions view (<span class="dynamic-keybinding" data-commandId="workbench.view.extensions" data-osx="鈬р寴X" data-win="Ctrl+Shift+X" data-linux="Ctrl+Shift+X"><span class="keybinding">鈬р寴X</span> (Windows, Linux <span class="keybinding">Ctrl+Shift+X</span>)</span>) using the <code>@category:"snippets"</code> filter.</p> <p><img src="/assets/docs/editor/userdefinedsnippets/category-snippets.png" alt="Searching for extensions with snippets" loading="lazy"></p> <p>If you find an extension you want to use, install it, then restart VS Code and the new snippets will be available.</p> <h2 id="_create-your-own-snippets" data-needslink="_create-your-own-snippets">Create your own snippets</h2> <p>You can easily define your own snippets without any extension. To create or edit your own snippets, select <strong>Configure Snippets</strong> under <span class="filePreferencesPath"><strong>File</strong> > <strong>Preferences</strong></span>, and then select the language (by <a href="/docs/languages/identifiers">language identifier</a>) for which the snippets should appear, or the <strong>New Global Snippets file</strong> option if they should appear for all languages. VS Code manages the creation and refreshing of the underlying snippets file(s) for you.</p> <p><img src="/assets/docs/editor/userdefinedsnippets/snippet-dropdown.png" alt="snippet dropdown" loading="lazy"></p> <p>Snippets files are written in JSON, support C-style comments, and can define an unlimited number of snippets. Snippets support most TextMate syntax for dynamic behavior, intelligently format whitespace based on the insertion context, and allow easy multiline editing.</p> <p>Below is an example of a <code>for</code> loop snippet for JavaScript:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #6A9955">// in file 'Code/User/snippets/javascript.json'</span></span> <span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"For Loop"</span><span style="color: #BBBBBB">: {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"prefix"</span><span style="color: #BBBBBB">: [</span><span style="color: #CE9178">"for"</span><span style="color: #BBBBBB">, </span><span style="color: #CE9178">"for-const"</span><span style="color: #BBBBBB">],</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"body"</span><span style="color: #BBBBBB">: [</span><span style="color: #CE9178">"for (const ${2:element} of ${1:array}) {"</span><span style="color: #BBBBBB">, </span><span style="color: #CE9178">"</span><span style="color: #D7BA7D">\t</span><span style="color: #CE9178">$0"</span><span style="color: #BBBBBB">, </span><span style="color: #CE9178">"}"</span><span style="color: #BBBBBB">],</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"description"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"A for loop."</span></span> <span class="line"><span style="color: #BBBBBB"> }</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>In the example above:</p> <ul> <li>"For Loop" is the snippet name. It is displayed via IntelliSense if no <code>description</code> is provided.</li> <li><code>prefix</code> defines one or more trigger words that display the snippet in IntelliSense. Substring matching is performed on prefixes, so in this case, "fc" could match "for-const".</li> <li><code>body</code> is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted.</li> <li><code>description</code> is an optional description of the snippet displayed by IntelliSense.</li> </ul> <p>Additionally, the <code>body</code> of the example above has three placeholders (listed in order of traversal): <code>${1:array}</code>, <code>${2:element}</code>, and <code>$0</code>. You can quickly jump to the next placeholder with <span class="dynamic-keybinding" data-commandId="jumpToNextSnippetPlaceholder" data-osx="Tab" data-win="Tab" data-linux="Tab"><span class="keybinding">Tab</span></span>, at which point you may edit the placeholder or jump to the next one. The string after the colon <code>:</code> (if any) is the default text, for example <code>element</code> in <code>${2:element}</code>. Placeholder traversal order is ascending by number, starting from one; zero is an optional special case that always comes last, and exits snippet mode with the cursor at the specified position.</p> <h3 id="_file-template-snippets" data-needslink="_file-template-snippets">File template snippets</h3> <p>You can add the <code>isFileTemplate</code> attribute to your snippet's definition if the snippet is intended to populate or replace a file's contents. File template snippets are displayed in a dropdown when you run the <strong>Snippets: Populate File from Snippet</strong> command in a new or existing file.</p> <h2 id="_snippet-scope" data-needslink="_snippet-scope">Snippet scope</h2> <p>Snippets are scoped so that only relevant snippets are suggested. Snippets can be scoped by either:</p> <ol> <li>the <strong>language(s)</strong> to which snippets are scoped (possibly all)</li> <li>the <strong>project(s)</strong> to which snippets are scoped (probably all)</li> </ol> <h3 id="_language-snippet-scope" data-needslink="_language-snippet-scope">Language snippet scope</h3> <p>Every snippet is scoped to one, several, or all ("global") languages based on whether it is defined in:</p> <ol> <li>a <strong>language</strong> snippet file</li> <li>a <strong>global</strong> snippet file</li> </ol> <p>Single-language user-defined snippets are defined in a specific language's snippet file (for example <code>javascript.json</code>), which you can access by language identifier through <strong>Snippets: Configure Snippets</strong>. A snippet is only accessible when editing the language for which it is defined.</p> <p>Multi-language and global user-defined snippets are all defined in "global" snippet files (JSON with the file suffix <code>.code-snippets</code>), which is also accessible through <strong>Snippets: Configure Snippets</strong>. In a global snippets file, a snippet definition may have an additional <code>scope</code> property that takes one or more <a href="/docs/languages/identifiers">language identifiers</a>, which makes the snippet available only for those specified languages. If no <code>scope</code> property is given, then the global snippet is available in <strong>all</strong> languages.</p> <p>Most user-defined snippets are scoped to a single language, and so are defined in a language-specific snippet file.</p> <h3 id="_project-snippet-scope" data-needslink="_project-snippet-scope">Project snippet scope</h3> <p>You can also have a global snippets file (JSON with file suffix <code>.code-snippets</code>) scoped to your project. Project-folder snippets are created with the <strong>New Snippets file for '<folder-name>'...</strong> option in the <strong>Snippets: Configure Snippets</strong> dropdown menu and are located at the root of the project in a <code>.vscode</code> folder. Project snippet files are useful for sharing snippets with all users working in that project. Project-folder snippets are similar to global snippets and can be scoped to specific languages through the <code>scope</code> property.</p> <h2 id="_snippet-syntax" data-needslink="_snippet-syntax">Snippet syntax</h2> <p>The <code>body</code> of a snippet can use special constructs to control cursors and the text being inserted. The following are supported features and their syntaxes:</p> <h3 id="_tabstops" data-needslink="_tabstops">Tabstops</h3> <p>With tabstops, you can make the editor cursor move inside a snippet. Use <code>$1</code>, <code>$2</code> to specify cursor locations. The number is the order in which tabstops will be visited, whereas <code>$0</code> denotes the final cursor position. Multiple occurrences of the same tabstop are linked and updated in sync.</p> <h3 id="_placeholders" data-needslink="_placeholders">Placeholders</h3> <p>Placeholders are tabstops with values, like <code>${1:foo}</code>. The placeholder text will be inserted and selected such that it can be easily changed. Placeholders can be nested, like <code>${1:another ${2:placeholder}}</code>.</p> <h3 id="_choice" data-needslink="_choice">Choice</h3> <p>Placeholders can have choices as values. The syntax is a comma-separated enumeration of values, enclosed with the pipe-character, for example <code>${1|one,two,three|}</code>. When the snippet is inserted and the placeholder selected, choices will prompt the user to pick one of the values.</p> <h3 id="_variables" data-needslink="_variables">Variables</h3> <p>With <code>$name</code> or <code>${name:default}</code>, you can insert the value of a variable. When a variable isn't set, its <strong>default</strong> or the empty string is inserted. When a variable is unknown (that is, its name isn't defined) the name of the variable is inserted and it is transformed into a placeholder.</p> <p>The following variables can be used:</p> <ul> <li><code>TM_SELECTED_TEXT</code> The currently selected text or the empty string</li> <li><code>TM_CURRENT_LINE</code> The contents of the current line</li> <li><code>TM_CURRENT_WORD</code> The contents of the word under cursor or the empty string</li> <li><code>TM_LINE_INDEX</code> The zero-index based line number</li> <li><code>TM_LINE_NUMBER</code> The one-index based line number</li> <li><code>TM_FILENAME</code> The filename of the current document</li> <li><code>TM_FILENAME_BASE</code> The filename of the current document without its extensions</li> <li><code>TM_DIRECTORY</code> The directory of the current document</li> <li><code>TM_FILEPATH</code> The full file path of the current document</li> <li><code>RELATIVE_FILEPATH</code> The relative (to the opened workspace or folder) file path of the current document</li> <li><code>CLIPBOARD</code> The contents of your clipboard</li> <li><code>WORKSPACE_NAME</code> The name of the opened workspace or folder</li> <li><code>WORKSPACE_FOLDER</code> The path of the opened workspace or folder</li> <li><code>CURSOR_INDEX</code> The zero-index based cursor number</li> <li><code>CURSOR_NUMBER</code> The one-index based cursor number</li> </ul> <p>For inserting the current date and time:</p> <ul> <li><code>CURRENT_YEAR</code> The current year</li> <li><code>CURRENT_YEAR_SHORT</code> The current year's last two digits</li> <li><code>CURRENT_MONTH</code> The month as two digits (example '02')</li> <li><code>CURRENT_MONTH_NAME</code> The full name of the month (example 'July')</li> <li><code>CURRENT_MONTH_NAME_SHORT</code> The short name of the month (example 'Jul')</li> <li><code>CURRENT_DATE</code> The day of the month as two digits (example '08')</li> <li><code>CURRENT_DAY_NAME</code> The name of day (example 'Monday')</li> <li><code>CURRENT_DAY_NAME_SHORT</code> The short name of the day (example 'Mon')</li> <li><code>CURRENT_HOUR</code> The current hour in 24-hour clock format</li> <li><code>CURRENT_MINUTE</code> The current minute as two digits</li> <li><code>CURRENT_SECOND</code> The current second as two digits</li> <li><code>CURRENT_SECONDS_UNIX</code> The number of seconds since the Unix epoch</li> <li><code>CURRENT_TIMEZONE_OFFSET</code> The current UTC time zone offset as <code>+HH:MM</code> or <code>-HH:MM</code> (example <code>-07:00</code>).</li> </ul> <p>For inserting random values:</p> <ul> <li><code>RANDOM</code> 6 random Base-10 digits</li> <li><code>RANDOM_HEX</code> 6 random Base-16 digits</li> <li><code>UUID</code> A Version 4 UUID</li> </ul> <p>For inserting line or block comments, honoring the current language:</p> <ul> <li><code>BLOCK_COMMENT_START</code> Example output: in PHP <code>/*</code> or in HTML <code><!--</code></li> <li><code>BLOCK_COMMENT_END</code> Example output: in PHP <code>*/</code> or in HTML <code>--></code></li> <li><code>LINE_COMMENT</code> Example output: in PHP <code>//</code></li> </ul> <p>The snippet below inserts <code>/* Hello World */</code> in JavaScript files and <code><!-- Hello World --></code> in HTML files:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"hello"</span><span style="color: #BBBBBB">: {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"scope"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"javascript,html"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"prefix"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"hello"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"body"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"</span></span> <span class="line"><span style="color: #BBBBBB"> }</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <h3 id="_variable-transforms" data-needslink="_variable-transforms">Variable transforms</h3> <p>Transformations allow you to modify the value of a variable before it is inserted. The definition of a transformation consists of three parts:</p> <ol> <li>A regular expression that is matched against the value of a variable, or the empty string when the variable cannot be resolved.</li> <li>A "format string" that allows to reference matching groups from the regular expression. The format string allows for conditional inserts and simple modifications.</li> <li>Options that are passed to the regular expression.</li> </ol> <p>The following example inserts the name of the current file without its ending, so from <code>foo.txt</code> it makes <code>foo</code>.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #bbbbbb">${TM_FILENAME/(.*)\\..+$/$1/}</span></span> <span class="line"><span style="color: #bbbbbb"> | | | |</span></span> <span class="line"><span style="color: #bbbbbb"> | | | |-> no options</span></span> <span class="line"><span style="color: #bbbbbb"> | | |</span></span> <span class="line"><span style="color: #bbbbbb"> | | |-> references the contents of the first</span></span> <span class="line"><span style="color: #bbbbbb"> | | capture group</span></span> <span class="line"><span style="color: #bbbbbb"> | |</span></span> <span class="line"><span style="color: #bbbbbb"> | |-> regex to capture everything before</span></span> <span class="line"><span style="color: #bbbbbb"> | the final `.suffix`</span></span> <span class="line"><span style="color: #bbbbbb"> |</span></span> <span class="line"><span style="color: #bbbbbb"> |-> resolves to the filename</span></span> <span class="line"><span style="color: #bbbbbb"></span></span></code></pre> <h3 id="_placeholdertransform" data-needslink="_placeholdertransform">Placeholder-Transform</h3> <p>Like a Variable-Transform, a transformation of a placeholder allows changing the inserted text for the placeholder when moving to the next tab stop. The inserted text is matched with the regular expression and the match or matches - depending on the options - are replaced with the specified replacement format text. Every occurrence of a placeholder can define its own transformation independently using the value of the first placeholder. The format for Placeholder-Transforms is the same as for Variable-Transforms.</p> <h3 id="_transform-examples" data-needslink="_transform-examples">Transform examples</h3> <p>The examples are shown within double quotes, as they would appear inside a snippet body, to illustrate the need to double escape certain characters. Sample transformations and the resulting output for the filename <code>example-123.456-TEST.js</code>.</p> <table class="table table-striped"> <thead> <tr> <th>Example</th> <th>Output</th> <th>Explanation</th> </tr> </thead> <tbody> <tr> <td><code>"${TM_FILENAME/[\\.]/_/}"</code></td> <td><code>example-123_456-TEST.js</code></td> <td>Replace the first <code>.</code> with <code>_</code></td> </tr> <tr> <td><code>"${TM_FILENAME/[\\.-]/_/g}"</code></td> <td><code>example_123_456_TEST_js</code></td> <td>Replace each <code>.</code> or <code>-</code> with <code>_</code></td> </tr> <tr> <td><code>"${TM_FILENAME/(.*)/${1:/upcase}/}"</code></td> <td><code>EXAMPLE-123.456-TEST.JS</code></td> <td>Change to all uppercase</td> </tr> <tr> <td><code>"${TM_FILENAME/[^0-9a-z]//gi}"</code></td> <td><code>example123456TESTjs</code></td> <td>Remove non-alphanumeric characters</td> </tr> </tbody> </table> <h3 id="_grammar" data-needslink="_grammar">Grammar</h3> <p>Below is the EBNF (<a href="https://en.wikipedia.org/wiki/Extended_Backus-Naur_form" class="external-link" target="_blank">extended Backus-Naur form</a>) for snippets. With <code>\</code> (backslash), you can escape <code>$</code>, <code>}</code>, and <code>\</code>. Within choice elements, the backslash also escapes comma and pipe characters. Only the characters required to be escaped can be escaped, so <code>$</code> should not be escaped within these constructs and neither <code>$</code> or <code>}</code> should be escaped inside choice constructs.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #bbbbbb">any ::= tabstop | placeholder | choice | variable | text</span></span> <span class="line"><span style="color: #bbbbbb">tabstop ::= '$' int</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' int '}'</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' int transform '}'</span></span> <span class="line"><span style="color: #bbbbbb">placeholder ::= '${' int ':' any '}'</span></span> <span class="line"><span style="color: #bbbbbb">choice ::= '${' int '|' text (',' text)* '|}'</span></span> <span class="line"><span style="color: #bbbbbb">variable ::= '$' var | '${' var '}'</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' var ':' any '}'</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' var transform '}'</span></span> <span class="line"><span style="color: #bbbbbb">transform ::= '/' regex '/' (format | text)+ '/' options</span></span> <span class="line"><span style="color: #bbbbbb">format ::= '$' int | '${' int '}'</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' int ':' '/upcase' | '/downcase' | '/capitalize' | '/camelcase' | '/pascalcase' '}'</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' int ':+' if '}'</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' int ':?' if ':' else '}'</span></span> <span class="line"><span style="color: #bbbbbb"> | '${' int ':-' else '}' | '${' int ':' else '}'</span></span> <span class="line"><span style="color: #bbbbbb">regex ::= JavaScript Regular Expression value (ctor-string)</span></span> <span class="line"><span style="color: #bbbbbb">options ::= JavaScript Regular Expression option (ctor-options)</span></span> <span class="line"><span style="color: #bbbbbb">var ::= [_a-zA-Z] [_a-zA-Z0-9]*</span></span> <span class="line"><span style="color: #bbbbbb">int ::= [0-9]+</span></span> <span class="line"><span style="color: #bbbbbb">text ::= .*</span></span> <span class="line"><span style="color: #bbbbbb">if ::= text</span></span> <span class="line"><span style="color: #bbbbbb">else ::= text</span></span> <span class="line"><span style="color: #bbbbbb"></span></span></code></pre> <h2 id="_using-textmate-snippets" data-needslink="_using-textmate-snippets">Using TextMate snippets</h2> <p>You can also use existing TextMate snippets (.tmSnippets) with VS Code. See the <a href="/api/language-extensions/snippet-guide#_using-textmate-snippets">Using TextMate Snippets</a> topic in our Extension API section to learn more.</p> <h2 id="_assign-keyboard-shortcuts-to-snippets" data-needslink="_assign-keyboard-shortcuts-to-snippets">Assign keyboard shortcuts to snippets</h2> <p>You can create custom <a href="/docs/getstarted/keybindings">keyboard shortcuts</a> to insert specific snippets. Open <code>keybindings.json</code> (<strong>Preferences: Open Keyboard Shortcuts File</strong>), which defines all your keyboard shortcuts, and add a keyboard shortcut passing <code>"snippet"</code> as an extra argument:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"key"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"cmd+k 1"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"command"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"editor.action.insertSnippet"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"when"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"editorTextFocus"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"args"</span><span style="color: #BBBBBB">: {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"snippet"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"console.log($1)$0"</span></span> <span class="line"><span style="color: #BBBBBB"> }</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <p>The keyboard shortcut will invoke the <strong>Insert Snippet</strong> command but instead of prompting you to select a snippet, it will insert the provided snippet. You define the custom <a href="/docs/getstarted/keybindings">keybinding</a> as usual with a keyboard shortcut, command ID, and optional <a href="/docs/getstarted/keybindings#_when-clause-contexts">when clause context</a> for when the keyboard shortcut is enabled.</p> <p>Also, instead of using the <code>snippet</code> argument value to define your snippet inline, you can reference an existing snippet by using the <code>langId</code> and <code>name</code> arguments. The <code>langId</code> argument selects the language for which the snippet denoted by <code>name</code> is inserted, e.g the sample below selects the <code>myFavSnippet</code> that's available for <code>csharp</code>-files.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #BBBBBB">{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"key"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"cmd+k 1"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"command"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"editor.action.insertSnippet"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"when"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"editorTextFocus"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"args"</span><span style="color: #BBBBBB">: {</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"langId"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"csharp"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"name"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"myFavSnippet"</span></span> <span class="line"><span style="color: #BBBBBB"> }</span></span> <span class="line"><span style="color: #BBBBBB">}</span></span> <span class="line"></span></code></pre> <h2 id="_next-steps" data-needslink="_next-steps">Next steps</h2> <ul> <li><a href="/docs/editor/command-line">Command Line</a> - VS Code has a rich command-line interface to open or diff files and install extensions.</li> <li><a href="/api">Extension API</a> - Learn about other ways to extend VS Code.</li> <li><a href="/api/language-extensions/snippet-guide">Snippet Guide</a> - You can package snippets for use in VS Code.</li> </ul> <h2 id="_common-questions" data-needslink="_common-questions">Common questions</h2> <h3 id="_what-if-i-want-to-use-existing-textmate-snippets-from-a-tmsnippet-file" data-needslink="_what-if-i-want-to-use-existing-textmate-snippets-from-a-tmsnippet-file">What if I want to use existing TextMate snippets from a .tmSnippet file?</h3> <p>You can easily package TextMate snippets files for use in VS Code. See <a href="/api/language-extensions/snippet-guide#_using-textmate-snippets">Using TextMate Snippets</a> in our Extension API documentation.</p> <h3 id="_how-do-i-have-a-snippet-place-a-variable-in-the-pasted-script" data-needslink="_how-do-i-have-a-snippet-place-a-variable-in-the-pasted-script">How do I have a snippet place a variable in the pasted script?</h3> <p>To have a variable in the pasted script, you need to escape the '$' of the <code>$variable</code> name so that it isn't parsed by the snippet expansion phase.</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #CE9178">"VariableSnippet"</span><span style="color: #BBBBBB">:{</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"prefix"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"_Var"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"body"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"</span><span style="color: #D7BA7D">\\</span><span style="color: #CE9178">$MyVar = 2"</span><span style="color: #BBBBBB">,</span></span> <span class="line"><span style="color: #BBBBBB"> </span><span style="color: #9CDCFE">"description"</span><span style="color: #BBBBBB">: </span><span style="color: #CE9178">"A basic snippet that places a variable into script with the $ prefix"</span></span> <span class="line"><span style="color: #BBBBBB"> }</span></span> <span class="line"></span></code></pre> <p>This results in the pasted snippet as:</p> <pre class="shiki" style="background-color: #1e1e1e"><code><span class="line"><span style="color: #bbbbbb">$MyVar = 2</span></span> <span class="line"><span style="color: #bbbbbb"></span></span></code></pre> <h3 id="_can-i-remove-snippets-from-intellisense" data-needslink="_can-i-remove-snippets-from-intellisense">Can I remove snippets from IntelliSense?</h3> <p>Yes, you can hide specific snippets from showing in IntelliSense (completion list) by selecting the <strong>Hide from IntelliSense</strong> button to the right of snippet items in the <strong>Insert Snippet</strong> command dropdown.</p> <p><img src="/assets/docs/editor/userdefinedsnippets/hide-from-intellisense.png" alt="Hide from IntelliSense button in Insert Snippet dropdown" loading="lazy"></p> <p>You can still select the snippet with the <strong>Insert Snippet</strong> command but the hidden snippet won't be displayed in IntelliSense.</p> <div class="feedback"></div> <div class="body-footer">02/06/2025</div> </main> <!-- medium right nav --> <div class="col-sm-3 col-md-2 hidden-xs docs-subnavbar-container"> <nav id="docs-subnavbar" aria-label="On Page" data-spy="affix" data-offset-top="20"> <h4><span class="sr-only">In this article there are 9 sections</span><span aria-hidden="true">In this article</span></h4> <ul class="nav"> <li><a href="#_builtin-snippets">Built-in snippets</a></li> <li><a href="#_install-snippets-from-the-marketplace">Install snippets from the Marketplace</a></li> <li><a href="#_create-your-own-snippets">Create your own snippets</a></li> <li><a href="#_snippet-scope">Snippet scope</a></li> <li><a href="#_snippet-syntax">Snippet syntax</a></li> <li><a href="#_using-textmate-snippets">Using TextMate snippets</a></li> <li><a href="#_assign-keyboard-shortcuts-to-snippets">Assign keyboard shortcuts to snippets</a></li> <li><a href="#_next-steps">Next steps</a></li> <li><a href="#_common-questions">Common questions</a></li> </ul> <div class="connect-widget"></div> </nav> </div> <!-- end of page connect widget --> <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>