Arrow Function Snippets

The quick and easy way to create and use Arrow Functions with VS Code.

Installation
Supported Languages
Snippets
Examples
About

Installation

Quick Launch

Open the quick launch with ctrl+shift+P (Win/Linux) or cmd+shift+P (macOS).

Paste the following command and press Enter:

ext install deinsoftware.arrow-function-snippets

Extension Manager

Open the extension manager with ctrl+shift+X (Win/Linux) or cmd+shift+X (macOS), search for Arrow Function Snippets and click on [Install] button.

Marketplace

Arrow Function Snippets

⇧ Back to menu

Supported Languages

Language	Extension
JavaScript	`.js`
TypeScript	`.ts`
JavaScript React	`.jsx`
TypeScript React	`.tsx`
Vue	`.vue`
JSON ℹ️	`.json`
JSONC ℹ️	`.jsonc`
JSON5 ℹ️	`.json5`

ℹ️ Only JSON elements snippets are available

⇧ Back to menu

Snippets

Below is a list of all available snippets and the triggers of each one. The → means the TAB key and █ the final cursor position.

Arrow Function

Trigger	Description	Result JS/TS
`af→`	implicit return without args	`() => █`
`afa→`	implicit return with arg(s)	`(arg) => █`
`afad→`	implicit return with arg destructuring	`({prop, prop}) => █`
`afo→`	implicit return object	`() => ({prop: value█})`
`afoa→`	implicit return object with arg(s)	`(arg) => ({prop: value█})`
`afe→`	explicit return	`() => { return █ }`
`afea→`	explicit return with arg(s)	`(arg) => { return █ }`
`afead→`	explicit return with arg destructuring	`({prop, prop}) => { return █ }`
`afp→`	explicit with parentesis	`() => { (█) }`
`afpa→`	explicit with parentesis and arg(s)	`(arg) => { (█) }`
`iiaf→`	immediately invoque	`(() => █)()`

Promises

Trigger	Description	Result JS/TS
`afr→`	implicit return response	`(response) => █`
`afrj→`	implicit return response json	`(response) => response.json()█`
`afrd→`	implicit return response data	`(response) => response.data█`
`afer→`	explicit return response	`(response) => { return █ }`
`aferj→`	explicit return response json	`(response) => { return response.json() }█`
`aferd→`	explicit return response data	`(response) => { return response.data }█`

Helpers

Trigger	Description	Result JS/TS
`afceq→`	compare equal	`(element) => element.prop === value█`
`afcne→`	compare not equal	`(element) => element.prop !== value█`

Variables

Trigger	Description	Result JS	Result TS
`cv→`	const variable	`const name = █`	`const name = █`
`cvt→`	const variable type		`const name: type = █`
`cvm→`	const variable multiple type		`const name: (type \| type) = █`
`cs→`	const string	`const name = '█'`	`const name: string = '█'`
`cn→`	const number	`const name = 0█`	`const name: number = 0█`
`cb→`	const boolean	`const name = true█`	`const name: boolean = true█`
`co→`	const object	`const name = {█}`	`const name = {█}`
`coi→`	const object interface		`const name: Interface = {█}`
`ca→`	const array	`const name = [█]`	`const name = [█]`
`cat→`	const array type		`const name: type = [█]`
`cam→`	const array multiple type		`const name: (type \| type) = [█]`

Destructuring

Trigger	Description	Result JS/TS
`cod→`	const object dest	`const {prop, prop} = name█`
`codr→`	const object dest with rest	`const {prop, prop, ...rest} = name█`
`cad→`	const array dest	`const [prop, prop] = name█`
`cadr→`	const array dest with rest	`const [prop, prop, ...rest] = name█`
`pd→`	parameter object dest	`{prop, prop█}`
`pdr→`	parameter object dest with rest	`{prop, prop, ...rest█}`

Object Elements

Trigger	Description	Result JS/TS
`oev→`	obj element variable	`key: value,█`
`oes→`	obj element string	`key: 'value',█`
`oen→`	obj element number	`key: number,█`
`oeb→`	obj element boolean	`key: true,█`
`oeo→`	obj element object	`key: { element },█`
`oeom→`	obj element object multiline	`key: { element, },█`
`oea→`	obj element array	`key: [ value ],█`
`oeam→`	obj element array multiline	`key: [ value, ],█`

JSON Elements

Trigger	Description	Result JS/TS
`jev→`	json element variable	`key: value,█`
`jes→`	json element string	`key: 'value',█`
`jen→`	json element number	`key: number,█`
`jeb→`	json element boolean	`key: true,█`
`jeo→`	json element object	`key: { element }█`
`jeom→`	json element object multiline	`key: { element , },█`
`jea→`	json element array	`key: [ value ],█`
`jeam→`	json element array multiline	`key: [ value , ],█`