Javascript

Repository for my javascript projects

JavaScript Snippets for VS Code

Setup

Just install JavaScript Snippets by Nathan Chapman in VScode

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';

Features

If snippets do not show up, add the following to your settings file

    "emmet.includeLanguages": {
        "ejs": "html",
    },

** ejs Snippets are found below.**

→ Denotes the TAB key.

Snippet→	Alternate	Output
ejs→	<%	<% %> - No output tag
ejsout→	<%=	<%= %> - Outputs HTML value
ejsesc→	<%-	<%- %> - Outputs unescaped
ejscom→	<%#	<%# %> - Comment tag
ejslit→	<%%	<%% %> - Outputs Literal <%
ejsinc→	<%	include statement
ejsfor→	<%	for Javascript Loop
ejseach→	<%	forEach Javascript Loop
ejsif→	<%	if Statement with condition
ejselif→	<%	else if Statement - Middle section only. Assumes you have already written the first if statement.
ejselse→	<%	else Statement - Middle section only. Assumes you have already written the first if statement.