Skip to content

matijaoe/modern-javascript-snippets

3 Branches9 Tags

Repository files navigation

Modern JavaScript Snippets ⚡

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


JavaScript TypeScript

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

About

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

marketplace.visualstudio.com/items?itemName=matijao.modern-js-snippets

Topics

typescript vscode javascript-snippets vscode-snippets typescript-snippets deno

Resources

Readme

License

MIT license
Activity

Stars

4 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases 7

v0.7.2 Latest
Nov 12, 2023
+ 6 releases

Languages