Skip to main content
Snippets are templates that make it easier to enter repeating code patterns. VS Code includes built-in snippets for many languages and supports custom user-defined snippets.

​
Using Built-in Snippets

VS Code comes with many built-in snippets for popular languages:
1

Start Typing

Begin typing a snippet prefix in your editor. For example, type for in a JavaScript file.
2

View Suggestions

IntelliSense will show available snippets. Snippet suggestions are marked with a special icon.
3

Insert Snippet

Press Tab or Enter to insert the snippet. Use Tab to jump between placeholders.

​
Viewing Available Snippets

To see all available snippets for the current language:
  1. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
  2. Type “Insert Snippet”
  3. Browse the list of available snippets

​
Built-in Snippet Examples

Here are some built-in snippets from VS Code:

​
JavaScript Snippets

for (let index = 0; index < array.length; index++) {
	const element = array[index];
	
}

​
TypeScript Snippets

public get value() : string {
	return 
}

​
HTML Snippets

html document (prefix: html or !)
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>title</title>
</head>
<body>
	
</body>
</html>

​
Creating Custom Snippets

You can create your own snippets for any language:
1

Open Snippets File

Open Command Palette and type “Configure User Snippets” or “Configure Snippets”Choose:
  • New Global Snippets file - Available in all projects
  • New Snippets file for ‘[Language]’ - Language-specific
  • [Language].json - Edit existing language snippets
2

Define Snippet

Add your snippet definition in JSON format
3

Use Snippet

Start typing the prefix to use your new snippet

​
Snippet Syntax

Snippets are defined in JSON with the following structure:
javascript.json
{
  "Snippet Name": {
    "prefix": "trigger",
    "body": [
      "line 1",
      "line 2"
    ],
    "description": "Description shown in IntelliSense"
  }
}

​
Basic Example

javascript.json
{
  "Console Log": {
    "prefix": "log",
    "body": [
      "console.log($1);",
      "$0"
    ],
    "description": "Log to the console"
  }
}

​
Snippet Features

​
Tabstops

Tabstops allow you to move the cursor through snippet fields: 
{
  "For Loop": {
    "prefix": "for",
    "body": [
      "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
      "\tconst ${3:element} = ${2:array}[${1:index}];",
      "\t$0",
      "}"
    ],
    "description": "For Loop"
  }
}
  • $1, $2, $3 - Tab stops in order
  • $0 - Final cursor position
  • ${1:index} - Placeholder with default text
Using the same number (like ${1:index}) in multiple places will update all occurrences simultaneously as you type.

​
Placeholders

Placeholders provide default values: 
{
  "React Component": {
    "prefix": "rfc",
    "body": [
      "function ${1:ComponentName}() {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t);",
      "}",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React functional component"
  }
}

​
Choice

Provide a dropdown of choices: 
{
  "Console Method": {
    "prefix": "cons",
    "body": [
      "console.${1|log,warn,error,info|}($2);",
      "$0"
    ],
    "description": "Console with method choice"
  }
}

​
Variables

Snippets can use predefined variables: 
{
  "File Header": {
    "prefix": "header",
    "body": [
      "/*",
      " * File: $TM_FILENAME",
      " * Project: $TM_DIRECTORY",
      " * Created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      " * Author: $1",
      " */",
      "$0"
    ],
    "description": "File header comment"
  }
}
Common variables:
  • $TM_FILENAME - Current file name
  • $TM_FILENAME_BASE - File name without extension
  • $TM_DIRECTORY - Current directory
  • $TM_FILEPATH - Full file path
  • $CLIPBOARD - Clipboard contents
  • $CURRENT_YEAR - Current year
  • $CURRENT_MONTH - Month as two digits
  • $CURRENT_DATE - Day of month
  • $CURRENT_HOUR - Hour in 24-hour format
  • $CURRENT_MINUTE - Current minute
  • $CURRENT_SECOND - Current second
  • $BLOCK_COMMENT_START - Language-specific block comment start
  • $BLOCK_COMMENT_END - Language-specific block comment end
  • $LINE_COMMENT - Language-specific line comment

​
Variable Transformations

Transform variable values: 
{
  "Class from Filename": {
    "prefix": "class",
    "body": [
      "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} {",
      "\tconstructor($1) {",
      "\t\t$0",
      "\t}",
      "}"
    ],
    "description": "Class named after file"
  }
}

​
Multi-Language Snippets

Global snippets files (.code-snippets) can define snippets for multiple languages:
my-snippets.code-snippets
{
  "Arrow Function": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "af",
    "body": [
      "const ${1:functionName} = (${2:params}) => {",
      "\t$0",
      "};"
    ],
    "description": "Arrow function"
  }
}

