README.md

✂️ vscode-javascript-snippets

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}