JavaScript Code Snippet

NicholasHsiang

|
11,388 installs
| (2) | Free
Code snippets for JavaScript in ES3/5/6+ syntax
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JavaScript Snippets (Visual Studio Code)

Code snippets for JavaScript in ES3/5/6+ syntax;

Download this extension from the Visual Studio Code Marketplace.

  • Declarations
  • Statement
  • Function
  • Array
  • Object
  • String
  • Number
  • Regexp
  • chore
  • Module
  • Class
  • Promise
  • Generator Iterator
  • Async
  • Symbol
  • Maps & Sets
  • Error
  • Event
  • AJAX
  • Proxy & Reflection
  • Math
  • DOM
  • BOM
  • Console
  • CommonJS/Node.js
  • BDD Testing (Mocha, Jasmine, etc.)

Supported languages (file extensions)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

Snippets

Note: All the snippets include the final semicolon ;

Declarations

Prefix Body Description
usm 'use strict'; use strict mode
c const name = value;
cdo const {} = ; const destructing object
cda const [] = ; const destructing array
l let name = value;
ldo let {} = ;
lda let [] = ;
v var name = value;
vdo var {} = ;
vda var [] = ;
dp {}: parameter destructuring parameter

Statement

Prefix Body Description
if if (condition) { }
ife if (condition) { } else { }
ei else if (condition) { }
el else { }
swi switch () { case : break; default: break;}
cas case : break;
fin for (const key in object) { if (object.hasOwnProperty(key)) { }} for-in
fof for (const item of object) { } for-of
fl, fo, for for (const index = 0, length = iterable.length; index < length; index += 1) { }
flr, forr for (const length = iterable.length - 1; length >= 0; length -= 1) { } for loop iterable(reverse)
wh while (condition) { }
whi let iterableIndex = array.lengthwhile (iterableIndexIndex--) { }

Function

Prefix Body Description
fn function name (params) { } function
fna function (params) { } function anonymous
vfn var name = function (params) { }
lfn let name = function (params) { }
cfn const name = function (params) { }
fnp name: function(params) { } function as property
fnapply method.apply(context, [params]); function.apply
fncall method.call(context, params); function.call
fnbind method.bind(this); function.bind
af (params) => { } arrow function
afr (params) => { return } arrow function with return
afd ({params}) => statement arrow function with destructuring
laf let name = (params) => { }
caf const name = (params) => { }
iif ;((params) => { })()
iife ;(function (params) { })()
nt if (typeof new.target === 'undefined') { throw new Error('Fn() must be called with new');}" ]} new.target

Array

Prefix Body Description
ar const arr = [];
arl iterable.length;
isa Array.isArray(value)
arfr Array.from(arrayLike);
arfr Array.from(arrayLike, (item) => { });
arof Array.of(elementN);
arc iterable.concat(valueN); array.concat
arcw iterable.copyWithin(target, start, end); array.copyWithin
are iterable.entries(); array.entries
arev iterable.every((element) => { }); array.every
arfill iterable.fill(value, start, end);
arf iterable.filter((element) => { });
arfi iterable.find((element) => { });
arfin iterable.findIndex((element) => { })
arflat iterable.flat();
arflatMap iterable.flatMap((value) => value);
fea iterable.forEach((currentValue) => { }); forEach callback with arrow function
feai iterable.forEach((currentValue, index) => { });
fe iterable.forEach(function(currentValue) { });
fei iterable.forEach(function(currentValue, index) { });
ari iterable.includes(valueToFind)
ario iterable.indexOf(searchElement)
arj iterable.join(separator);
ark iterable.keys();
arlio iterable.lastIndexOf(searchElement)
map iterable.map((currentValue) => { });
arp iterable.pop();
arj iterable.push(elementN);
arr iterable.reduce((accumulator, currentValue) => { return });
arrr iterable.reduce​Right((accumulator, currentValue) => { return });
arre iterable.reverse();
ars iterable.shift();
arsl iterable.slice(begin, end);
arso iterable.some((element) => { });
arsor iterable.sort((firstEl, secondEl) => { });
arsp iterable.splice(start, deleteCount, item);
aru iterable.unshift(elementN);
arv iterable.values();
arsi iterable[Symbol.iterator]();
seq [...Array(length).keys()]

