VS Code: Snippets & IntelliSense

Custom snippets eliminate repetitive boilerplate. IntelliSense, code actions, and refactoring tools reduce the need to leave the editor for documentation. Together they dramatically speed up development.

Creating Custom Snippets

// Open: Ctrl+Shift+P → "Snippets: Configure Snippets"
// Choose: language (typescript, javascript) or global
// File location (user snippets): ~/.config/Code/User/snippets/typescript.json

// Snippet syntax:
{
  "React Functional Component": {
    "prefix": "rfc",
    "scope": "typescriptreact,javascriptreact",
    "description": "React functional component with TypeScript props",
    "body": [
      "interface ${1:ComponentName}Props {",
      "  ${2:children?: React.ReactNode}",
      "}",
      "",
      "export function ${1:ComponentName}({ ${3:children} }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>",
      "      ${0:$3}",
      "    </div>",
      "  );",
      "}"
    ]
  },

  "useState Hook": {
    "prefix": "us",
    "scope": "typescript,typescriptreact,javascript,javascriptreact",
    "description": "useState with typed initial value",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:type}>(${3:initialValue});"
    ]
  },

  "Async Arrow Function": {
    "prefix": "afn",
    "body": [
      "const ${1:name} = async (${2:params}): Promise<${3:void}> => {",
      "  ${0}",
      "};"
    ]
  },

  "Try-Catch Block": {
    "prefix": "tc",
    "body": [
      "try {",
      "  ${1}",
      "} catch (error) {",
      "  const message = error instanceof Error ? error.message : String(error);",
      "  ${2:console.error(message);}",
      "}"
    ]
  }
}

Snippet Syntax Reference

// Tab stops
"body": [
  "${1:first stop}",   // Tab stop 1 with placeholder text
  "${2:second stop}",  // Tab stop 2
  "${0}"               // Final cursor position (exit point)
]

// Linked tab stops (editing one updates all with same number)
"body": [
  "const ${1:myVar} = ${2:value};",
  "console.log(${1:myVar});"  // Both ${1}s update together
]

// Transform: modify placeholder text
// Capitalize first letter:
"export function ${1:myFunction}() {}"  // Type "myFunc"
// Use transform on a copy:
"// ${1:name}\nexport class ${1/(.*)/\u$1/}Handler {}"  // → class MyFuncHandler

// Built-in variables
"${TM_FILENAME}"       // Current filename
"${TM_FILENAME_BASE}"  // Filename without extension
"${TM_DIRECTORY}"      // Directory of current file
"${TM_FILEPATH}"       // Full file path
"${CURRENT_YEAR}"      // 2025
"${CURRENT_MONTH}"     // 03
"${CURRENT_DATE}"      // 15
"${CLIPBOARD}"         // Current clipboard content
"${RANDOM}"            // 6 random hex digits
"${RANDOM_HEX}"        // 6 random hex digits

// Choice tab stop (dropdown)
"${1|option1,option2,option3|}"
// Example: HTTP method snippet
"method: ${1|GET,POST,PUT,PATCH,DELETE|},"

IntelliSense & Code Navigation

# IntelliSense triggers
Ctrl+Space           # Trigger suggestion (any time)
Ctrl+Shift+Space     # Trigger parameter hints (inside function call)
Ctrl+I               # Quick info (hover docs without moving mouse)

# Navigation
F12 / Ctrl+Click        # Go to Definition
Alt+F12                 # Peek Definition (inline, no navigation)
Shift+F12               # Find All References
Ctrl+Shift+F12          # Peek All References
F2                      # Rename Symbol (renames across all files)
Ctrl+.                  # Quick Fix / Code Action
Ctrl+Shift+.            # Focus next code action suggestion

# Go to anything
Ctrl+P                  # Go to File
Ctrl+P → @              # Go to Symbol in current file
Ctrl+P → @:             # Go to Symbol (grouped by type)
Ctrl+P → #              # Go to Symbol in workspace
Ctrl+G                  # Go to Line
Ctrl+Shift+O            # Outline view (same as @ in Ctrl+P)

# Breadcrumb navigation (top of editor)
# Click any segment to see siblings; type to filter
# Keyboard: Ctrl+Shift+; then navigate with arrows

# Multi-cursor
Alt+Click               # Add cursor at click position
Ctrl+Alt+Down/Up        # Add cursor above/below
Ctrl+D                  # Select next occurrence of selection
Ctrl+Shift+L            # Select all occurrences of selection
Ctrl+K Ctrl+D           # Skip current occurrence, select next

Code Actions & Refactoring

# Code Actions (lightbulb icon or Ctrl+.)
# Context-sensitive actions based on cursor position:
# - Fix all auto-fixable ESLint errors
# - Organize imports (remove unused, sort)
# - Add missing import
# - Generate missing interface member
# - Convert function to arrow function
# - Extract variable / Extract function
# - Infer function return type
# - Implement interface methods
# - Convert for-loop to array method

# Refactoring shortcuts
# Rename Symbol:           F2
# Move file (update imports): drag in explorer or right-click → Move
# Extract to function:     Select code → Ctrl+. → "Extract to function"
# Extract to variable:     Select expression → Ctrl+. → "Extract to variable"
# Organize imports:        Ctrl+Shift+P → "Organize Imports"
#                          Or: set "editor.codeActionsOnSave" in settings

# settings.json: auto-fix on save
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit",
    "source.addMissingImports": "explicit"
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

# Workspace snippets (shared with team via .vscode/)
# Create: .vscode/myproject.code-snippets
# Same format as user snippets; checked into git
# Available to all team members who open the workspace