JavaScript Snippets for VS Code

Setup

Just install this package from the Extension Marketplace, then make sure to add "editor.snippetSuggestions": "top" to your user settings to see these snippets on top in the suggestion popover.

Snippets

Snippets are optimized to be short and easy to remember.

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

Declarations

v⇥ var statement

var ${0}

v=⇥ var assignment

var ${1:name} = ${2:value};

l⇥ let statement

let ${0}

l=⇥ let assignment

let ${1:name} = ${2:value};

dl=⇥ destructuring let assignment

let {${1:name}} = ${2:value};

co⇥ const statement

const ${0}

co=⇥ const assignment

const ${1:name} = ${2:value};

dco=⇥ destructuring const assignment

const {${1:name}} = ${2:value};

Flow Control

if⇥ if statement

if (${1:condition}) {
	${0}
}

el⇥ else statement

else {
	${0}
}

ife⇥ if/else statement

if (${1:condition}) {
	${0}
} else {
	
}

ei⇥ else if statement

else if (${1:condition}) {
	${0}
}

ter⇥ ternary operator

${1:condition} ? ${2:expression} : ${3:expression};

fl⇥ for loop

for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}++) {
	${0}
}

rfl⇥ reverse for loop

for (let ${1:i} = ${2:iterable}.length - 1; ${1:i} >= 0; ${1:i}--) {
	${0}
}

fi⇥ for in loop

for (let ${1:key} in ${2:array}) {
	if (${2:array}.hasOwnProperty(${1:key})) {
		${0}
	}
}

},

fo⇥ for of loop (ES6)

for (let ${1:key} of ${2:array}) {
	${0}
}

wl⇥ while loop

while (${1:condition}) {
	${0}
}

tc⇥ try/catch

try {
	${0}
} catch (${1:err}) {
	
}

tf⇥ try/finally

try {
	${0}
} finally {
	
}

tcf⇥ try/catch/finally

try {
	${0}
} catch (${1:err}) {
	
} finally {
	
}

sw⇥ switch case

switch (${1:expr}) {
	case ${2:value}:
		return $0;
	default:
		return;
}

Functions

f⇥ anonymous function

function (${1:arguments}) {
	${0}
}

fn⇥ named function

function ${1:name}(${2:arguments}) {
	${0}
}

iife⇥ immediately-invoked function expression (IIFE)

((${1:arguments}) => {
	${0}
})(${2});

fa⇥ function apply

${1:fn}.apply(${2:this}, ${3:arguments})

fc⇥ function call

${1:fn}.call(${2:this}, ${3:arguments})

fb⇥ function bind

${1:fn}.bind(${2:this}, ${3:arguments})

af⇥ arrow function (ES6)

(${1:arguments}) => ${2:statement}

afb⇥ arrow function with body (ES6)

(${1:arguments}) => {
	${0}
}

gf⇥ generator function (ES6)

function* (${1:arguments}) {
	${0}
}

gfn⇥ named generator function (ES6)

function* ${1:name}(${2:arguments}) {
	${0}
}

Iterables

seq⇥ sequence of 0..n

[...Array(${1:length}).keys()]${0}

fe⇥ forEach loop

${1}.forEach((${2:item}) => {
	${0}
});

map⇥ map

${1}.map((${2:item}) => {
	${0}
});

reduce⇥ reduce

${1}.reduce((${2:previous}, ${3:current}) => {
	${0}
}${4:, initial});

filter⇥ filter

${1}.filter(${2:item} => {
	${0}
});

find⇥ find

${1}.find(${2:item} => {
	${0}
});

Objects and Classes

ol⇥ object literal

{
	kv${0}
};

slol⇥ same-line object literal

{ kv${0} };

kv⇥ key/value pair

${1:key}: ${2:value},

c⇥ class (ES6)

class ${1:name} {
	constructor(${2:arguments}) {
		${0}
	}
}

cex⇥ child class (ES6)

