nghiem-javascript-snippets README
"nghiem-javascript-snippets".
Features
A collection of javascript and react snippets for faster JavaScript development in Visual studio Code.
Requirements
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}
}
((${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});
setImmediate(() => {
${0}
});
nt⇥ process nextTick
process.nextTick(() => {
${0}
});
Miscellaneous
us⇥ insert 'use strict' statement
"use strict";
