DEV Community

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

Posted on • Edited on

VSCode Extension - Arrow Function Snippets

#vscode #productivity #webdev #showdev

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 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 🖖

beer

Top comments (0)

Read next

dotnetfullstackdev profile image

Experimental attribute in C# is a powerful tool : Let's explore

DotNet Full Stack Dev -

wojciech_piotrka_4898763 profile image

Getting Started with AWS Landing Zone: Tips for Terraform Setup

Wojciech Kaczmarczyk -

koolkamalkishor profile image

Evaluating Medical Retrieval-Augmented Generation (RAG) with NVIDIA AI Endpoints and Ragas

KAMAL KISHOR -

igbikisimewari profile image

Best Version Control Practices Every React Development Team Needs To Know

Joseph Abraham -