Modern JavaScript Snippets ⚡

Short and effective JavaScript & TypeScript snippets for the modern-day developer.

Features

• Over 200 carefully crafted snippets
• Modern JavaScript syntax
• Modern JavaScript APIs (Intl, URL, Navigator...)
• Strategically placed tabstops
• Prefixes created with exact-match in mind
• Auto-generated documentation

Support

Only JavaScript and TypeScript will be supported. Specific frameworks get their own extensions. No bloat.

Setup

The following is not mandatory, but could provide a nicer experience. Test them out and decide what works best for you.

Look for it in user settings, or edit the settings.json directly:

"editor.formatOnSave": true,

// Tab complete snippets when their prefix match. Works best when 'quickSuggestions' aren't enabled.
"editor.tabCompletion": "onlySnippets"

Style

Most of the code snippets are without semicolons (;), except for where it allows for better tabstop management. Strings use single quotes (').

It's highly recommended to use these snippets along with Prettier/ESLint to have your code automatically formatted to your preference.

Snippet syntax

Tabstops

• $1, $2, $3 specify cursor locations, in order in which tabstops will be visited
• $0 denotes the final cursor position
• Multiple occurrences of the same tabstop are linked and updated in sync

Placeholders

• Tabstops with default values → ${1:name}

Choices

• Tabstops with multiple values → ${1|one,two,three|}.
• Truncated in documentation, for easier viewing → ${1|one,...|}.

Snippets

Assignments

Prefix	Name	Body
ca	const assignment	const ${1:name} = $2
la	let assignment	let ${1:name} = $2
cas	const string assignment	const ${1:name} = '$2'
las	let string assignment	let ${1:name} = '$2'
caa	const array assignment	const ${1:arr} = [$0]
cao	const object assignment	const ${1:obj} = { $0 }
dob	object destructuring	const { $2 } = ${1:obj}$0
dar	array destructuring	const [$2] = ${1:arr}$0

Functions

Prefix	Name	Body
fn	function	function ${1:fn}($2) { $0 }
fna	async function	async function ${1:fn}($2) { $0 }
nfn	named arrow function	const ${1:fn} = ($2) => {$0}
nfna	async named arrow function	const ${1:fn} = async ($2) => {$0}
af	arrow function	($1) => $0
arr	arrow function arrow	=> $0
afa	async arrow function	async ($1) => $0
afb	arrow function with body	($1) => { $0 }
afba	async arrow function with body	async ($1) => { $0 }
iife	immediately-invoked function expression	(($1) => { $0 })($2)

Flow control

Prefix	Name	Body
iff	if statement	if (${1:true}) {$2}
ifel	if/else statement	if (${1:true}) {$2} else {$3}
ifei	if/else-if statement	if (${1:true}) {$2} else if ($3) {$4}
el	else statement	else { $0 }
ei	else if statement	else if ($1) {$2}
ter	ternary operator	$1 ? $2 : $3
tera	ternary expression assignment	const ${1:name} = $2 ? $3 : $4
sw	switch	switch ($1) { case $2 : $3 default: $0 }
scase	switch case	case $1 : $2
tc	try/catch	try { $1 } catch (err) { $0 }
tcf	try/catch/finally	try { $1 } catch (err) { $2 } finally { $3 }
tf	try/finally	try { $1 } finally { $2 }

Loops

Prefix	Name	Body
flr	for loop (range)	for (let ${1:i} = 0; ${1:i} < ${2:5}; ${1:i}++) { $0 }
rfl	reverse for loop	for (let ${1:i} = ${2:iter}.length - 1; ${1:i} >= 0; ${1:i}--) { $0 }
fin	for...in loop	for (let ${1:key} in ${2:array}) { $0 }
fof	for...of loop	for (let ${1:item} of ${2:items}) { $0 }
fofa	for await...of loop	for await (let ${1:item} of ${2:items}) { $0 }
wl	while loop	while (${1:true}) { $0 }
dwl	do while loop	do { $0 } while ($1)

Classes

Prefix	Name	Body
cs	class	class $1 { $0 }
cse	class extends	class $1 extends ${2:Base} { $0 }
csp	class proprety	${1:name} = ${2:value}
csc	class with constructor	class $1 { constructor($2) { $0 } }
csec	class extends with constructor	class $1 extends ${2:Base} { constructor($3) { $0 } }
cst	class constructor	constructor($1) { $0 }
get	getter	get ${1:property}() { $0 }
set	setter	set ${1:property}(${2:value}) { $0 }
gs	getter and setter	get ${1:property}() { $0 } set ${1:property}(${2:value}) { $0 }
met	method	${1:name}($2) { $0 }
meta	async method	async ${1:name}($2) { $0 }

Array methods

Prefix	Name	Body
aat	array.at	$1.at(${2:0})
fe	Array.forEach()	$1.forEach((${2:item}) => { $0 })
map	Array.map()	$1.map((${2:item}) => ${3})
fmap	Array.flatMap()	$1.flatMap((${2:item}) => ${3})
reduce	Array.reduce()	$1.reduce((${2:acc}, ${3:curr}) => { $0 }, ${4:initial})
reduceRight	Array.reduceRight()	$1.reduceRight((${2:acc}, ${3:curr}) => { $0 }, ${4:initial})
filter	Array.filter()	$1.filter((${2:item}) => ${3})
find	Array.find()	$1.find((${2:item}) => ${3})
findl	Array.findLast()	$1.findLast((${2:item}) => ${3})
findi	Array.findIndex()	$1.findIndex((${2:item}) => ${3})
findli	Array.findLastIndex()	$1.findLastIndex((${2:item}) => ${3})
every	Array.every()	$1.every((${2:item}) => ${3})
some	Array.some()	$1.some((${2:item}) => ${3})
reverse	Array.reverse()	$1.reverse()
sort	Array.sort(	$1.sort((${2:a}, ${3:b}) => $4)
group	Array.group()	$1.group((${2:item}) => $3)
groupMap	Array.groupToMap()	$1.groupToMap((${2:item}) => $3)
mapStr	Array.map() to string	$1.map(String)
mapNum	Array.map() to number	$1.map(Number)
mapBool	Array.map() to boolean	$1.map(Boolean)
filterTruthy	Array.filter() truthy	$1.filter(Boolean)
arfr	Array.from	Array.from($1)

Modules

Prefix	Name	Body
im	import from module	import { $2 } from '${1:module}'
imd	import default	import ${2:thing} from '${1:module}'
ima	import as	import ${2:*} as ${3:name} from '${1:module}'
imf	import file	import '$1'
imp	import dynamic	import('$0')
impa	await import dynamic	await import('$0')
imm	import meta	import.meta.$0
ex	export	export $0
exd	export default	export default $0
exf	export from	export { $0 } from '${1:module}'
exa	export all from	export * from '${1:module}'
exo	export object	export const ${1:name} = { $0 }
efn	export function	export function ${1:name}($2) { $0 }
edfn	export default function	export default function ${1:name}($2) { $0 }
enfn	export named arrow function	export const ${1:name} = ($2) => {$0}

Promises

Prefix	Name	Body
fet	fetch	await fetch($1).then(res => res.json())
feta	fetch assignment	const ${1|data,...|} = await fetch($2).then(res => res.json())
npr	promise	new Promise((resolve, reject) => { $0 })
prr	Promise.resolve	Promise.resolve($1)
prj	Promise.reject	Promise.reject($1)
then	promise then()	$1.then((${2:value}) => $0)
catc	promise catch()	$1.catch((${2:err}) => $0)
thenc	promise then().catch()	$1.then((${2:value}) => $3) .catch((${4:err}) => $5)
pra	Promise.all	Promise.all($1)
pras	Promise.allSettled	Promise.allSettled($1)
pran	Promise.any	Promise.any($1)

Literals, operators, expressions

Grouping them all together for now

Prefix	Name	Body
arr	array literal	[$0]
ob	object literal	{ }
tl	template literal	`$0`
tle	template literal operation	${${1:name}}$0
ns	new Set	new Set($1)
nm	new Map	new Map($1)
am	array merge	[...$1]
om	object merge	{ ...$1 }
or	OR (||)	|| $0
and	AND (&&)	&& $0
lt	less than (<)	< $0
lte	less than or equal to (<=)	<= $0
gt	greater than (>)	> $0
gte	greater than or equal to (>=)	>= $0
nc	nullish coalescing (??)	?? $0
neq	strict non-equality (===)	!== $0
eq	strict equality (===)	=== $0
ora	logical OR assignment (||=)	||= $0
nca	nullish coalescing assignment (??=)	??= $0
plus	addition	+ $0
minus	subtraction	- $0
mul	multiplication	* $0
div	division	/ $0
mod	modulo	% $0
inc	addition assignment	+= ${0:1}
sub	subtraction assignment	-= ${0:1}
mula	multiplication assignment	*= ${0:1}
diva	division assignment	/= ${0:1}
col	colon	:

Objects

Prefix	Name	Body
oe	Object.entries	Object.entries($0)
ofe	Object.fromEntries	Object.fromEntries($0)
ok	Object.keys	Object.keys($0)
ov	Object.values	Object.values($0)

Utilities

Prefix	Name	Body
pi	parse int	parseInt($1, ${2|10,...|})
pf	parse float	parseFloat($1)
uniq	array of unique values	[...new Set($0)]
seq	sequence of 0..n	[...Array(${1:length}).keys()]
cp	copy to clipboard	navigator.clipboard.writeText($1)
nurl	new URL	new URL($1)
sp	url search params	new URLSearchParams($1)
spa	url search params assignment	const ${1:params} = new URLSearchParams($2)
spg	get search param	${1:params}.get($2)
sps	set search param	${1:params}.set($2, $3)

Returns and exceptions

Prefix	Name	Body
ret	return	return $0
reo	return object	return { $0 }
rei	return object inline	return ({$0})
terr	throw error	throw new ${1|Error,...|}($0)

Timers

Prefix	Name	Body
si	set interval	setInterval(() => { $0 }, ${1:1000})
st	set timeout	setTimeout(() => { $0 }, ${1:1000})
sim	set immediate	setImmediate(() => { $0 })
prnt	process next tick	process.nextTick(() => { $0 })

JSON

Prefix	Name	Body
jsp	JSON parse	JSON.parse(${1:json})
jss	JSON stringify	JSON.stringify(${1:value})
jssf	JSON stringify (formatted)	JSON.stringify(${1:value}, null, 2)

Console

Prefix	Name	Body
cl	console.log	console.log($0)
ci	console.info	console.info($1)
cdi	console.dir	console.dir($1)
ce	console.error	console.error($1)
cw	console.warn	console.warn($1)
ct	console.time	console.time('$1') $0 console.timeEnd('$1')
ctb	console.table	console.table($1)
clr	console.clear	console.clear()
clm	console.log message	console.log('$0')
clo	console.log object	console.log({ $0 })
clc	console.log clipboard	console.log({ $CLIPBOARD })
cll	console.log (labeled)	console.log('$1 :', $1$2)
cil	console.info (labeled)	console.info('$1 :', $1$2)
cel	console.error (labeled)	console.error('$1 :', $1$2)
cwl	console.warn (labeled)	console.warn('$1 :', ${2:$1})

Dates

Prefix	Name	Body
nd	new Date()	new Date($1)
nds	new Date() with date string	new Date('${1:2023}-${2:|01,...|}-${3:31}')
now	Date.now()	Date.now()
tls	Date.toLocaleString()	$1.toLocaleString('${2|en-US,...|}'$3)

DOM

Prefix	Name	Body
qs	query selector	${1:document}.querySelector('$2')
qsa	query selector all	${1:document}.querySelectorAll('$2')
qsaa	query selector all as array	[...${1:document}.querySelectorAll('$2')]
ael	event listener	${1:document}.addEventListener('${2:click}', (e$3) => $0)
qsae	query selector with event listener	${1:document}.querySelector('$2')?.addEventListener('${3:click}', (e$4) => $0)
gid	get element by id	${1:document}.getElementById('$2')

Node

Prefix	Name	Body
req	require	require('${1:module}')
rqr	require assignment	const $1 = require('${1:module}')
mex	module.exports	module.exports = {$1}

Intl

Internationalization API

Prefix	Name	Body
inf	Intl.NumberFormat	new Intl.NumberFormat('${1|en-US,...|}'$3).format($2)
infs	Intl.NumberFormat style	new Intl.NumberFormat('${1|en-US,...|}', { style: '${3|decimal,...|}',$4 }).format($2)
infc	Intl.NumberFormat as currency	new Intl.NumberFormat('${1|en-US,...|}', { style: 'currency', currency: '${3|USD,...|}',$4 }).format($2)
infp	Intl.NumberFormat as percentage	new Intl.NumberFormat('${1|en-US,...|}', { style: 'percent',$3 }).format($2)
infu	Intl.NumberFormat as unit	new Intl.NumberFormat('${1|en-US,...|}', { style: 'unit', unit: '${3|acceleration-g-force,...|}', unitDisplay: '${4|long,...|}',$0 }).format($2)
idtf	Intl.DateTimeFormat	new Intl.DateTimeFormat('${1|en-US,...|}'$3).format($2)
idtfs	Intl.DateTimeFormat with style	new Intl.DateTimeFormat ('${1|en-US,...|}', { dateStyle: '$3',$0 }).format($2)

Types

Prefix	Name	Body
aia	is array	Array.isArray($0)
tof	typeof	typeof $1
tofc	typeof check	typeof $1 === '${2|undefined,...|}'
iof	instanceof	$1 instanceof ${0:Class}
isnil	is nil	$1 == null
nnil	is not nil	$1 != null
isnan	is NaN	isNaN($0)
nnan	is not NaN	!isNaN($0)

Testing

Prefix	Name	Body
desc	describe	describe('$1', () => { $0 })
cont	context	context('$1', () => { $0 })
it	test (synchronous)	it('$1', () => { $0 })
ita	test (asynchronous)	it('$1', async () => { $0 })
itc	test (callback)	it('$1', (done) => { $0 done() })
bf	before test suite	before(() => { $0 })
bfe	before each test	beforeEach(() => { $0 })
aft	after test suite	after(() => { $0 })
afe	after each test	afterEach(() => { $0 })

Globals

Prefix	Name	Body
wlo	window.location	window.location
wlh	window.location.href	window.location.href

Misc

Prefix	Name	Body
us	'use strict' statement	'use strict'
prs	process.server	process.server
prc	process.client	process.client
env	env variable	process.env.$0
envv	env variable (meta)	import.meta.env.$0

TypeScript

Available only where TypeScript is supported

Declarations

Prefix	Name	Body
cat	const assignment (typed)	const ${1:name}: ${2:string} = $3
lat	let assignment (typed)	let ${1:name}: ${2:string} = $3
caat	array assignment (typed)	const ${1:arr}: ${2:string}[] = [$0]
caot	object assignment (typed)	const ${1:obj}: ${2:object} = { $0 }

Types

Prefix	Name	Body
int	interface	interface ${1:Model} { $0 }
inte	interface extends	interface ${1:Model} extends ${2:Base} { $0 }
tp	type	type ${1:Model} = $2
tpu	type union	type ${1:Model} = ${2:string} | ${3:number}
tpi	type intersection	type ${1:Model} = $2 & $3

DOM

Prefix	Name	Body
qst	query selector (typed)	${1:document}.querySelector<${2|HTMLElement,...|}>('$3')
qsat	query selector all (typed)	${1:document}.querySelectorAll<${2|HTMLElement,...|}>('$3')
qsaat	query selector all as array (typed)	[...${1:document}.querySelectorAll<${2|HTMLElement,...|}>('$3')]
gidt	get element by id (typed)	${1:document}.getElementById<${2|HTMLElement,...|}>('$3')

Running locally

# ensure Deno is installed
# https://deno.land/manual@v1.29.1/getting_started/installation

# generate .code-snippets and documentation
npm run generate