Object

Prefix Body Description
ol { key: value }
kv key: value,
oa Object.assign(target, source);
oc Object.create(obj);
odp Object.defineProperty(dest, 'propertyName', { value: undefined, configurable: false, enumerable: false, writable: false}) Object.defineProperty(data descriptors)
odpa Object.defineProperty(dest, 'propertyName', { get() { return value; }, set(newValue) { value = newValue; }, enumerable: false, configurable: false}) Object.defineProperty(accessor descriptors)
odps Object.defineProperties(dest, { propertyName: { configurable: false, enumerable: false value: undefined, writable: false }, propertyName: { get() { return value; }, set(newValue) { value = newValue; } enumerable: false, configurable: false }}); Object.defineProperties
oe Object.entries(obj);
of Object.freeze(obj);
ofe Object.fromEntries(iterable);
ogopd Object.getOwnPropertyDescriptor(obj, 'propertyName'); Object.getOwnPropertyDescriptor
ogopds Object.getOwnPropertyDescriptors(obj); Object.getOwnPropertyDescriptors
ogopn Object.getOwnPropertyNames(obj); Object.getOwnPropertyNames
ogops Object.getOwnPropertySymbols(obj); Object.getOwnPropertySymbols
ogpo Object.getPrototypeOf(obj); Object.getPrototypeOf
oi Object.is(value1, value2);
oie Object.isExtensible(obj)
oif Object.isFrozen(obj)
ois Object.isSealed(obj)
ok Object.keys(obj);
ope Object.preventExtensions(obj);
os Object.seal(obj);
ospo Object.setPrototypeOf(obj, prototype); Object.setPrototypeOf
ov Object.values(obj);
hop obj.hasOwnProperty(propertyName) hasOwnProperty
ipo prototypeObj.isPrototypeOf(object) isPrototypeOf
pie obj.propertyIsEnumerable(propertyName) propertyIsEnumerable
tls objects.toLocaleString(); toLocaleString
ts objects.toString(); toString
vo objects.valueOf(); valueOf

String

Prefix Body Description
sfcc String.fromCharCode(numN) String.fromCharCode
sfcp String.fromCodePoint(numN)
sr String.rawtemplateString
sca str.charAt(index)
scca str.charCodeAt(index)
scpa str.codePointAt(position)
sc str.concat(stringN)
sew str.endsWith(searchString)
sin str.includes(searchString)
sio str.indexOf(searchValue)
slio str.lastIndexOf(searchValue)
slc str.localeCompare(compareString)
sm str.match(regexp)
sma str.matchAll(regexp)
sn str.normalize('NFC')
spe str.padEnd(targetLength, padString)
sps str.padStart(targetLength, padString)
sr str.repeat(count)
sre str.replace(regexp, newSubStr)
ss str.search(regexp)
ssl str.slice(beginIndex, endIndex)
ssp str.split(separator)
ssw str.startsWith(searchString, position)
sss str.substring(indexStart, indexEnd)
stllc str.toLocaleLowerCase()
stluc str.toLocaleUpperCase()
stlc str.toLowerCase()
stuc str.toUpperCase()
str str.trim()
ste str.trimEnd() //trimRight()
sts str.trimStart() //trimLeft()
ssi str[Symbol.iterator]

Number

Prefix Body
ne Number.EPSILON
nmasi Number​.MAX_SAFE_INTEGER
nmav Number.MAX_VALUE
nmisi Number​.MIN_SAFE_INTEGER
nmav Number​.MIN_VALUE
nni Number​.NEGATIVE_INFINITY
nn Number​.NaN
npi Number​.POSITIVE_INFINITY
nif Number​.isFinite(value)
nii Number​.isInteger(value)
nin Number​.isNaN(value)
nisi Number​.isSafe​Integer(value)
npf Number​.parse​Float(string)
npi Number​.parseInt(string)
nte number.toExponential()
ntf number.toFixed()
ntp number.toPrecision()

Regexp

