Configure User Snippets in VSCode

Overview

To work faster with VSCode, configure global snippets which will be available for all languages.

Installation

File -> Preferences -> Configure User Snippets -> New Global Snippets File -> FileNameYouChoose -> Enter

In the opened file, enter the following piece of code:

  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "Log output to console"
  },
 "Arrow Function": {
    "prefix": "arrf",
    "body": ["const ${1:functionName} = ($2) => {", "  $3", "}"],
    "description": "Arrow Function"
  }

Notes

When the snippets grow and it gets complicated to type out inside the body property, use the snippets-generator which will help you generate snippets based on your entered data and copy it to your snippets.code-snippets file on your VSCode. Snippet Generator Example

Here, tabstops ($1, $2) make the editor cursor move inside a snippet and specify cursor locations. The number is the order in which tabstops will be visited. Placeholders are tabstops with values, like ${1:functionName}. The placeholder text will be inserted and selected such that it can be easily changed.

Configure User Snippets in VSCode

Tools

The awk Command in Linux

More from this blog

How to view the commit history in Git

How to Install Ubuntu Server 24.04

Understanding /etc/passwd/ and /etc/shadow/ files in Linux

Understanding Symbolic Links and Hard Links in Linux

Setting the Hostname of Linux Workstation or Server

Overview

Installation

Notes

References

Command Palette

Tools

The awk Command in Linux

More from this blog

Overview

Installation

Notes

References