Create custom code snippets in VsCode

#webdev #vscode

Programming, in itself, can become very repetitive no matter how **DRY **you aim to be.

To address this, we must learn how to reduce the number of keystrokes we type. I will show you how to create a custom snippet in VS Code in just four steps.

Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac).

Type Preferences: Configure User Snippets and select it.

Choose the language for the snippet (I will choose typescript.json for TypeScript).

Paste the following configuration into the snippet file to create a console.log snippet:

{
"Console Log": {
    "prefix": "cl",
    "body": [
      "console.log($1);", // $1 possible variable placeholder
      "$2", // for tab stop i.e. to place cursor,
      "$0" // for final cursor position
    ],
    "description": "Console log snippet"
}

"prefix": This is the shortcut you type (e.g., cl).
"body": This is the code that will be inserted. $1 is a placeholder for where your cursor will be placed after expanding the snippet.
"Description": A short description of the snippet (optional).

Testing

To test, create a new .ts file and type cl anywhere.

Other examples include:

Function Declaration

{
  "Function Declaration": {
    "prefix": "fn",
    "body": [
      "function $1($2) {",
      "  $3",
      "}",
      "$0"
    ],
    "description": "Function declaration snippet"
  }
}

Try-Catch Block

{
  "Try-Catch Block": {
    "prefix": "tc",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  console.error(error);",
      "  $2",
      "}",
      "$0"
    ],
    "description": "Try-catch block snippet"
  }
}

Import Statement

{
  "Import Statement": {
    "prefix": "imp",
    "body": [
      "import $1 from '$2';",
      "$0"
    ],
    "description": "Import statement snippet"
  }
}