Prefix Body Description
re let regex = RegExp('pattern'); RegExp
rep let regex = /pattern/; RegExp pattern
ree let regex = RegExp('pattern');let result = regex.exec(str);
ret let regex = RegExp('pattern');let result = regex.test(str);

Chore

Prefix Body Description
to typeof object === 'undefined' typeof
io object instanceof 'constructor' instanceof
jp JSON.parse(obj);
js JSON.stringify(obj);
tc try { } catch (err) { }
tcf try { } catch (err) { } finally { }
tf try { } finally { }
r return ;
rn return null;
rt return this;
ro return { };
ternary ? : ;
de debugger;
eu encodeURI(URI) encodeURI
du decodeURI(encodedURI) decodeURI
euc encodeURIComponent(str) encodeURIComponent
duc decodeURIComponent(encodedURI) decodeURIComponent

Module

Prefix Body Description
im import { moduleName } from 'module'; import
imd import moduleName from 'module'; import default export
imas import { originalName as alias } from 'module'; import as renamed exports
imall import * as alias from 'module'; import all module as alias
imn import 'module'; import without module name
ex export {nameN}; export
exas export {variable as name}; export as renaming
exl export let name = value;
exc export const name = value;
exfn export function name (){ }
exafn export const name = (params) => { }; export named arrow function
exd export default expression; export default
exdas export {name as default};
exdc export default class className { constructor (params) { } }
exdce export default class className extends baseClassName { constructor (params) { super(); } }
exdaf export default (params) => { }
exdfn export default function name (params) { }
exfr export {default} from otherModule; export from
exallo export * from otherModule; export all from other module

Class

Prefix Body Description
cl class name { constructor (params) { } } class
cle class className extends baseClassName { constructor (params) { super(); } } class extends
cls static create(params) { return new PersonClass(params);} class static
cons constructor(params) { } class constructor
get get propertyName () { return this.element; } get propertyName
set set propertyName (value) { this.element = value; } set propertyName
gs get propertyName () { return this.element; } set propertyName (value) { this.element = value; } getter and setter
m method (params) { } method
asm async method(params) { } async method
protoc var Constructor = function(params) { }; prototype constructor
protom Constructor.prototype.method = function (params) { }; prototype method

Promise

Prefix Body Description
p const promise = new Promise((resolve, reject) => { });promise.then(result => { }).catch(error => { }); new promise
pa Promise.all([value]); Promise.all
prj Promise.reject(value); Promise.reject
prs Promise.resolve(value); Promise.resolve
rj reject(err); reject
rs resolve(value); resolve
pc promise.catch(error => { }); promise.catch
pf promise.finally(() => { }); promise.finally
pt promise.then(result => { }) promise.then()
ptc promise.then(result => { }).catch(error => { }); promise.then().catch()
ptcf promise.then(result => { }).catch(error => { }).finally(() => { }); promise.then().catch().finally()
rp return new Promise((resolve, reject) => { })

Generator Iterator

Prefix Body Description
cy const name = yield value;
ly let name = yield value;
gf function* name(params) { yield ;} generator function
y yield expression;
yg yield* expression;

Async

Prefix Body Description
caw const result = await promise; const awaited
law let result = await promise;
asfn async function name (params) { const result = await promise; return result;}name().then(result => { }); async function named
asfna async function (params) { } async function anonymous
asgfn async function* name (params) { } async generator function named
asgfna async function* (params) { } async generator function anonymous
asaf async (params) => { } async arrow function
aw await promise
awpa await Promise.all(value)
awpam await Promise.all(array.map((value) => { }))

Symbol

Prefix Body Description
lsy let symObj = Symbol();
csy const symObj = Symbol();
symf Symbol.for('key');
symk Symbol.keyFor('symObj');

Maps & Sets

Prefix Body Description
lm let resourceMap = new Map();
ls let resourceSet = new Set();
lwm let resourceWeakMap = new WeakMap();
lws let resourceWeakSet = new WeakSet();
cm, ma const resourceMap = new Map();
cs, se const resourceSet = new Set();
cwm, wm const resourceWeakMap = new WeakMap();
cws, ws const resourceWeakSet = new WeakSet();

Error

