https://github.com/matijaoe/modern-javascript-snippets
⚡ Short and effective JavaScript & TypeScript snippets for the modern-day developer
https://github.com/matijaoe/modern-javascript-snippets
deno javascript-snippets typescript typescript-snippets vscode vscode-snippets
Last synced: 2 months ago
JSON representation
⚡ Short and effective JavaScript & TypeScript snippets for the modern-day developer
- Host: GitHub
- URL: https://github.com/matijaoe/modern-javascript-snippets
- Owner: matijaoe
- License: mit
- Created: 2022-12-18T19:36:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-12T12:11:51.000Z (over 1 year ago)
- Last Synced: 2025-03-23T23:26:56.305Z (3 months ago)
- Topics: deno, javascript-snippets, typescript, typescript-snippets, vscode, vscode-snippets
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=matijao.modern-js-snippets
- Size: 202 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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:
```jsonc
"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
```javascript
const ${1:name} = $2
```
la
let assignment
```javascript
let ${1:name} = $2
```
cas
const string assignment
```javascript
const ${1:name} = '$2'
```
las
let string assignment
```javascript
let ${1:name} = '$2'
```
caa
const array assignment
```javascript
const ${1:arr} = [$0]
```
cao
const object assignment
```javascript
const ${1:obj} = { $0 }
```
dob
object destructuring
```javascript
const { $2 } = ${1:obj}$0
```
dar
array destructuring
```javascript
const [$2] = ${1:arr}$0
```
### Functions
Prefix
Name
Body
fn
function
```javascript
function ${1:fn}($2) {
$0
}
```
fna
async function
```javascript
async function ${1:fn}($2) {
$0
}
```
nfn
named arrow function
```javascript
const ${1:fn} = ($2) => {$0}
```
nfna
async named arrow function
```javascript
const ${1:fn} = async ($2) => {$0}
```
af
arrow function
```javascript
($1) => $0
```
arr
arrow function arrow
```javascript
=> $0
```
afa
async arrow function
```javascript
async ($1) => $0
```
afb
arrow function with body
```javascript
($1) => {
$0
}
```
afba
async arrow function with body
```javascript
async ($1) => {
$0
}
```
iife
immediately-invoked function expression
```javascript
(($1) => {
$0
})($2)
```
### Flow control
Prefix
Name
Body
iff
if statement
```javascript
if (${1:true}) {$2}
```
ifel
if/else statement
```javascript
if (${1:true}) {$2} else {$3}
```
ifei
if/else-if statement
```javascript
if (${1:true}) {$2} else if ($3) {$4}
```
el
else statement
```javascript
else {
$0
}
```
ei
else if statement
```javascript
else if ($1) {$2}
```
ter
ternary operator
```javascript
$1 ? $2 : $3
```
tera
ternary expression assignment
```javascript
const ${1:name} = $2 ? $3 : $4
```
sw
switch
```javascript
switch ($1) {
case $2 : $3
default: $0
}
```
scase
switch case
```javascript
case $1 : $2
```
tc
try/catch
```javascript
try {
$1
} catch (err) {
$0
}
```
tcf
try/catch/finally
```javascript
try {
$1
} catch (err) {
$2
} finally {
$3
}
```
tf
try/finally
```javascript
try {
$1
} finally {
$2
}
```
### Loops
Prefix
Name
Body
flr
for loop (range)
```javascript
for (let ${1:i} = 0; ${1:i} < ${2:5}; ${1:i}++) {
$0
}
```
rfl
reverse for loop
```javascript
for (let ${1:i} = ${2:iter}.length - 1; ${1:i} >= 0; ${1:i}--) {
$0
}
```
fin
for...in loop
```javascript
for (let ${1:key} in ${2:array}) {
$0
}
```
fof
for...of loop
```javascript
for (let ${1:item} of ${2:items}) {
$0
}
```
fofa
for await...of loop
```javascript
for await (let ${1:item} of ${2:items}) {
$0
}
```
wl
while loop
```javascript
while (${1:true}) {
$0
}
```
dwl
do while loop
```javascript
do {
$0
} while ($1)
```
### Classes
Prefix
Name
Body
cs
class
```javascript
class $1 {
$0
}
```
cse
class extends
```javascript
class $1 extends ${2:Base} {
$0
}
```
csp
class proprety
```javascript
${1:name} = ${2:value}
```
csc
class with constructor
```javascript
class $1 {
constructor($2) {
$0
}
}
```
csec
class extends with constructor
```javascript
class $1 extends ${2:Base} {
constructor($3) {
$0
}
}
```
cst
class constructor
```javascript
constructor($1) {
$0
}
```
get
getter
```javascript
get ${1:property}() {
$0
}
```
set
setter
```javascript
set ${1:property}(${2:value}) {
$0
}
```
gs
getter and setter
```javascript
get ${1:property}() {
$0
}
set ${1:property}(${2:value}) {
$0
}
```
met
method
```javascript
${1:name}($2) {
$0
}
```
meta
async method
```javascript
async ${1:name}($2) {
$0
}
```
### Array methods
Prefix
Name
Body
aat
array.at
```javascript
$1.at(${2:0})
```
fe
Array.forEach()
```javascript
$1.forEach((${2:item}) => {
$0
})
```
map
Array.map()
```javascript
$1.map((${2:item}) => ${3})
```
fmap
Array.flatMap()
```javascript
$1.flatMap((${2:item}) => ${3})
```
reduce
Array.reduce()
```javascript
$1.reduce((${2:acc}, ${3:curr}) => {
$0
}, ${4:initial})
```
reduceRight
Array.reduceRight()
```javascript
$1.reduceRight((${2:acc}, ${3:curr}) => {
$0
}, ${4:initial})
```
filter
Array.filter()
```javascript
$1.filter((${2:item}) => ${3})
```
find
Array.find()
```javascript
$1.find((${2:item}) => ${3})
```
findl
Array.findLast()
```javascript
$1.findLast((${2:item}) => ${3})
```
findi
Array.findIndex()
```javascript
$1.findIndex((${2:item}) => ${3})
```
findli
Array.findLastIndex()
```javascript
$1.findLastIndex((${2:item}) => ${3})
```
every
Array.every()
```javascript
$1.every((${2:item}) => ${3})
```
some
Array.some()
```javascript
$1.some((${2:item}) => ${3})
```
reverse
Array.reverse()
```javascript
$1.reverse()
```
sort
Array.sort(
```javascript
$1.sort((${2:a}, ${3:b}) => $4)
```
group
Array.group()
```javascript
$1.group((${2:item}) => $3)
```
groupMap
Array.groupToMap()
```javascript
$1.groupToMap((${2:item}) => $3)
```
mapStr
Array.map() to string
```javascript
$1.map(String)
```
mapNum
Array.map() to number
```javascript
$1.map(Number)
```
mapBool
Array.map() to boolean
```javascript
$1.map(Boolean)
```
filterTruthy
Array.filter() truthy
```javascript
$1.filter(Boolean)
```
arfr
Array.from
```javascript
Array.from($1)
```
### Modules
Prefix
Name
Body
im
import from module
```javascript
import { $2 } from '${1:module}'
```
imd
import default
```javascript
import ${2:thing} from '${1:module}'
```
ima
import as
```javascript
import ${2:*} as ${3:name} from '${1:module}'
```
imf
import file
```javascript
import '$1'
```
imp
import dynamic
```javascript
import('$0')
```
impa
await import dynamic
```javascript
await import('$0')
```
imm
import meta
```javascript
import.meta.$0
```
ex
export
```javascript
export $0
```
exd
export default
```javascript
export default $0
```
exf
export from
```javascript
export { $0 } from '${1:module}'
```
exa
export all from
```javascript
export * from '${1:module}'
```
exo
export object
```javascript
export const ${1:name} = { $0 }
```
efn
export function
```javascript
export function ${1:name}($2) {
$0
}
```
edfn
export default function
```javascript
export default function ${1:name}($2) {
$0
}
```
enfn
export named arrow function
```javascript
export const ${1:name} = ($2) => {$0}
```
### Promises
Prefix
Name
Body
fet
fetch
```javascript
await fetch($1).then(res => res.json())
```
feta
fetch assignment
```javascript
const ${1|data,...|} = await fetch($2).then(res => res.json())
```
npr
promise
```javascript
new Promise((resolve, reject) => {
$0
})
```
prr
Promise.resolve
```javascript
Promise.resolve($1)
```
prj
Promise.reject
```javascript
Promise.reject($1)
```
then
promise then()
```javascript
$1.then((${2:value}) => $0)
```
catc
promise catch()
```javascript
$1.catch((${2:err}) => $0)
```
thenc
promise then().catch()
```javascript
$1.then((${2:value}) => $3)
.catch((${4:err}) => $5)
```
pra
Promise.all
```javascript
Promise.all($1)
```
pras
Promise.allSettled
```javascript
Promise.allSettled($1)
```
pran
Promise.any
```javascript
Promise.any($1)
```
### Literals, operators, expressions
Grouping them all together for now
Prefix
Name
Body
arr
array literal
```javascript
[$0]
```
ob
object literal
```javascript
{ }
```
tl
template literal
```javascript
`$0`
```
tle
template literal operation
```javascript
${${1:name}}$0
```
ns
new Set
```javascript
new Set($1)
```
nm
new Map
```javascript
new Map($1)
```
am
array merge
```javascript
[...$1]
```
om
object merge
```javascript
{ ...$1 }
```
or
OR (||)
```javascript
|| $0
```
and
AND (&&)
```javascript
&& $0
```
lt
less than (<)
```javascript
< $0
```
lte
less than or equal to (<=)
```javascript
<= $0
```
gt
greater than (>)
```javascript
> $0
```
gte
greater than or equal to (>=)
```javascript
>= $0
```
nc
nullish coalescing (??)
```javascript
?? $0
```
neq
strict non-equality (===)
```javascript
!== $0
```
eq
strict equality (===)
```javascript
=== $0
```
ora
logical OR assignment (||=)
```javascript
||= $0
```
nca
nullish coalescing assignment (??=)
```javascript
??= $0
```
plus
addition
```javascript
+ $0
```
minus
subtraction
```javascript
- $0
```
mul
multiplication
```javascript
* $0
```
div
division
```javascript
/ $0
```
mod
modulo
```javascript
% $0
```
inc
addition assignment
```javascript
+= ${0:1}
```
sub
subtraction assignment
```javascript
-= ${0:1}
```
mula
multiplication assignment
```javascript
*= ${0:1}
```
diva
division assignment
```javascript
/= ${0:1}
```
col
colon
```javascript
:
```
### Objects
Prefix
Name
Body
oe
Object.entries
```javascript
Object.entries($0)
```
ofe
Object.fromEntries
```javascript
Object.fromEntries($0)
```
ok
Object.keys
```javascript
Object.keys($0)
```
ov
Object.values
```javascript
Object.values($0)
```
### Utilities
Prefix
Name
Body
pi
parse int
```javascript
parseInt($1, ${2|10,...|})
```
pf
parse float
```javascript
parseFloat($1)
```
uniq
array of unique values
```javascript
[...new Set($0)]
```
seq
sequence of 0..n
```javascript
[...Array(${1:length}).keys()]
```
cp
copy to clipboard
```javascript
navigator.clipboard.writeText($1)
```
nurl
new URL
```javascript
new URL($1)
```
sp
url search params
```javascript
new URLSearchParams($1)
```
spa
url search params assignment
```javascript
const ${1:params} = new URLSearchParams($2)
```
spg
get search param
```javascript
${1:params}.get($2)
```
sps
set search param
```javascript
${1:params}.set($2, $3)
```
### Returns and exceptions
Prefix
Name
Body
ret
return
```javascript
return $0
```
reo
return object
```javascript
return {
$0
}
```
rei
return object inline
```javascript
return ({$0})
```
terr
throw error
```javascript
throw new ${1|Error,...|}($0)
```
### Timers
Prefix
Name
Body
si
set interval
```javascript
setInterval(() => {
$0
}, ${1:1000})
```
st
set timeout
```javascript
setTimeout(() => {
$0
}, ${1:1000})
```
sim
set immediate
```javascript
setImmediate(() => {
$0
})
```
prnt
process next tick
```javascript
process.nextTick(() => {
$0
})
```
### JSON
Prefix
Name
Body
jsp
JSON parse
```javascript
JSON.parse(${1:json})
```
jss
JSON stringify
```javascript
JSON.stringify(${1:value})
```
jssf
JSON stringify (formatted)
```javascript
JSON.stringify(${1:value}, null, 2)
```
### Console
Prefix
Name
Body
cl
console.log
```javascript
console.log($0)
```
ci
console.info
```javascript
console.info($1)
```
cdi
console.dir
```javascript
console.dir($1)
```
ce
console.error
```javascript
console.error($1)
```
cw
console.warn
```javascript
console.warn($1)
```
ct
console.time
```javascript
console.time('$1')
$0
console.timeEnd('$1')
```
ctb
console.table
```javascript
console.table($1)
```
clr
console.clear
```javascript
console.clear()
```
clm
console.log message
```javascript
console.log('$0')
```
clo
console.log object
```javascript
console.log({ $0 })
```
clc
console.log clipboard
```javascript
console.log({ $CLIPBOARD })
```
cll
console.log (labeled)
```javascript
console.log('$1 :', $1$2)
```
cil
console.info (labeled)
```javascript
console.info('$1 :', $1$2)
```
cel
console.error (labeled)
```javascript
console.error('$1 :', $1$2)
```
cwl
console.warn (labeled)
```javascript
console.warn('$1 :', ${2:$1})
```
### Dates
Prefix
Name
Body
nd
new Date()
```javascript
new Date($1)
```
nds
new Date() with date string
```javascript
new Date('${1:2023}-${2:|01,...|}-${3:31}')
```
now
Date.now()
```javascript
Date.now()
```
tls
Date.toLocaleString()
```javascript
$1.toLocaleString('${2|en-US,...|}'$3)
```
### DOM
Prefix
Name
Body
qs
query selector
```javascript
${1:document}.querySelector('$2')
```
qsa
query selector all
```javascript
${1:document}.querySelectorAll('$2')
```
qsaa
query selector all as array
```javascript
[...${1:document}.querySelectorAll('$2')]
```
ael
event listener
```javascript
${1:document}.addEventListener('${2:click}', (e$3) => $0)
```
qsae
query selector with event listener
```javascript
${1:document}.querySelector('$2')?.addEventListener('${3:click}', (e$4) => $0)
```
gid
get element by id
```javascript
${1:document}.getElementById('$2')
```
### Node
Prefix
Name
Body
req
require
```javascript
require('${1:module}')
```
rqr
require assignment
```javascript
const $1 = require('${1:module}')
```
mex
module.exports
```javascript
module.exports = {$1}
```
### Intl
Internationalization API
Prefix
Name
Body
inf
Intl.NumberFormat
```javascript
new Intl.NumberFormat('${1|en-US,...|}'$3).format($2)
```
infs
Intl.NumberFormat style
```javascript
new Intl.NumberFormat('${1|en-US,...|}', {
style: '${3|decimal,...|}',$4
}).format($2)
```
infc
Intl.NumberFormat as currency
```javascript
new Intl.NumberFormat('${1|en-US,...|}', {
style: 'currency',
currency: '${3|USD,...|}',$4
}).format($2)
```
infp
Intl.NumberFormat as percentage
```javascript
new Intl.NumberFormat('${1|en-US,...|}', {
style: 'percent',$3
}).format($2)
```
infu
Intl.NumberFormat as unit
```javascript
new Intl.NumberFormat('${1|en-US,...|}', {
style: 'unit',
unit: '${3|acceleration-g-force,...|}',
unitDisplay: '${4|long,...|}',$0
}).format($2)
```
idtf
Intl.DateTimeFormat
```javascript
new Intl.DateTimeFormat('${1|en-US,...|}'$3).format($2)
```
idtfs
Intl.DateTimeFormat with style
```javascript
new Intl.DateTimeFormat ('${1|en-US,...|}', {
dateStyle: '$3',$0
}).format($2)
```
### Types
Prefix
Name
Body
aia
is array
```javascript
Array.isArray($0)
```
tof
typeof
```javascript
typeof $1
```
tofc
typeof check
```javascript
typeof $1 === '${2|undefined,...|}'
```
iof
instanceof
```javascript
$1 instanceof ${0:Class}
```
isnil
is nil
```javascript
$1 == null
```
nnil
is not nil
```javascript
$1 != null
```
isnan
is NaN
```javascript
isNaN($0)
```
nnan
is not NaN
```javascript
!isNaN($0)
```
### Testing
Prefix
Name
Body
desc
describe
```javascript
describe('$1', () => {
$0
})
```
cont
context
```javascript
context('$1', () => {
$0
})
```
it
test (synchronous)
```javascript
it('$1', () => {
$0
})
```
ita
test (asynchronous)
```javascript
it('$1', async () => {
$0
})
```
itc
test (callback)
```javascript
it('$1', (done) => {
$0
done()
})
```
bf
before test suite
```javascript
before(() => {
$0
})
```
bfe
before each test
```javascript
beforeEach(() => {
$0
})
```
aft
after test suite
```javascript
after(() => {
$0
})
```
afe
after each test
```javascript
afterEach(() => {
$0
})
```
### Globals
Prefix
Name
Body
wlo
window.location
```javascript
window.location
```
wlh
window.location.href
```javascript
window.location.href
```
### Misc
Prefix
Name
Body
us
'use strict' statement
```javascript
'use strict'
```
prs
process.server
```javascript
process.server
```
prc
process.client
```javascript
process.client
```
env
env variable
```javascript
process.env.$0
```
envv
env variable (meta)
```javascript
import.meta.env.$0
```
## TypeScript
Available only where TypeScript is supported
### Declarations
Prefix
Name
Body
cat
const assignment (typed)
```javascript
const ${1:name}: ${2:string} = $3
```
lat
let assignment (typed)
```javascript
let ${1:name}: ${2:string} = $3
```
caat
array assignment (typed)
```javascript
const ${1:arr}: ${2:string}[] = [$0]
```
caot
object assignment (typed)
```javascript
const ${1:obj}: ${2:object} = { $0 }
```
### Types
Prefix
Name
Body
int
interface
```javascript
interface ${1:Model} {
$0
}
```
inte
interface extends
```javascript
interface ${1:Model} extends ${2:Base} {
$0
}
```
tp
type
```javascript
type ${1:Model} = $2
```
tpu
type union
```javascript
type ${1:Model} = ${2:string} | ${3:number}
```
tpi
type intersection
```javascript
type ${1:Model} = $2 & $3
```
### DOM
Prefix
Name
Body
qst
query selector (typed)
```javascript
${1:document}.querySelector<${2|HTMLElement,...|}>('$3')
```
qsat
query selector all (typed)
```javascript
${1:document}.querySelectorAll<${2|HTMLElement,...|}>('$3')
```
qsaat
query selector all as array (typed)
```javascript
[...${1:document}.querySelectorAll<${2|HTMLElement,...|}>('$3')]
```
gidt
get element by id (typed)
```javascript
${1:document}.getElementById<${2|HTMLElement,...|}>('$3')
```
## Running locally
```bash
# ensure Deno is installed
# https://deno.land/[email protected]/getting_started/installation
# generate .code-snippets and documentation
npm run generate
```