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"
}