7. Custom Snippets & Emmet

Writing boilerplate code (like React component setups, API call structures, or try-catch blocks) repeatedly is a waste of time. VS Code provides two powerful acceleration tools to generate blocks of code in milliseconds: **Custom Snippets** and **Emmet**.

Creating Custom User Snippets

You can declare custom code templates that expand instantly when you type a short trigger word and hit Tab.

Step 1: Open Snippets File

1. Open the Command Palette (Ctrl + Shift + P).
2. Search and select: Preferences: Configure User Snippets.
3. Select the language (e.g. `javascript`, `typescript`, `html`) or click **New Global Snippets File** to make it active across all file types.

Step 2: Declare Snippet in JSON

Snippets are declared inside a standard JSON file. Below is an example snippet that generates a complete React Functional Component:

{
    "React Functional Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "export default function ${1:ComponentName}() {",
            "    return (",
            "        <div className=\"${2:container}\">",
            "            ${3:/* Content goes here */}",
            "        </div>",
            "    );",
            "}"
        ],
        "description": "Generate React Functional Component boilerplate"
    }
}

Understanding Tab Placeholders

Notice the placeholders prefixed with dollar signs:

• $1, $2, $3: **Tab Stops**. Once you expand the snippet, your cursor is placed at $1. Pressing Tab jumps your cursor to $2, then $3 automatically!
• ${1:ComponentName}: **Default Placeholders**. Provides a pre-written default text that is highlighted instantly for easy renaming.
• $0: **Final Cursor Destination**. Where your cursor lands once you finish typing all placeholder fields.

Emmet abbreviations (HTML/CSS Speedrunner)

For frontend web engineers, **Emmet** is built natively into VS Code. It expands CSS-like syntax selectors into fully nested HTML elements instantly.

Try typing these examples inside an HTML file and press Tab (or Enter):