Prefix Body Description
tn throw new Error('message')
tne throw new EvalError('message')
tnr throw new RangeError('message')
tnre throw new ReferenceError('message')
tns throw new SyntaxError('message')
tnt throw new TypeError('message')
tnu throw new URIError('message')

Event

Prefix Body Description
ael document.addEventListener('type', event => { }); addEventListener arrow function
aelfn document.addEventListener('type', function (event) { }); addEventListener
rel document.removeEventListener('event', listener); removeEventListener
eps event.preventDefault();event.stopPropagation();return false; event preventDefault and stopPropagation
epd event.preventDefault(); event preventDefault
esp event.stopPropagation(); event stopPropagation
dev const cancelled = !target.dispatchEvent(event);
click document.addEventListener('click', () => { });
keydown document.addEventListener('keydown', event => { });
load window.addEventListener('load', () => { });
ready window.addEventListener('DOMContentLoaded', () => { });

Ajax

Prefix Body Description
xhr XMLHttpRequest
fetch fetch
fetchget,fg fetch get
fetchpost,fp fetch post

Proxy & Reflection

Prefix Body Description
proxy.set Validating Properties Using the set Trap
proxy.get Object Shape Validation Using the get Trap
proxy.has Hiding Property Existence Using the has Trap
proxy.delete Preventing Property Deletion with the deleteProperty Trap
proxy.prototype Prototype Proxy Traps
proxy.extensibility Object Extensibility Traps
proxy.property Property Descriptor Traps
proxy.ownKeys The ownKeys Trap
proxy.function Function Proxies with the apply and construct Traps
proxy.revocable Revocable Proxies

Math

Prefix Body Description
mr Math.random()
mro Math.round() 20.49 → 20, 20.5 → 21
mc Math.ceil() 7.004 → 8, -7.004 → -7
mf Math.floor() 5.95 → 5, -5.05 → -6
mtr Math.trunc() 5.05 → 5, -0.123 → -0

Dom

Prefix Body Description
cdf document.createDocumentFragment();
cel document.createElement(elem); createElement
ctn document.createTextNode(data);
gi document.getElementById('id'); getElementById
gc document.getElementsByClassName('className'); getElementsByClassName
gt document.getElementsByTagName('tagName'); getElementsByTagName
qs document.querySelector('selector'); querySelector
qsa document.querySelectorAll('selector'); querySelectorAll
cn const nodeList = node.childNodes; childNodes
pe const parentElement = node.parentElement; parentElement
pn const parentNode = node.parentNode; parentNode
fc const childNode = node.firstChild; firstChild
lc const childNode = node.lastChild; lastChild
ns const nextNode = node.nextSibling; nextSibling
ps const previousNode = node.previousSibling; previousSibling
tco element.textContent = 'content'; textContent
ib node.insertBefore(newNode, referenceNode); insertBefore
ac node.appendChild(element); appendChild
cn const newClone = node.cloneNode(true); cloneNode
cdp const compareMask = node.compareDocumentPosition(otherNode); compareDocumentPosition
con node.contains(otherNode); contains
rmc node.removeChild(child); removeChild
rpc parentNode.replaceChild(newChild, oldChild); replaceChild
hcn node.hasChildNodes() hasChildNodes
pes const prevNode = NonDocumentTypeChildNode.previousElementSibling; previousElementSibling
nes const nextNode = NonDocumentTypeChildNode.nextElementSibling; nextElementSibling
fec const element = parentNode.firstElementChild; firstElementChild
lec const element = parentNode.lastElementChild; lastElementChild
cec const count = parentNode.childElementCount; childElementCount
children const children = parentNode.children;
append parentNode.append(Nodes/DOMStrings);
prepend parentNode.prepend(Nodes/DOMStrings);
before ChildNode.before(Nodes/DOMStrings);
after ChildNode.after(Nodes/DOMStrings);
remove ChildNode.remove();
rw, replaceWith ChildNode.replaceWith(Node/DOMString);
gcr const rectCollection = element.getClientRects(); getClientRects
gbcr, rect const domRect = element.getBoundingClientRect(); getBoundingClientRect
closest const closestElement = targetElement.closest('selector');
sa element.setAttribute('attrName', 'value');
ga const attribute = element.getAttribute('attrName');
ha element.hasAttribute('attrName')
ra element.removeAttribute('attrName');
ta element.toggleAttribute('attrName');
matches element.matches('selectorString')
ih element.innerHTML = 'DOMString';
oh element.outerHTML = 'DOMString';
it element.innerText = 'renderText';
cla element.classList.add('className'); classList.add
clc element.classList.contains('className');
clr element.classList.remove('className');
clt element.classList.toggle('className');
before, iah.before element.insertAdjacentHTML('beforebegin', 'DOMString');
after, iah.after element.insertAdjacentHTML('afterend', 'DOMString');
prepend, iah.prepend element.insertAdjacentHTML('afterbegin', 'DOMString');
append, iah.append element.insertAdjacentHTML('beforeend', 'DOMString');
before, iae.before element.insertAdjacentElement('beforebegin', element);
after, iae.after element.insertAdjacentElement('afterend', element);
prepend, iae.prepend element.insertAdjacentElement('afterbegin', element);
append, iae.append element.insertAdjacentElement('beforeend', element);
before, iat.before element.insertAdjacentText('beforebegin', value);
after, iat.after element.insertAdjacentText('afterend', value);
prepend, iat.prepend element.insertAdjacentText('afterbegin', value);
append, iat.append element.insertAdjacentText('beforeend', value);
scrollTo element.scrollTo({left, top, behavior: 'smooth'});
scrollIntoView element.scrollIntoView();
scl element.scrollLeft;
sct element.scrollTop;
dcw ${1:document.documentElement}.clientWidth
dch ${1:document.documentElement}.clientHeight
dow ${1:document.documentElement}.offsetWidth
doh ${1:document.documentElement}.offsetHeight
dsw ${1:document.documentElement}.scrollWidth
dsh ${1:document.documentElement}.scrollHeight

