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

License

matijaoe/modern-javascript-snippets

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 7

Uh oh!

Languages