class ${1:name} extends ${2:base} {
	constructor(${3:arguments}) {
		super(${3:arguments});
		${0}
	}
}

ctor⇥ class constructor (ES6)

constructor(${1:arguments}) {
	super(${1:arguments});
	${0}
}

m⇥ method (ES6 syntax)

${1:method}(${2:arguments}) {
	${0}
}

get⇥ getter (ES6 syntax)

get ${1:property}() {
	${0}
}

set⇥ setter (ES6 syntax)

set ${1:property}(${2:value}) {
	${0}
}

gs⇥ getter and setter (ES6 syntax)

get ${1:property}() {
	${0}
}
set ${1:property}(${2:value}) {
	
}

pctor⇥ prototypal constructor

var ${1:Class} = function(${2:arguments}) {
	${0}
};

proto⇥ prototype method

${1:Class}.prototype.${2:method} = function(${3:arguments}) {
	${0}
};

oa⇥ Object.assign

Object.assign(${1:dest}, ${2:source})

oc⇥ Object.assign copy (shallow clone)

Object.assign({}, ${1:original}, ${2:source})

Returning values

r⇥ return

return ${0};

rp⇥ return Promise (ES6)

return new Promise((resolve, reject) => {
	${0}
});

rc⇥ return complex value (such as JSX components)

return (
	${0}
);

Types

tof⇥ typeof

typeof ${1:source} === '${2:undefined}'

iof⇥ instanceof

${1:source} instanceof ${2:Object}

Promises

pr⇥ Promise (ES6)

new Promise((resolve, reject) => {
	${0}
})

then⇥ Promise.then

${1:promise}.then((${2:value}) => {
	${0}
})

catch⇥ Promise.catch

${1:promise}.catch((${2:err}) => {
	${0}
})

ES6 Modules

ex⇥ export (ES6)

export ${1:member};

exd⇥ export default (ES6)

export default ${1:member};

im⇥ import module (ES6)

import ${1:*} from '${2:module}';

ima⇥ import module as (ES6)

import ${1:*} as ${2:name} from '${3:module}';

Node.js

cb⇥ Node.js style callback

(err, ${1:value}) => {${0}}

re⇥ require

require('${1:module}');

rel⇥ require local

require('./${1:module}');

req⇥ require assignment

const ${1:module} = require('${1:module}');

reql⇥ require assignment local

const ${1:module} = require('./${1:module}');

dreq⇥ destructuring require assignment

const {${1:module}} = require('${1:module}');

dreql⇥ destructuring require assignment local

const {${1:module}} = require('./${1:module}');

em⇥ exports.member

exports.${1:member} = ${2:value};

me⇥ module.exports

module.exports = ${1:name};

meo⇥ module exports object

module.exports = {
	${1:member}
};

on⇥ event handler

${1:emitter}.on('${2:event}', (${3:arguments}) => {
	${0}
});

BDD Testing (Mocha, Jasmine, etc.)

desc⇥ describe

describe('${1:description}', () => {
	${0}
});

cont⇥ context

context('${1:description}', () => {
	${0}
});

it⇥ it

it('${1:description}', () => {
	${0}
});

its⇥ it synchronous

it('${1:description}', () => {
	${0}
});

ita⇥ it asynchronous

it('${1:description}', (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}
});

Console

cl⇥ console.log

console.log(${0});

ce⇥ console.error

console.error(${0});

cw⇥ console.warn

console.warn(${0});

cll⇥ console.log labeled

console.log('${0}', ${0});

cel⇥ console.error labeled

console.error('${0}', ${0});

cwl⇥ console.warn labeled

console.warn('${0}', ${0});

Timers

st⇥ setTimeout

setTimeout(() => {
	${0}
}, ${1:delay});

si⇥ setInterval

setInterval(() => {
	${0}
}, ${1:delay});

sim⇥ setImmediate

setImmediate(() => {
	${0}
});

nt⇥ process nextTick

process.nextTick(() => {
	${0}
});

Miscellaneous

us⇥ insert 'use strict' statement

'use strict';