VS Code Snippets

Create custom code snippets in VS Code for faster coding

Creating Snippets

# Open snippet file
Ctrl+Shift+P / Cmd+Shift+P # command palette
Preferences: Configure User Snippets

# Snippet structure
"Snippet Name": {
  "prefix": "trigger", # what to type
  "body": ["code"], # snippet content
  "description": "desc" # tooltip text
}

Snippet Variables

$1, $2, $3 # tab stops
$0 # final cursor position
${1:placeholder} # tab stop with default
${1|option1,option2|} # choice selection
$TM_FILENAME # current filename
$TM_DIRECTORY # directory path
$CURRENT_YEAR # current year

Example: Console Log

"Console Log": {
  "prefix": "clg",
  "body": [
    "console.log(\"text\", variable);",
    "$0"
  ],
  "description": "Console log with label"
}

Example: React Component

"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "import React from react;",
    "",
    "const ComponentName = () => {",
    "  return (",
    "    
content
"
, " );", "};" ] }

Example: For Loop

"For Loop": {
  "prefix": "forl",
  "body": [
    "for (let i = 0; i < array.length; i++) {",
    "  $0",
    "}"],
  "description": "For loop iterator"
}