How to add custom code snippets in VSCode?

Adding custom code snippets in Visual Studio Code (VS Code) is an excellent method to enhance coding efficiency. Here is a step-by-step guide on how to add custom code snippets in VS Code:

Step 1: Open the Snippets File

1. In VS Code, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
2. Type Configure User Snippets and select it.
3. A list will appear where you can choose an existing snippets file or create a new one. To add snippets for a specific language, select the corresponding language (e.g., typescript.json). To add a global snippet, choose New Global Snippets file.

Step 2: Edit the Snippets File

Assuming you choose to add a JavaScript snippet, you will work in the javascript.json file. In this file, you can define one or more snippets. Each snippet starts with a unique key name, followed by the definition of snippet properties, as shown below:

json
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

• "Print to console" is the name of this snippet.
• "prefix": The abbreviation or prefix that triggers the snippet. For example, typing log and pressing Tab will trigger this snippet.
• "body": The main content of the snippet, which can be a single or multi-line code. $1 and $2 represent cursor positions; the cursor starts at $1, and pressing Tab moves to $2.
• "description": This is a description of the snippet, which helps understand its purpose.

Step 3: Save and Test the Snippet

Save your javascript.json file, then in a JavaScript file, try typing log and pressing Tab; you will see console.log(); appear with the cursor inside the parentheses.

Example

For example, if you frequently need to write JavaScript code to check the type of a variable, you can create a snippet like this:

json
{
    "Check type of variable": {
        "prefix": "typeof",
        "body": [
            "if (typeof $1 === '$2') {",
            "    console.log('$1 is $2');",
            "} else {",
            "    console.log('$1 is not $2');",
            "}"
        ],
        "description": "Check the type of a variable"
    }
}

This way, whenever you type typeof and press Tab, the above code block will automatically populate, and you only need to replace $1 and $2 with the specific variable name and type.

Using custom code snippets not only saves time but also helps maintain code consistency and reduce errors. I hope this helps you improve efficiency when using VS Code!