​
Advanced Snippet Examples

​
Try-Catch with Error Handling

javascript.json
{
  "Try-Catch Statement": {
    "prefix": "trycatch",
    "body": [
      "try {",
      "\t$TM_SELECTED_TEXT$0",
      "} catch (${1:error}) {",
      "\tconsole.error(${1:error});",
      "}"
    ],
    "description": "Try-Catch Statement"
  }
}

​
Async Function with Error Handling

javascript.json
{
  "Async Function with Try-Catch": {
    "prefix": "afn",
    "body": [
      "async function ${1:functionName}(${2:params}) {",
      "\ttry {",
      "\t\t$0",
      "\t} catch (error) {",
      "\t\tconsole.error(error);",
      "\t\tthrow error;",
      "\t}",
      "}"
    ],
    "description": "Async function with try-catch"
  }
}

​
React Hook

typescriptreact.json
{
  "useState Hook": {
    "prefix": "us",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState$3(${2:initialValue});"
    ],
    "description": "React useState hook"
  }
}

​
Test Case

typescript.json
{
  "Test Case": {
    "prefix": "test",
    "body": [
      "test('${1:test description}', () => {",
      "\t$0",
      "});"
    ],
    "description": "Test case"
  }
}

​
File Template Snippets

You can create snippets that are suggested when creating new files: 
{
  "React Component File": {
    "prefix": "rfc",
    "isFileTemplate": true,
    "body": [
      "import React from 'react';",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "\t$1",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: React.FC<${TM_FILENAME_BASE}Props> = (props) => {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t$0",
      "\t\t</div>",
      "\t);",
      "};"
    ],
    "description": "React component with TypeScript"
  }
}

​
Snippet Scope and Include/Exclude

Control where snippets appear: 
{
  "Test Snippet": {
    "prefix": "test",
    "scope": "typescript,javascript",
    "include": ["**/*.test.ts", "**/*.spec.ts"],
    "exclude": ["**/node_modules/**"],
    "body": [
      "describe('${1:suite}', () => {",
      "\tit('${2:test}', () => {",
      "\t\t$0",
      "\t});",
      "});"
    ],
    "description": "Test suite"
  }
}

​
Snippet File Locations

  • User Snippets:
    • Windows: %APPDATA%\Code\User\snippets\
    • macOS: ~/Library/Application Support/Code/User/snippets/
    • Linux: ~/.config/Code/User/snippets/
  • Language-Specific: [language].json
  • Global Snippets: *.code-snippets
Global snippets files (.code-snippets) can include snippets for multiple languages and are great for sharing snippets across your team via version control.

​
Sharing Snippets

To share snippets with your team:
  1. Create a .code-snippets file in your project’s .vscode folder
  2. Commit it to version control
  3. Team members will automatically get these snippets when they open the project
.vscode/project.code-snippets
{
  "Project Header": {
    "scope": "typescript,javascript",
    "prefix": "header",
    "body": [
      "/**",
      " * @file $TM_FILENAME",
      " * @project ${WORKSPACE_NAME}",
      " * @author $1",
      " */",
      "$0"
    ]
  }
}
Snippets with TM_SELECTED_TEXT variable only work when text is selected before triggering the snippet.

​
Troubleshooting

If snippets aren’t working:
  1. Check that the language scope is correct
  2. Verify JSON syntax is valid (no trailing commas)
  3. Ensure the prefix doesn’t conflict with existing snippets
  4. Check that IntelliSense is enabled in settings
  5. Try reloading VS Code window

​
Next Steps

Settings

Configure snippet behavior

Keybindings

Add shortcuts for snippet commands

Build docs developers (and LLMs) love

Get started for freeTalk to us