Introduction

Code snippets are shortcuts that expand into larger blocks of code. They're essential for productivity, letting you type a few characters and get entire function templates, boilerplate code, or common patterns. When snippets stop working, you lose a major productivity boost.

Symptoms

  • Typing snippet prefix doesn't trigger expansion
  • Snippet suggestions don't appear in IntelliSense
  • Custom snippets aren't recognized
  • Snippets work in some languages but not others
  • Snippet placeholders don't work correctly

Understanding Snippets

VS Code has multiple snippet sources:

  1. 1.Built-in snippets: Language-specific snippets from VS Code
  2. 2.Extension snippets: Snippets provided by extensions
  3. 3.User snippets: Custom snippets you define
  4. 4.Project snippets: Workspace-specific snippets

Step-by-Step Fixes

Step 1: Enable Snippet Suggestions

Snippets must be included in IntelliSense:

json
// settings.json
"editor.snippetSuggestions": "top"

Options: - "top": Snippets appear at top of suggestions - "bottom": Snippets appear at bottom - "inline": Snippets mixed with other suggestions - "none": Snippets disabled in IntelliSense

If set to `"none", snippets won't show.

Step 2: Enable Quick Suggestions

Suggestions must appear as you type:

json
// settings.json
"editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
}

Or enable for all contexts:

json
"editor.quickSuggestions": true

Step 3: Configure Suggest Settings

Control suggestion behavior:

json
// settings.json
"editor.suggestSelection": "first",
"editor.wordBasedSuggestions": "matchingDocuments",
"editor.acceptSuggestionOnEnter": "on"

Step 4: Check Tab Completion

Tab can expand snippets:

json
// settings.json
"editor.tabCompletion": "on"

Options: - "on": Tab expands snippets and suggestions - "off": Tab only inserts tab character - "onlySnippets": Tab only expands snippets

Step 5: Use Snippet Picker

If IntelliSense doesn't show snippets:

bash
Editor: Insert Snippet

Or Ctrl+Shift+P and type "snippet".

This shows all available snippets in a searchable list.

Step 6: Check User Snippets Location

User snippets are in a specific file:

Open via command: `` Preferences: Configure User Snippets

Select language or "New Global Snippets file".

User snippets file location: - Windows: %APPDATA%\Code\User\snippets - macOS: ~/Library/Application Support/Code/User/snippets/ - Linux: ~/.config/Code/User/snippets/

Step 7: Fix Snippet Syntax

Custom snippets must have correct syntax:

json
// snippets.json - Correct format
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

Required fields: - prefix: Trigger text - body: Snippet content (string or array) - description: Optional but recommended

Common syntax errors:

Wrong: ``json { "log": "console.log()" // Missing prefix and body structure }

Wrong: ``json { "Print": { "prefix": "log", "body": "console.log()" // Should be array for multiline } }

Step 8: Handle Snippet Variables

Snippet placeholders and variables:

Placeholders: - $1, $2: Tab stops - $0: Final cursor position - ${1:default}: Placeholder with default text

Variables: - $TM_FILENAME: Current file name - $TM_FILENAME_BASE: File name without extension - $TM_DIRECTORY: Current directory - $TM_LINE_INDEX: Line number (0-based) - $TM_LINE_NUMBER: Line number (1-based) - $CURRENT_YEAR, $CURRENT_MONTH, $CURRENT_DATE: Date info - $RANDOM: Random number

Example: ``json { "Function": { "prefix": "func", "body": [ "function ${1:name}() {", "\t$2", "}" ], "description": "Create function" } }

Step 9: Fix Language-Specific Snippets

Snippets can be language-specific:

json
// javascript.json - JavaScript snippets
{
    "Import": {
        "prefix": "imp",
        "body": "import { $1 } from '$2';",
        "description": "Import statement"
    }
}

Ensure the snippet file matches the language: - javascript.json for JavaScript - typescript.json for TypeScript - python.json for Python

Step 10: Check Workspace Snippets

Workspace snippets override user snippets:

Check .vscode/*.code-snippets in your project:

json
// .vscode/project.code-snippets
{
    "Project Log": {
        "prefix": "plog",
        "body": "console.log('[Project]', $1);",
        "description": "Project-specific log"
    }
}

Step 11: Fix Snippet Scope

Snippets can be scoped to specific languages:

json
{
    "React Component": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": "rcomp",
        "body": [
            "function ${1:Component}() {",
            "\treturn <div>$2</div>;",
            "}"
        ],
        "description": "React component"
    }
}

Without scope, snippet is global.

Step 12: Handle Extension Snippet Conflicts

Extensions provide snippets that may conflict:

  1. 1.Open Extensions (Ctrl+Shift+X)
  2. 2.Check snippet-providing extensions
  3. 3.Disable conflicting ones
  4. 4.Or use unique prefixes
  1. 1.Check what snippets an extension provides:
  2. 2.Extension details page
  3. 3."Feature Contributions" tab
  4. 4."Snippets" section

Step 13: Disable Specific Snippets

You can disable snippets from extensions:

json
// settings.json
"editor.snippetsSuggestions": "top",
"gitlens.advanced.blame.customizations": {}

Some extensions have snippet settings:

json
// settings.json
"javascript.suggestionActions.enabled": true

Step 14: Fix IntelliSense Trigger

IntelliSense may need manual trigger:

Press Ctrl+Space to force suggestions.

Or trigger specifically: `` Trigger Suggest

Step 15: Check Snippet Suggestions Mode

Snippet suggestions behavior:

json
// settings.json
"editor.showSnippets": true

Step 16: Handle Multi-line Snippets

Multi-line snippets need array format:

json
{
    "Class": {
        "prefix": "class",
        "body": [
            "class ${1:ClassName} {",
            "\tconstructor(${2:params}) {",
            "\t\t$3",
            "\t}",
            "\t$4",
            "}"
        ],
        "description": "Class definition"
    }
}

Step 17: Fix Snippet Indentation

Snippet indentation uses \t for tabs:

json
"body": [
    "function name() {",
    "\t// indented content",
    "}"
]

Or use spaces directly: ``json "body": [ "function name() {", " // indented with spaces", "}" ]

Step 18: Check for Conflicting Prefixes

Multiple snippets with same prefix conflict:

json
// Wrong - two snippets with same prefix
{
    "Log 1": {
        "prefix": "log",
        "body": "console.log()"
    },
    "Log 2": {
        "prefix": "log",
        "body": "console.error()"
    }
}

Use unique prefixes: ``json { "Log": { "prefix": "log", "body": "console.log()" }, "Error": { "prefix": "err", "body": "console.error()" } }

Step 19: Verify Snippet Files Are Valid JSON

Snippet files must be valid JSON:

  1. 1.Check for trailing commas (invalid in JSON)
  2. 2.Check for missing quotes
  3. 3.Check for unescaped special characters

Validate with: ``bash # Check JSON validity cat snippets.json | python -m json.tool

Verification

Test snippet functionality:

  1. 1.Create a test snippet file
  2. 2.Add a simple snippet
  3. 3.Reload VS Code
  4. 4.Type the prefix
  5. 5.Check if suggestion appears
  6. 6.Press Tab or Enter to expand

Example test snippet:

json
// javascript.json
{
    "Test Snippet": {
        "prefix": "testsnip",
        "body": "// This is a test snippet: $1",
        "description": "Test snippet"
    }
}

Type "testsnip" in a JavaScript file - should see suggestion.

React Component

json
{
    "React Functional Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "function ${1:ComponentName}() {",
            "\treturn (",
            "\t\t<div>",
            "\t\t\t$2",
            "\t\t</div>",
            "\t);",
            "}",
            "",
            "export default ${1:ComponentName};"
        ],
        "description": "React functional component"
    }
}

Python Function

json
{
    "Python Function": {
        "prefix": "pyfunc",
        "body": [
            "def ${1:function_name}(${2:params}):",
            "\t\"\"\"${3:Description}\"\"\"",
            "\t$0"
        ],
        "description": "Python function"
    }
}
  • VS Code Multi-Cursor Not Working
  • VS Code IntelliSense Not Working
  • VS Code Keybindings Not Working