JavaScript Code Snippet

NicholasHsiang

|
6,686 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.

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;
caw const name = await value; const awaited
cy const name = yield value;
cdo const {} = ; const destructing object
cda const [] = ; const destructing array
l let name = value;
law let name = await value;
ly let name = yield 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 (let key in object) { if (object.hasOwnProperty(key)) { }} for-in
fof for (let item of object) { } for-of
fl for (let i = 0, len = iterable.length; i < len; i++) { }
flr for (let len = iterable.length - 1; len >= 0; len--) { } 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');}" ]}

array

Prefix Body Description
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: ${10: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) { ${10:value} = newValue; } enumerable: ${11:false}, configurable: ${12: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 regex1 = RegExp('pattern'); RegExp
rep let regex1 = /pattern/; RegExp pattern
ree let regex1 = RegExp('pattern');let result = regex1.exec(str);
ret let regex1 = RegExp('pattern');let result = regex1.test(str);

chore

Prefix Body Description
to typeof object === 'undefined' typeof
io object instanceof 'constructor' instanceof
st setTimeout(function() { }, delay); setTimeout
sta setTimeout(() => { }, delay); setTimeout with arrow function
si setInterval(function() { }, interval); setInterval
sia setInterval(() => { }, interval); setInterval with arrow function
jp JSON.parse(obj);
js JSON.stringify(obj);
tc try { } catch (err) { }
tcf try { } catch (err) { } finally { }
tf try { } finally { }
tne throw new error
r return ;
rn return null;
rt return this;
ro return { };
ternary ? : ;
al alert('msg');
conf confirm('msg');
pm prompt('msg');
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) => { $3}; 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
gp get propertyName () { return this.value;} get propertyName
sp set propertyName (value) { } set propertyName
gs get property () { } set property (value) { } getter and setter
m method (params) { } method
asm async method(params) { } async method
proc var Constructor = function(params) { }; prototype constructor
prom Constructor.prototype.method = function (params) { }; prototype method

Promise

Prefix Body Description
p let 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
rs resolve(value); resolve
rj reject(err); reject
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
gf function* name(params) { yield ;} generator function
y yield expression;
yg yield* expression;

Async

Prefix Body Description
asfn async function name (params) { const result = await promise; return result;}name().then(result => {$6}); 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 promiseObj
caw const result = await promiseObj;
awpa await Promise.all(value)
awpam await Promise.all(array.map((value) => { }))

Event

Prefix Body Description
ael document.addEventListener('event', function (e) { }); addEventListener
aela document.addEventListener('event', ev => { }); addEventListener arrow function
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

Dom

Prefix Body Description
gi document.getElementById('id'); getElementById
gc document.getElementsByClassName('class'); getElementsByClassName
gt document.getElementsByTagName('tag'); getElementsByTagName
qs document.querySelector('selector'); querySelector
qsa document.querySelectorAll('selector'); querySelectorAll
cdf document.createDocumentFragment();$2
cel document.createElement(elem);
ga document.getAttribute('attr');
sa document.setAttribute('attr', value);
ra document.removeAttribute('attr');
ac document.appendChild(elem);
rc document.removeChild(elem);
ih document.innerHTML = 'elem';
tco document.textContent = 'content';
cla document.classList.add('class'); classList.add
clc document.classList.contains('class');
clr document.classList.remove('class');
clt document.classList.toggle('class');

console

Prefix Body Description
cd console.dir($1); console.dir
ce console.error($1);
celb console.error('', );
ci console.info($1);
clg console.log($1); console.log
clgl console.log('', );
cw console.warn($1);
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);

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

TODO: Set, Map, Symbol, Proxy, Reflection, Math, DOM, BOM, Error

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