Home

Awesome

✂️ vscode-javascript-snippets

Version Installs Rating

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.

Setup

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.

Snippets

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.

JavaScript

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}
}
ifel⇥ if/else statement
if (${1:condition}) {
  ${0}
} else {
  
}
elif⇥ 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}
})

Testing (Jest, Mocha, Jasmine, etc.)

desc⇥ describe
describe('${1:description}', () => {
  ${0}
})
cont⇥ context
context('${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 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'

React (JS)

propTypes⇥
static propTypes = {$0}
defaultProps⇥
static defaultProps = {$0}
getDerivedStateFromProps⇥
static getDerivedStateFromProps(${1:nextProps}, ${2:prevState}) {$0}

React (TS)

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}