VSCode Extension - Arrow Function Snippets

I'm in love with terminal alias, keyboard shortcuts, emmet and VSCode snippets for development.

I recently found myself writing a lot of JS arrow functions in a project and previously I've created an AutoHotKey script to write it with a combination of keys on my keyboard, but it was not enough.

So I've decided to search for a snippets extension for Arrow Functions and the only one that I found doesn't cover my needs and that's how was born Arrow Functions Snippets my very first VSCode extension.

I'm started only with arrow functions in mind, but actually also covers variable creation of different types and destructuring in Javascript, Typescript, React, and Vue.

You are welcome to try it! 👩‍💻👨‍💻

Examples

Create a named arrow function combining cv and af

Create a response for fetch promise with afrj and afrd

Snippets

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

Arrow Function

Trigger	Description	Result JS/TS
`af→`	implicit return without arg(s	`() => █`
`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 █ }`
`afee→`	explicit empty	`() => { █ }`
`afeea→`	explicit empty with arg(s)	`(arg) => { █ }`
`afp→`	explicit with parentheses	`() => { (█) }`
`afpa→`	explicit with parentheses 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 }█`

Arrays

Trigger	Description	Result JS/TS
`arfeq→`	filter equal	`const newArray = array.filter((element) => element === value)█`
`arfne→`	filter not equal	`const newArray = array.filter((element) => element !== value)█`
`arfoeq→`	filter object equal	`const newArray = array.filter((element) => element.prop === value)█`
`arfone→`	filter object not equal	`const newArray = array.filter((element) => element.prop !== value)█`
`arsna→`	sort number ascending	`array.sort((a, b) => a - b)█`
`arsnd→`	sort number descending	`array.sort((a, b) => b - a)█`
`aruv→`	unique values	`const newArray = array.filter((current, index, arr) => arr.indexOf(current) == index)█`

Functions

Trigger	Description	Result JS	Result TS
`edaf→`	export default anonymous arrow function	`export default () => { █ }`	`export default () => { █ }`
`edaaf→`	export default async anonymous arrow function	`export default async () => { █ }`	`export default async () => { █ }`
`caf→`	const arrow function	`const name = () => { █ }`	`const name = () => { █ }`
`ecaf→`	export const arrow function	`export const name = () => { █ }`	`export const name = () => { █ }`
`caaf→`	const async arrow function	`const name = async () => { █ }`	`const name = async () => { █ }`
`ecaaf→`	export const async arrow function	`export const name = async () => { █ }`	`export const name = async () => { █ }`
`caft→`	const arrow function with type		`const name = () : type => { █ }`
`ecaft→`	export const arrow function with type		`export const name = () : type => { █ }`
`caaft→`	const async arrow function with type		`const name = async () : type => { █ }`
`ecaaft→`	export const async arrow function with type		`export const name = async () : type => { █ }`

That’s All Folks!
Happy Coding 🖖

Blog