DEV Community

Cover image for VSCode Extension - Arrow Function Snippets
Camilo Martinez
Camilo Martinez

Posted on • Updated on

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.

Arrow Function Snippets

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

Function

Create a response for fetch promise with afrj and afrd

Promise


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 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
}█

Arrays

Trigger Description Result JS/TS
arfe→ first element array.at(1)█
arle→ last element array.at(-1)█
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)█

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 ,
],█

ℹ️ Only available in .json, .jsonc and .json5 files

Back to menu


That’s All Folks!
Happy Coding 🖖

Buy me a coffee

Discussion (0)