DEV Community

Cover image for Create custom code snippets in VsCode
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on

7 1

Create custom code snippets in VsCode

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

dry

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.

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

Image description

  1. Type Preferences: Configure User Snippets and select it.

Image description

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

Image description

  1. 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"
}
Enter fullscreen mode Exit fullscreen mode
  • "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.

Image description

Other examples include:

Function Declaration

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

Try-Catch Block

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

Import Statement

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

Now that you know this, you can work smarter, finish your tasks, and go on vacation.

vacation

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay