Modern JavaScript Snippets ⚡
Short and memorable JavaScript & TypeScript snippets for the modern-day developer.
Features
- Over 180 carefully crafted snippets
- Modern JavaScript syntax
- Modern JavaScript APIs (Intl, URL, Navigator...)
- Strategically placed tabstops
- Prefixes created with exact-match in mind
- (Mostly) GitHub Copilot compliant
- Auto-generated documentation
Support
Only JavaScript and TypeScript will be supported.
Specific frameworks will get their own extensions. No bloat.
Setup
The following is not mandatory, but could provide a nicer experience. Test them out and see what works best for you.
Look for it in user settings, or edit the settings.json directly:
// Mainly to strip semicolons added for better tabstop management during active snippet (or add them, according to your formatter config)
"editor.formatOnSave": true,
// Tab complete snippets when their prefix match. Works best when 'quickSuggestions' aren't enabled.
"editor.tabCompletion": "onlySnippets"
// Controls whether an active snippet prevents quick suggestions. It has its pros and cons though.
// "editor.suggest.snippetsPreventQuickSuggestions": false,
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 |
c |
const |
const $0
|
l |
let |
let $0
|
ca |
const assignment |
const $1 = $2;
|
la |
let assignment |
let $1 = $2;
|
cas |
const string assignment |
const $1 = '$2';
|
las |
let string assignment |
let $1 = '$2';
|
car |
const array assignment |
const $1 = [$0]
|
cao |
const object assignment |
const $1 = { $0 }
|
dob |
object destructuring |
const { $2 } = ${1:object};
|
dar |
array destructuring |
const [$2] = ${1:array};
|
Functions
| Prefix |
Name |
Body |
fn |
function |
function $1($2) {
$0
}
|
fna |
async function |
async function $1($2) {
$0
}
|
nfn |
named arrow function |
const ${1} = ($2) => {$0}
|
nfna |
async named arrow function |
const $1 = async ($2) => {$0}
|
af |
arrow function |
($1) => $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) {$2}
|
ifel |
if/else statement |
if ($1) {$2} else {$3}
|
ifei |
if/else-if statement |
if ($1) {$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 = $2 ? $3 : $4
|
sw |
switch |
switch ($1) {
case $2 : $3
default: $0
}
|
scase |
switch case |
case $1 : $2
|
tc |
try/catch |
try {
$1
} catch (error) {
$0
}
|
tcf |
try/catch/finally |
try {
$1
} catch (error) {
$2
} finally {
$3
}
|
tf |
try/finally |
try {
$1
} finally {
$2
}
|
Loops
| Prefix |
Name |
Body |
fl |
for loop |
for (let ${1:i} = 0, ${2:len} = ${3:iter}.length; ${1:i} < ${2:len}; ${1:i}++) {
$0
}
|
rfl |
reverse for loop |
for (let ${1:i} = ${2:iter}.length - 1; ${1:i} >= 0; ${1:i}--) {
$0
}
|
flr |
for loop (range) |
for (let ${1:i} = 0; ${1:i} < ${2:5}; ${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
}
|
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
})
|
fmap |
Array.map() |
$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)
|
mapStr |
Array.map() as string |
$1.map(String)
|
mapNum |
Array.map() as number |
$1.map(Number)
|
filterTrue |
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 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
|
ime |
import meta env |
import.meta.env.$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 |
fetch($1).then(res => res.json())
|
feta |
fetch assignment |
const ${1|data,...|} = await fetch($2).then(res => res.json())
|
pr |
promise |
new Promise((resolve, reject) => {
$0
})
|
prs |
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 |
al |
array literal |
[$0]
|
ol |
object literal |
{ $1: $2,$0 }
|
ole |
object literal expanded |
{
$1: $2,$0
}
|
tl |
template literal |
`$0`
|
tle |
template literal expression |
`$1${$2}$3`
|
tlo |
template literal operation |
${$1}$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
|
nc |
nullish coalescing (??) |
?? $0
|
eq |
strict equality (===) |
=== $0
|
ore |
logical OR expression |
$1 || $0
|
ande |
logical AND expression |
$1 && $0
|
nce |
nullish coalescing expression (??) |
$1 ?? $0
|
eqe |
strict equality expression |
$1 === $0
|
ora |
logical OR assignment (||=) |
$1 ||= $0;
|
nca |
nullish coalescing assignment (??=) |
$1 ??= $0;
|
inc |
addition assignment |
$1 += ${0:1}
|
sub |
subtraction assignment |
$1 -= ${0:1}
|
mul |
multiplication assignment |
$1 *= ${0:1}
|
div |
division assignment |
$1 /= ${0:1}
|
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);
|
nur |
new URL |
new URL($1)
|
usp |
url search params |
new URL($1).searchParams
|
spg |
get search param |
$1.searchParams.get($2)
|
sps |
set search param |
$1.searchParams.set($2, $3)
|
Returns and exceptions
| Prefix |
Name |
Body |
re |
return |
return $0
|
reo |
return object |
return {
$0
}
|
rei |
return object inline |
return ({$0})
|
te |
throw error |
throw new ${1|Error,...|}($0)
|
Timers
| Prefix |
Name |
Body |
si |
set interval |
setInterval(() => {
$0
}, ${1:delay});
|
st |
set timeout |
setTimeout(() => {
$0
}, ${1:delay});
|
sim |
set immediate |
setImmediate(() => {
$0
});
|
nt |
process next tick |
process.nextTick(() => {
$0
});
|
JSON
| Prefix |
Name |
Body |
jp |
JSON parse |
JSON.parse(${1:json})
|
js |
JSON stringify |
JSON.stringify(${1:value})
|
jsf |
JSON stringify (formatted) |
JSON.stringify(${1:value}, null, 2)
|
jss |
JSON.stringify if not string |
typeof $1 === 'string' ? $1 : JSON.stringify($1)
|
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)
|
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)
|
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 === '${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
})
|
Misc
| Prefix |
Name |
Body |
us |
'use strict' statement |
'use strict'
|
pse |
process.server |
process.server
|
pcl |
process.client |
process.client
|
env |
env variable |
process.env.$0
|
envv |
env variable (vite) |
import.meta.env.$0
|
TypeScript
Available only where TypeScript is supported
Declarations
| Prefix |
Name |
Body |
cat |
const assignment (typed) |
const $1: ${2:string} = $3;
|
lat |
let assignment (typed) |
let $1: ${2:string} = $3;
|
caat |
array assignment (typed) |
const $1: ${2:string}[] = [$0];
|
caot |
object assignment (typed) |
const $1: ${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} = $0
|
tpu |
type union |
type ${1:Model} = $2 | $3
|
tpi |
type intersection |
type ${1:Model} = $2 & $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
| |
