How to Create and Use Custom Code Snippets in VS Code

Code snippets are templates that expand a short trigger word into a block of code. VS Code comes with built-in snippets for JavaScript, TypeScript, Markdown, and PHP. You can add your own for any language. A custom snippet saves you from typing the same boilerplate: a React component skeleton, a Python test function, a SQL query template, or a license header. For related editing features, see [how to use IntelliSense](/vscode/how-to-use-intellisense-and-code-completion-in-vs-code) and the [keyboard shortcuts cheat sheet](/vscode/vs-code-keyboard-shortcuts-cheat-sheet-for-windows-macos-and-linux). ## Create your first snippet Open the Command Palette (**Ctrl+Shift+P** / **Cmd+Shift+P**) and run **Snippets: Configure Snippets**. You see a list of language choices and the **New Global Snippets file** option. Pick a language, for example javascript.json for JavaScript snippets. VS Code opens the JSON file where your snippets live. Replace the file contents with this: { "Log to console": { "prefix": "log", "body": "console.log('$1:', $1);$0", "description": "Insert console.log with a labeled variable" } } Save the file. Open a JavaScript file, type log, and press **Tab** (or **Enter** from the suggestion list). It expands to: console.log('|:', |); The cursor sits at the first $1 position, and both occurrences are linked: typing one updates the other. Press **Tab** to jump to $0, the final position. ## How snippet fields work Each snippet has four fields: | Field | Required | Purpose | |---|---|---| | "Snippet Name" | Yes | The display name shown in the suggestion list and the Insert Snippet picker | | prefix | Yes | The trigger text. Can be a single string or an array of strings | | body | Yes | The code inserted. An array of strings, one per line | | description | No | Extra text shown in the IntelliSense suggestion | The body uses special syntax for interactive behavior: | Syntax | What it does | |---|---| | $1, $2, $3 | Tab stops in order. Press Tab to move to the next one | | $0 | Final cursor position. Always visited last | | `${1:default}` | Placeholder with default text. The text is selected on insertion | | `${1|one,two,three|}` | Dropdown choice. User picks one value | | $TM_FILENAME | Built-in variable. Inserts the current file name | ## Tab stops and placeholders This snippet creates a React function component: { "React Function Component": { "prefix": "rfc", "body": [ "export function ${1:${TM_FILENAME_BASE}}() {", " $2", " return $0;", "}" ] } } The tab stops guide you through the component in order: The component name is selected and defaulted to the filename. Type a name and both linked occurrences update at once. Press **Tab** to jump to $2, where you add any logic the component needs. Press **Tab** to reach $0, the final cursor position inside the JSX. ## Dropdown choices Use `${1|optionA,optionB,optionC|}` to let the user pick from a predefined list: { "HTTP Status": { "prefix": "status", "body": "res.status(${1|200,201,204,400,401,403,404,500|}).json({ $0 });", "description": "Express response with status code choice" } } When inserted, a dropdown appears with the status codes. Pick one and move on. ## Snippet variables VS Code provides built-in variables you can use directly in snippet bodies: | Variable | Inserts | |---|---| | $TM_SELECTED_TEXT | The currently selected text | | $TM_CURRENT_LINE | The current line | | $TM_FILENAME | The full filename | | $TM_FILENAME_BASE | Filename without extension | | $TM_DIRECTORY | The file's directory | | $TM_FILEPATH | The full file path | | $CLIPBOARD | Your clipboard contents | | $CURRENT_YEAR | Current year (2026) | | $CURRENT_MONTH | Current month (01-12) | | $CURRENT_DATE | Current day (01-31) | | $UUID | A version 4 UUID | | $LINE_COMMENT | Line comment token for the current language | | $BLOCK_COMMENT_START | Block comment start for the current language | Example: a file header comment that adapts to any language: { "File Header": { "prefix": "header", "body": [ "$BLOCK_COMMENT_START", " * $TM_FILENAME - $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE", " * $0", " $BLOCK_COMMENT_END" ] } } This inserts a block comment in JavaScript, an HTML comment in HTML, and the correct comment syntax for any language the snippet appears in. ## Scope snippets to languages and projects ### Language snippets Snippets created in javascript.json only appear when editing JavaScript files. They are the simplest to manage. ### Global snippets with scope Global snippets (files ending in .code-snippets) appear in all languages unless you add a scope property: { "Import React": { "scope": "javascript,typescript", "prefix": "imr", "body": "import React from 'react';", "description": "Import React default export" } } ### Project snippets From the **Snippets: Configure Snippets** dropdown, select **New Snippets file for ''**. The file is created in .vscode/ at your project root. Commit it to Git and your whole team gets the snippets. Project snippets are global by default. Add a scope property to limit them to specific languages. ## Assign a keyboard shortcut to a snippet Bind a keyboard shortcut to a snippet for instant insertion. Open keybindings.json and add: { "key": "ctrl+shift+l", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args": { "snippet": "console.log('$1:', $1);$0" } } This inserts the snippet without opening any picker. You can also reference an existing snippet by langId and name instead of writing the body inline. ## Find and use snippets Open the Command Palette and run **Insert Snippet**. You see every snippet available for the current language, including built-in snippets, your custom snippets, and snippets from installed extensions. To remove a snippet from the suggestion list without deleting it, click the **Hide from IntelliSense** icon next to the snippet in the Insert Snippet picker. ## Customize snippet display Two settings control how snippets appear alongside regular suggestions. Setting `editor.snippetSuggestions` to top shows snippets above other IntelliSense results. Setting `editor.tabCompletion` to onlySnippets lets Tab insert the best matching snippet directly, without opening the suggestion list first. { "editor.snippetSuggestions": "top", "editor.tabCompletion": "onlySnippets" } With tabCompletion set this way, type the snippet prefix and press Tab. The snippet expands immediately. If no snippet matches, Tab inserts normal indentation.