Snippets

# Open user snippets:
#   Command Palette → 'Snippets: Configure User Snippets'
#   Pick a language → opens javascript.json (for example)

# Per-project snippets:
#   .vscode/typescript.code-snippets — shared via git

# Snippet JSON structure
{
    "Console log": {
        "prefix":      "clg",
        "description": "console.log()",
        "body": [
            "console.log(${1:expression});$0"
        ]
    },

    "React function component": {
        "prefix":      "rfc",
        "description": "React function component (TS)",
        "body": [
            "interface ${1:Props} {",
            "    ${2:children?: React.ReactNode;}",
            "}",
            "",
            "export function ${3:Component}({ ${4:children} }: ${1}) {",
            "    return (",
            "        ${5:<div>}",
            "            ${6:$4}",
            "        ${5/(<)(\\w+)/$1\\/$2/}",
            "    );",
            "}$0"
        ]
    }
}

# Placeholder syntax
#   $1, $2, …  ordered tab stops
#   ${1:default}  with a default value
#   ${1|one,two,three|}  with a choice list
#   $0  final cursor position (no more tabs)
#   ${1/REGEX/REPLACE/}  transform a previously-typed placeholder
#
# Variables
#   $TM_FILENAME, $TM_FILENAME_BASE
#   $CURRENT_YEAR, $CURRENT_MONTH, $CURRENT_DATE
#   $TM_SELECTED_TEXT — current selection
#   $CLIPBOARD
#   $TM_DIRECTORY

# scope — multi-language snippets in .code-snippets files
{
    "React import": {
        "scope":       "javascript,typescript,javascriptreact,typescriptreact",
        "prefix":      "rim",
        "body":        ["import { useState, useEffect } from 'react';"]
    }
}

# Use
# Type the prefix, hit Tab, fill the placeholders, Tab to advance.
#
# Tip — commit .vscode/*.code-snippets so the whole team gets the boilerplate.

// User snippets:  Command Palette → "Configure User Snippets" → pick language.
{
    "Console log": {
        "prefix": "clg",
        "body": ["console.log($1);"],
        "description": "console.log()"
    }
}