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