Bom

Prefix Body Description
wa window.alert('msg');
wc window.confirm('msg');
wp window.prompt('title', 'defaultText');
st const timeout = window.setTimeout(() => { }, delay); window.clearTimeout(timeout); setTimeout
stfn var timeout = window.setTimeout(function() { }, delay); window.clearTimeout(timeout);
si const timer = window.setInterval(() => { }, interval); window.clearInterval(timer); setInterval
sifn var timer = window.setInterval(function() { }, interval); window.clearInterval(timer);
lss localStorage.setItem('key', 'value'); localStorage.setItem
lsg localStorage.getItem('key');
lsr localStorage.removeItem('key');
lsc localStorage.clear();
wsaw window.screen.availWidth window.screen.availWidth
wsah window.screen.availHeight
wsw window.screen.width
wsh window.screen.height
wlh window.location.href
wlhn window.location.hostname
wlp window.location.pathname
wlpr window.location.protocol
wls window.location.assign(url)
whb window.history.back();
whf window.history.forward();
wnl window.navigator.language
wnls window.navigator.languages
wnu window.navigator.userAgent

Console

Prefix Body Description
cd console.dir(); console.dir
ce console.error();
celb console.error('labele', );
ci console.info();
clg console.log(); console.log
clgl console.log('', );
cw console.warn();
cwl console.warn('', );
ca console.assert(expression, object);
cc console.clear();
cco console.count(label);
cg console.group('label');
cge console.groupEnd();
ct console.table(object);
ctr console.trace(object);

Common Js/Node.js

Prefix Body Description
ec class name { constructor (params) { }} module.exports = name
em exports.member = value
me module.exports = name
rq require('module')
crq const module = require('module');

Bdd Testing (Mocha, Jasmine, etc.)

Prefix Body
desc describe('description', function () { })
cont context('description', callback);
it it('description', () => { })
ita it('description', async (done) => { done();});
afe afterEach(function () { })
bfe beforeEach(function () { })
aft after(function () { })
bf before(function () { })

License

MIT License

placeholder → placeholder: (\$\{\d+)(:?)([a-zA-Z0-9]*)(\}{1}) → $3

^\n  → \\n\n
\s{2} → \\t
" → '
(^) → "
($) → ",