Home SALESFORCE Visual Studio Code Tips – User Snippets vs Code Snippets in Visual Studio Code

Visual Studio Code Tips – User Snippets vs Code Snippets in Visual Studio Code

by Sakthivel Madesh

Visual Studio Code Tips – User Snippets vs Code Snippets in Visual Studio Code

This post & video explained about the User Snippets and Code Snippets in Visual Studio Code

User Snippets:

From User Snippets, Place your snippets in the file either apex, html, javascript, json file then its easily populated the snippets in your relevant file while simply typing the prefix value.

Each snippet is defined under a snippet name and has a prefix, body and description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
$1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the same ids are connected.

Steps: 

Step 1: From Command Palette – Type User Snippets and Select “Preferences: Configure User Snippets” or Gear Icon -> User Settings

Step 2: Select Snippets File to create Snippets (Here listed the json files for Apex, html, Javascript, etc)


Example to place the apex.json file

{
“ApexClass”: {
            “prefix”: “initClass”,
            “body”: [
                “/* The purpose of the apex class: $1”,
                 “Author: Sakthivel Madesh”,
                 “Created Date: $2”,
                 “Modified By: $3”,
                 “Modified Date: $4”,
                 “Comments: $5 */”
            ],
            “description”: “To add the generic comments in Class”
    }
}

From your apex class file, simply type initClass, then automatically populated the body of the value as per above example.

Code Snippets:

Using Code Snippets, Automatically generate re-usable source code templates, its save lot of times for the developer to re-write the code again and again (for examples of conditional statements & loops like IF, For, Foreach, etc,.. or any LWC related syntax likely LWC Events, Toast Message, etc,..)

Steps:

From Command Palette -> Type “Insert Snippet

Please check the below video for more info:

 

You may also like

Leave a Comment