What are Snippets in VSCode?

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. (Visual Studio Code)

For example, in JavaScript, instead of inserting console.log(’Hello World…’) you can use VSCode built-in snippet log by inserting it, then press the tab button to show that entirely on the editor. There are many other built-in snippets on the VSCode that you can use:

Press shift+cmd+p in Mac or shift+ctrl+p in Windows to open the Command Palette.

Insert Insert Snippet command in the Command Palette to get a list of the snippets for the language of the current file, then press the enter button to see them.

Many extensions on the VS Code Marketplace include snippets. You can search for extensions that contain snippets in the Extensions view (shift+cmd+x in Mac or shift+ctrl+x in Windows) using the @category:"snippets" filter. (Visual Studio Code)

How to create your own snippets?

I’m working with React, and there is a popular snippet extension for React on the VS Code Marketplace, but most of its snippets are useless for me. So I prefer to create my own snippets instead.

I want to create a React TypeScript component snippet which takes its name from the file name:

Open the Command Palette by pressing shift+cmd+p in Mac or shift+ctrl+p in Windows.

Insert configure user snippets

Select the language for which the snippets
should appear.

For example, to create a snippet for a React
TypeScript file, choose typescriptreact then press the enter button.

VSCode will open a ***.json (typescriptreact.json for the previous selection).

Insert the below attribute on the ***.json (typescriptreact.json) object:

"React Arrow Function Component": {
  "prefix": "trafc",
  "body": [
    "type Props = {};\n",
    "const $TM_FILENAME_BASE = ({}: Props) => {",
    "  return <></>;",
    "};\n",
    "export default $TM_FILENAME_BASE;\n"
  ],
  "description": "Create TypeScript React arrow function component"
}

You can use trafc snippet for React TypeScript file.

Now I want to describe what the above code says:

“React Arrow Function Component” is the snippet name. It is displayed via IntelliSense if no description is provided.

prefix is the snippet that we can use on the VSCode to display the body.

body is an array of strings consisting of the code we want to be displayed via the prefix snippet. Every line of our codes should be placed in a string. If you need to use enter character type \n.

description as its name shows is the description of our snippet.

Another example is to create a ‍‍console.log with a description like console.log("status:", status). The snippet configuration is shown in the below section:

"console.log with description": {
  "prefix": "lg",
  "body": ["console.log('${1:desc}:', ${1:desc})"],
  "description": "Insert a console.log() with description as the           same as the variable."
}