A collection of VS Code for faster and more efficient Salesforce development (so far covering Lightning only).

auraSnippetsHTML.json

{
    "AuraValueBinding": {
		"prefix": "aura:vb",
		"body": [
			"\"{!$0}\""
		],
		"description": "Aura value binding"
	},
	"AuraIteration": {
		"prefix": "aura:iteration",
		"body": [
			"<aura:iteration items=\"{!${1:collection}}\" var=\"${2:varName}\" indexVar=\"${3:i}\">",
			"    $4",
			"</aura:iteration>$0"
		],
		"description": "<aura:iteration> iterates over a collection of items and renders the body of the tag for each item."
	},
	"AuraIf": {
		"prefix": "aura:if",
		"body": [
			"<aura:if isTrue=\"{!${1:expression}}\">",
			"    $2",
			"</aura:if>$0"
		],
		"description": "<aura:if> renders the content within the tag if the isTrue attribute evaluates to true."
	},
	"AuraIfElse": {
		"prefix": "aura:if/else",
		"body": [
			"<aura:if isTrue=\"{!${1:expression}}\">",
			"    $2",
			"    <aura:set attribute=\"else\">",
			"        $3",
			"    </aura:set>",
			"</aura:if>$0"
		],
		"description": "<aura:if> renders the content within the tag if the isTrue attribute evaluates to true. Use <aura:set attribute=\"else\"> to define the markup to render when isTrue evaluates to false."
	},
	"AuraElse": {
		"prefix": "aura:else",
		"body": [
			"<aura:set attribute=\"else\">",
			"    $1",
			"</aura:set>$0",
		],
		"description": "The markup to render when <code>isTrue</code> evaluates to false."
	},
	"AuraAttribute": {
		"prefix": "aura:attribute",
		"body": [
			"<aura:attribute access=\"${1:modifier}\" name=\"${2:attrName}\" type=\"${3:attrType}\" description=\"$4\" />$0"
		],
		"description": "<aura:attribute> describes an attribute available on an app, interface, component, or event."
	},
	"LtngRequire": {
		"prefix": "ltng:require",
		"body": [
			"<ltng:require scripts=\"{!\\$Resource.${1:name}}\" afterScriptsLoaded=\"{!c.${2:action}}\" />"
		],
		"description": "Use a <ltng:require> tag in your .cmp or .app markup to reference an external resource that you’ve uploaded as a static resource."
	},
	"AuraEventHandler": {
		"prefix": "aura:handler",
		"body": [
			"<aura:handler name=\"${1:eventName}\" event=\"${2:eventType}\" action=\"{!c.${3:action}}\" />$0"
		],
		"description": "Use <aura:handler> to handle an event in the markup of the handler component."
	},
	"AuraValueEventHandler": {
		"prefix": "aura:handlerValue",
		"body": [
			"<aura:handler name=\"${1:eventName}\" value=\"${2:attribute}\" action=\"{!c.${3:action}}\" />$0"
		],
		"description": "Use <aura:handler> with the value attribute to handle events like initialization or value changes (e.g. init, change)."
	},
	"AuraRegisterEvent": {
		"prefix": "aura:registerEvent",
		"body": [
			"<aura:registerEvent access=\"${1:modifier}\" name=\"${2:eventName}\" type=\"${3:eventType}\" description=\"$4\" />$0"
		],
		"description": "A component registers that it may fire an event by using <aura:registerEvent> in its markup."
	},
	"AuraMethod": {
		"prefix": "aura:method",
		"body": [
			"<aura:method access=\"${1:modifier}\" name=\"${2:methodName}\" action=\"{!c.${3:action}}\" description=\"$4\">",
			"    <aura:attribute name=\"$5\" type=\"$6\" />",
			"</aura:method>$0"
		],
		"description": "Use <aura:method> to define a method as part of a component's API. This enables you to directly call a method in a component’s client-side controller instead of firing and handling a component event. Using <aura:method> simplifies the code needed for a parent component to call a method on a child component that it contains."
	},
	"AuraMethodSimple": {
		"prefix": "aura:methodsimple",
		"body": [
			"<aura:method access=\"${1:modifier}\" name=\"${2:methodName}\" action=\"{!c.${3:action}}\" description=\"$4\" />$0"
		],
		"description": "Use <aura:method> to define a method as part of a component's API. This enables you to directly call a method in a component’s client-side controller instead of firing and handling a component event. Using <aura:method> simplifies the code needed for a parent component to call a method on a child component that it contains."
	},
	"AuraDependency": {
		"prefix": "aura:dependency",
		"body": [
			"<aura:dependency resource=\"markup://${1:namespace:resource}\" type=\"${2:COMPONENT|EVENT|INTERFACE|APPLICATION}\" />$0"
		],
		"description": "The <aura:dependency> tag enables you to declare dependencies, which improves their discoverability by the framework."
	},
	"AuraExpressionIf": {
		"prefix": "ax:if",
		"body": [
			"if(${1:condition}, ${2:returnIfTrue}, ${3:returnIfFalse})$0"
		],
		"description": "Evaluates the first argument as a boolean. If true, returns the second argument. Otherwise, returns the third argument."
	},
	"AuraExpressionAnd": {
		"prefix": "ax:and",
		"body": [
			"and(${1:cond1}, ${2:cond2})$0"
		],
		"description": "Returns true if both arguments are true."
	},
	"AuraExpressionEmpty": {
		"prefix": "ax:empty",
		"body": [
			"empty(${1:attributeName})$0"
		],
		"description": "Returns true if the argument is empty. An empty argument is undefined, null, an empty array, or an empty string. An object with no properties is not considered empty."
	},
	"AuraExpressionNot": {
		"prefix": "ax:not",
		"body": [
			"not(${1:expression})$0"
		],
		"description": "Returns true if the argument is false."
	},
	"AuraExpressionOr": {
		"prefix": "ax:or",
		"body": [
			"or(${1:cond1}, ${2:cond2})$0"
		],
		"description": "Returns true if either one of the arguments is true."
	},
	"AuraExpressionEquals": {
		"prefix": "ax:eq",
		"body": [
			"equals(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Returns true if the specified arguments are equal. The arguments can be any data type."
	},
	"AuraExpressionNotEquals": {
		"prefix": "ax:noteq",
		"body": [
			"notequals(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Returns true if the specified arguments are not equal. The arguments can be any data type."
	},
	"AuraExpressionLessThan": {
		"prefix": "ax:lt",
		"body": [
			"lessthan(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Returns true if the first argument is numerically less than the second argument."
	},
	"AuraExpressionGreaterThan": {
		"prefix": "ax:gt",
		"body": [
			"greaterthan(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Returns true if the first argument is numerically greater than the second argument."
	},
	"AuraExpressionLessThanOrEquals": {
		"prefix": "ax:lteq",
		"body": [
			"lessthanorequal(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Returns true if the first argument is numerically less than or equal to the second argument."
	},
	"AuraExpressionGreaterThanOrEquals": {
		"prefix": "ax:gteq",
		"body": [
			"greaterthanorequal(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Returns true if the first argument is numerically greater than or equal to the second argument."
	},
	"AuraExpressionConcat": {
		"prefix": "ax:concat",
		"body": [
			"concat(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Concatenates the two arguments."
	},
	"AuraExpressionFormat": {
		"prefix": "ax:format",
		"body": [
			"format(${1:\\$Label.np.labelName}, ${2:attribute1}, ${3:attribute2})$0"
		],
		"description": "Outputs a label and updates it. Replaces any parameter placeholders with comma-separated attribute values. Supports ternary operators in labels and attributes."
	},
	"AuraExpressionJoin": {
		"prefix": "ax:join",
		"body": [
			"join(${1:separator}, ${2:subStr1}, ${3:subStr2...})$0"
		],
		"description": "Joins the substrings adding the separator String (first argument) between each subsequent argument."
	},
	"AuraExpressionAdd": {
		"prefix": "ax:add",
		"body": [
			"add(${1:arg1}, ${2:arg2})$0"
		],
		"description": "Adds the first argument to the second."
	},
	"AuraExpressionSub": {
		"prefix": "ax:sub",
		"body": [
			"sub(${1:num1}, ${2:num2})$0"
		],
		"description": "Subtracts the second argument from the first."
	},
	"AuraExpressionMult": {
		"prefix": "ax:mult",
		"body": [
			"mult(${1:num1}, ${2:num2})$0"
		],
		"description": "Multiplies the first argument by the second."
	},
	"AuraExpressionDiv": {
		"prefix": "ax:div",
		"body": [
			"div(${1:num1}, ${2:num2})$0"
		],
		"description": "Divides the first argument by the second."
	},
	"AuraExpressionMod": {
		"prefix": "ax:mod",
		"body": [
			"mod(${1:num1}, ${2:num2})$0"
		],
		"description": "Returns the integer remainder resulting from dividing the first argument by the second."
	},
	"AuraExpressionAbs": {
		"prefix": "ax:abs",
		"body": [
			"abs(${1:num})$0"
		],
		"description": "Returns the absolute value of the argument: the same number if the argument is positive, and the number without its negative sign if the number is negative. For example, abs(-5) is 5."
	},
	"AuraExpressionNeg": {
		"prefix": "ax:neg",
		"body": [
			"neg(${1:num})$0"
		],
		"description": "Reverses the sign of the argument. For example, neg(100) is -100."
	},
}

auraSnippetsJS.json

{
    	"GetCallback": {
		"prefix": "aura:getcb",
		"body": [
			"$A.getCallback(() => {",
			"    $1",
      			"})$0",
		],
		"description": "$A.getCallback"
	},
	"ComponentGlobalId": {
		"prefix": "aura:gid",
		"body": [
			"${1:cmp}.getGlobalId()$0",
		],
		"description": "Get component GlobalId."
	},
	"ComponentSet": {
		"prefix": "aura:set",
		"body": [
			"${1:cmp}.set(${2:attribute}, ${3:value})$0",
		],
		"description": "Set component attribute value."
	},
	"ComponentGet": {
		"prefix": "aura:get",
		"body": [
			"${1:cmp}.get(${2:attribute})$0",
		],
		"description": "Get component attribute value."
	},
	"EnqueueAction": {
		"prefix": "aura:enq",
		"body": [
			"$A.enqueueAction(${1:action});$0",
		],
		"description": "Enqueue an action."
	},
	"ActionSetCallback": {
		"prefix": "aura:setcb",
		"body": [
			"${1:action}.setCallback(this, response => {",
			"    const ${2:state} = response.getState();",
			"    if (${2:state} === 'SUCCESS') {",
			"        $3",
			"    } else if (${2:state} === 'ERROR') {",
			"        $4",
			"    }",
			"});",
		],
		"description": "Set an action's callback function."
	},
	"ActionSetParams": {
		"prefix": "aura:setparams",
		"body": [
			"${1:action}.setParams({",
			"    $2",
			"});",
		],
		"description": "Set an action's params."
	},
	"GetAction": {
		"prefix": "aura:getAction",
		"body": [
			"const ${1:action} = ${2:cmp}.get('c.${3:actionName}');",
		],
		"description": "Get an action."
	},
	"ToggleClass": {
		"prefix": "aura:toggleClass",
		"body": [
			"$A.util.toggleClass(${1:element}, ${2:className});$0",
		],
		"description": "Toggle class util."
	},
}