✂️ Visual Studio Code snippets for JavaScript, TypeScript, and React
Visual Studio Code snippets for JavaScript, TypeScript, and React
Code snippets are templates that make it easier to autocomplete repeating code patterns. They're like shortcuts for writing code.
Just install this package from the Extension Marketplace, then add "editor.snippetSuggestions": "top"
to your user settings to see these snippets on top in the suggestion popover. Make sure you've also set "editor.tabCompletion": "on"
for tab
completion.
These snippets are optimized to be short and easy to remember.
They follow JavaScript Standard Style.
They also support tab
autocompletion to accelerate your workflow!
Below is a list of all available snippets and the shortcuts for each one. The ⇥
means the tab
key.
v⇥
var statementvar ${0}
v=⇥
var assignmentvar ${1:name} = ${2:value}
l⇥
let statementlet ${0}
l=⇥
let assignmentlet ${1:name} = ${2:value}
dl=⇥
destructuring let assignmentlet {${1:name}} = ${2:value}
co⇥
const statementconst ${0}
co=⇥
const assignmentconst ${1:name} = ${2:value}
dco=⇥
destructuring const assignmentconst {${1:name}} = ${2:value}
if⇥
if statementif (${1:condition}) {
${0}
}
el⇥
else statementelse {
${0}
}
ifel⇥
if/else statementif (${1:condition}) {
${0}
} else {
}
elif⇥
else if statementelse if (${1:condition}) {
${0}
}
ter⇥
ternary operator${1:condition} ? ${2:expression} : ${3:expression}
fl⇥
for loopfor (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}++) {
${0}
}
rfl⇥
reverse for loopfor (let ${1:i} = ${2:iterable}.length - 1; ${1:i} >= 0; ${1:i}--) {
${0}
}
fi⇥
for in loopfor (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 loopwhile (${1:condition}) {
${0}
}
tc⇥
try/catchtry {
${0}
} catch (${1:err}) {
}
tf⇥
try/finallytry {
${0}
} finally {
}
tcf⇥
try/catch/finallytry {
${0}
} catch (${1:err}) {
} finally {
}
sw⇥
switch caseswitch (${1:expr}) {
case ${2:value}:
return $0
default:
return
}
f⇥
anonymous functionfunction (${1:arguments}) {
${0}
}
fn⇥
named functionfunction ${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}
}
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}
})
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 constructorvar ${1:Class} = function(${2:arguments}) {
${0}
}
proto⇥
prototype method${1:Class}.prototype.${2:method} = function(${3:arguments}) {
${0}
}
oa⇥
Object.assignObject.assign(${1:dest}, ${2:source})
oc⇥
Object.assign copy (shallow clone)Object.assign({}, ${1:original}, ${2:source})
r⇥
returnreturn ${0}
rp⇥
return Promise (ES6)return new Promise((resolve, reject) => {
${0}
})
rc⇥
return complex value (such as JSX components)return (
${0}
)
tof⇥
typeoftypeof ${1:source} === '${2:undefined}'
iof⇥
instanceof${1:source} instanceof ${2:Object}
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}
})
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}'
cb⇥
Node.js style callback(err, ${1:value}) => {${0}}
re⇥
requirerequire('${1:module}')
rel⇥
require localrequire('./${1:module}')
req⇥
require assignmentconst ${1:module} = require('${1:module}')
reql⇥
require assignment localconst ${1:module} = require('./${1:module}')
dreq⇥
destructuring require assignmentconst {${1:module}} = require('${1:module}')
dreql⇥
destructuring require assignment localconst {${1:module}} = require('./${1:module}')
em⇥
exports.memberexports.${1:member} = ${2:value}
me⇥
module.exportsmodule.exports = ${1:name}
meo⇥
module exports objectmodule.exports = {
${1:member}
}
on⇥
event handler${1:emitter}.on('${2:event}', (${3:arguments}) => {
${0}
})
desc⇥
describedescribe('${1:description}', () => {
${0}
})
cont⇥
contextcontext('${1:description}', () => {
${0}
})
it⇥
test (synchronous)it('${1:description}', () => {
${0}
})
ita⇥
test (asynchronous)it('${1:description}', async () => {
${0}
})
itc⇥
test (callback)it('${1:description}', (done) => {
${0}
done()
})
bf⇥
before test suitebefore(() => {
${0}
})
bfe⇥
before each testbeforeEach(() => {
${0}
})
aft⇥
after test suiteafter(() => {
${0}
})
afe⇥
after each testafterEach(() => {
${0}
})
cl⇥
console.logconsole.log(${0})
ce⇥
console.errorconsole.error(${0})
cw⇥
console.warnconsole.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})
st⇥
setTimeoutsetTimeout(() => {
${0}
}, ${1:delay})
si⇥
setIntervalsetInterval(() => {
${0}
}, ${1:delay})
sim⇥
setImmediatesetImmediate(() => {
${0}
})
nt⇥
process nextTickprocess.nextTick(() => {
${0}
})
us⇥
insert 'use strict' statement'use strict'
propTypes⇥
static propTypes = {$0}
defaultProps⇥
static defaultProps = {$0}
getDerivedStateFromProps⇥
static getDerivedStateFromProps(${1:nextProps}, ${2:prevState}) {$0}
defaultProps⇥
static defaultProps: Partial<${1:${TM_FILENAME_BASE}Props}> = {$0}
getDerivedStateFromProps⇥
static getDerivedStateFromProps(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}, ${4:prevState}: ${6:${TM_FILENAME_BASE}${5:State}}): Partial<${6:${TM_FILENAME_BASE}${5:State}}> {$0}