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.

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.

References

1. Snippets in Visual Studio Code
2. Code Faster With Custom VS Code Snippets
3. Snippet Generator