VSCode Snippets: Type Less, Code More

Custom snippets save keystrokes and enforce patterns. Here's how to make them.

Why Snippets

How many times have you typed:

import React, { useState, useEffect } from 'react';

function ComponentName() {
  return (
    <div>
      
    </div>
  );
}

export default ComponentName;

With a snippet: type `rfc`, hit Tab, done.

Built-in Snippets

VS Code has snippets for many languages. Type `for` in JavaScript and see suggestions.

But custom snippets are where it gets good.

Creating Snippets

1. `Cmd+Shift+P` → "Preferences: Configure User Snippets" 2. Choose a language (or global) 3. Add your snippets

Snippet Syntax

{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "function ${1:ComponentName}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React function component"
  }
}

• `prefix`: What you type to trigger
• `body`: Lines of the snippet
• `$1`, `$2`: Tab stops with placeholders
• `$0`: Final cursor position
• `${1:default}`: Tab stop with default value

My JavaScript Snippets

{
  "Console Log": {
    "prefix": "cl",
    "body": "console.log('$1:', $1);$0"
  },
  
  "Arrow Function": {
    "prefix": "af",
    "body": "const ${1:name} = ($2) => {$0};"
  },
  
  "Async Function": {
    "prefix": "afn",
    "body": [
      "async function ${1:name}($2) {",
      "  $0",
      "}"
    ]
  },
  
  "Try Catch": {
    "prefix": "tc",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  console.error(error);",
      "  $0",
      "}"
    ]
  }
}

React Snippets

{
  "useState": {
    "prefix": "us",
    "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2);$0"
  },
  
  "useEffect": {
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  $1",
      "}, [$2]);$0"
    ]
  },
  
  "React Component with Props": {
    "prefix": "rfcp",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}",
      "",
      "export default ${1:Component};"
    ]
  }
}

Advanced: Transforms

{
  "useState with capitalize": {
    "prefix": "ust",
    "body": "const [${1:value}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"
  }
}

Type `ust`, enter `count`, get:

const [count, setCount] = useState();

Tips

1. **Keep them short** - `cl` not `consolelog` 2. **Use transforms** - Auto-capitalize, etc. 3. **Tab stops matter** - Order them logically 4. **Don't overdo it** - Too many snippets = memory overhead

Snippets compound. Minutes saved per day = hours saved per year.

Back to Journal