0.7.9 • Public • Published


originally forked from https://github.com/gaboesquivel/atom-standardjs-snippets, but we've added couple more. Also these are not using special characters because vscode doesn't accept them in the snippets.

Standard JavaScript Snippets for Visual studio code

A collection of ES6 snippets for faster JavaScript development in Visual studio Code.

This collection is complementary to atom/language-javascript. It's based on extrabacon/atom-turbo-javascript and it enforces standardjs code style.


Yes!, no semicolons:

Making the snippets top priority

I mostly prefer snippets to have the top priority in the autocompletion. This is not a default settingm but can be enabled by:

"editor.snippetSuggestions": "top",

in your settings.json. Otherwise vscode prefers keywords on the top.


Snippets are optimized to be short and easy to remember. Shortest are the ones you should be using most often. Note that these links work only on github, not on VSCode marketplace:


v⇥ var statement

var ${1:name}

va⇥ var assignment

var ${1:name} = ${2:value}

l⇥ let statement

let ${1:name}

la⇥ let assignment awaited

let ${1:name} = await ${2:value}

ly⇥ let yielded assignment

let ${1:name} = yield ${2:value}

c⇥ const statement

const ${1:name}

cd⇥ const from destructuring

const {${1:name}} = ${2:value}

ca⇥ const assignment awaited

const ${1:name} = await ${2:value}

cy⇥ const yielded assignment

const ${1:name} = yield ${2:value}

Flow Control

i⇥ if statement

if (${1:condition}) {

te⇥ ternary statement

${1:cond} ? ${2:true} : ${3: false}

ta⇥ ternary statement

const ${0} = ${1:cond} ? ${2:true} : ${3: false}

el⇥ else statement

else {

ife⇥ else statement

if (${1:condition}) {
} else {


ei⇥ else if statement

else if (${1:condition}) {

fl⇥ for loop (ES6)

for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length ${1:i} < ${2:len}; ${1:i}++) {

fi⇥ for in loop (ES6)

for (let ${1:key} in ${2:source}) {
  if (${2:source}.hasOwnProperty(${1:key})) {

fo⇥ for of loop (ES6)

for (let ${1:key} of ${2:source}) {

wl⇥ while loop

while (${1:condition}) {

wid⇥ while iteration decrementing

let ${1:array}Index = ${1:array}.length
while (${1:array}Index--) {

tc⇥ try/catch

try {
} catch (${1:err}) {


tf⇥ try/finally

try {
} finally {


tcf⇥ try/catch/finally

try {
} catch (${1:err}) {

} finally {



fan⇥ anonymous function

function (${1:arguments}) {${0}}

fn⇥ named function

function ${1:name}(${2:arguments}) {

asf⇥ async function

async function (${1:arguments}) {

aa⇥ async arrow function with

async (${1:arguments}) => {

iife⇥ immediately-invoked function expression (IIFE)

;(function (${1:arguments}) {

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}

fd⇥ arrow function with body (ES6)

({${1:arguments}}) => {

f⇥ arrow function with body (ES6)

(${1:arguments}) => {

fr⇥ arrow function with return (ES6)

(${1:arguments}) => {
  return ${0}

gf⇥ generator function (ES6)

function* (${1:arguments}) {

gfn⇥ named generator function (ES6)

function* ${1:name}(${1:arguments}) {


fe⇥ forEach loop

${1:iterable}.forEach((${2:item}) => {

map⇥ map function

${1:iterable}.map((${2:item}) => {

reduce⇥ reduce function

${1:iterable}.reduce((${2:previous}, ${3:current}) => {
}${4:, initial})

filter⇥ filter function

${1:iterable}.filter((${2:item}) => {

find⇥ ES6 find function

${1:iterable}.find((${2:item}) => {

every⇥ every function

${1:iterable}.every((${2:item}) => {

some⇥ some function

${1:iterable}.some((${2:item}) => {

Objects and classes

cs⇥ class (ES6)

class ${1:name} {
  constructor(${2:arguments}) {

csx⇥ extend a class (ES6)

class ${1:name} extends ${2:base} {
  constructor(${2:arguments}) {

m⇥ method (ES6 syntax)

${1:method} (${2:arguments}) {

get⇥ getter (ES6 syntax)

get ${1:property} () {

set⇥ setter (ES6 syntax)

set ${1:property} (${2:value}) {

gs⇥ getter and setter (ES6 syntax)

get ${1:property} () {
set ${1:property} (${2:value}) {


proto⇥ prototype method

${1:Class}.prototype.${2:methodName} = function (${3:arguments}) {

ok Object.keys


oc Object.create


oa Object.assign

Object.assign(${1:dest}, ${2:source})

og Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor(${1:dest}, '${2:prop}')

od Object.defineProperty

Object.defineProperty(${1:dest}, '${2:prop}', {

Returning values

r⇥ return

return ${0}

rt⇥ return this

return this

rn⇥ return null

return null

ro⇥ return new object

return {

ra⇥ return new array

return [

rp⇥ return Promise (ES6)

return new Promise((resolve, reject) => {

tof⇥ typeof comparison

typeof ${1:source} === '${2:undefined}'

tf⇥ this


iof⇥ instanceof comparison

${1:source} instanceof ${2:Object}

ia⇥ isArray



pa⇥ Promise.all


p⇥ new Promise (ES6)

new Promise((resolve, reject) => {

pt⇥ Promise.then

${1:promise}.then((${2:value}) => {

pc⇥ Promise.catch

${1:promise}.catch(error => {

ES6 modules

e⇥ module export

export ${1:member}

ed⇥ module default export

export default ${1:member}

edf⇥ module default export function

export default function ${1:name} (${2:arguments}) {\n\t${0}\n}

ec⇥ module export const

export const ${1:member} = ${2:value}

im⇥ module import

import ${1:*} from '${2:module}'

ia⇥ module import as

import ${1:*} as ${2:name} from '${3:module}'

id⇥ module import destructuring

import { $1 } from '${2:module}'

BDD testing (Mocha, Jasmine, etc.)

desc⇥ describe

describe('${1:description}', function () {

it⇥ asynchronous "it"

it('${1:description}', async () => {

itd⇥ "it" with callback

it('${1:description}', (done) => {

its⇥ "it" synchronous

it('${1:description}', () => {

bf⇥ before test suite

before(function () {

bfe⇥ before each test

beforeEach(function () {

aft⇥ after test suite

after(function () {

afe⇥ after each test

afterEach(function () {


st⇥ setTimeout

setTimeout(() => {
}, ${1:delay})

si⇥ setInterval

setTimeout(() => {
}, ${1:delay})

sim⇥ setImmediate

setImmediate(() => {


ae⇥ addEventListener

${1:document}.addEventListener('${2:event}', ${3:ev} => {

rel⇥ removeEventListener

${1:document}.removeEventListener('${2:event}', ${3:listener})

evc dom event cancel default and propagation

return false

gi⇥ getElementById


gc⇥ getElementsByClassName


gt⇥ getElementsByTagName


qs⇥ querySelector


qsa⇥ querySelectorAll


cdf⇥ createDocumentFragment


cel⇥ createElement


ac⇥ appendChild


rc⇥ removeChild


cla⇥ classList.add


ct⇥ classList.toggle


clr⇥ classList.remove


ga⇥ getAttribute


sa⇥ setAttribute

${1:document}.setAttribute('${2:attr}', ${3:value});

ra⇥ removeAttribute



cb⇥ Node.js style callback

function (err, ${1:value}) {
  if (err) throw err

rq⇥ require a module


cr⇥ require and assign a module

const ${1:module} = require('${1:module}')

em⇥ export member

exports.${1:name} = ${2:value}

me⇥ module.exports

module.exports = ${1:name}

on⇥ attach an event handler

${1:emitter}.on('${2:event}', (${3:arguments}) => {


us⇥ use strict

'use strict'

js⇥ JSON Stringify


jp⇥ JSON Parse


a⇥ await

await ${0}

apa⇥ Promise.all

await Promise.all(${1:value})

apm⇥ Promise.all map

await Promise.all(${1:array}.map((${2:value}) => {\n\t${0}\n}))


cl⇥ console.log


cv⇥ console.log

console.log('${0}:', ${0})

ce⇥ console.error


cw⇥ console.warn


cod⇥ console.dir


React snippets

Why do we include them here?

If you're not writing react, including them should not really bother you because they are not short as the regular JS snippets. ALso IMHO react is the leading solution for FE apps deserves to be included by default, because any JS dev will have to write some react eventually over the course of his/her careeer. By having them in a single package we can easily make sure --there aren't any conflicts in the trigger prefixes.

Supported languages (file extensions)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)

These were taken from https://github.com/TimonVS/vscode-react-standard because the maintainer wasn't able to publish a new version for months even when there was a considerable flaw in the released version. Below is a list of all available snippets and the triggers of each one. The means the TAB key.

Trigger Content
j→ jsx element
dp→ destructuring of props
ds→ destructuring of props
jc→ jsx self-closed element
jm→ jsx elements map
jmr→ jsx elements map with return
rcc→ class component skeleton
rccp→ class component skeleton with prop types after the class
rcjc→ class component skeleton without import and default export lines
rcfc→ class component skeleton that contains all the lifecycle methods
rsc→ stateless component skeleton
rscp→ stateless component with prop types skeleton
rpt→ empty propTypes declaration
con→ class default constructor with props
conc→ class default constructor with props and context
est→ empty state object
cwm→ componentWillMount method
cdm→ componentDidMount method
cwr→ componentWillReceiveProps method
cgd→ componentGetDerivedStateFromProps method
scu→ shouldComponentUpdate method
cwup→ componentWillUpdate method
cdup→ componentDidUpdate method
cwun→ componentWillUnmount method
ren→ render method
sst→ this.setState with object as parameter
ssf→ this.setState with function as parameter
tp this.props
ts this.state
bnd→ binds the this of method inside the constructor

There are also snippets to be triggered with a text selection(trigger via insert snippet command):

jsx element wrap selection

The following table lists all the snippets that can be used for prop types. Every snippet regarding prop types begins with pt so it's easy to group it all together and explore all the available options. On top of that each prop type snippets has one equivalent when we need to declare that this property is also required. For example pta creates the PropTypes.array and ptar creates the PropTypes.array.isRequired

Trigger Content
pta→ PropTypes.array,
ptar→ PropTypes.array.isRequired,
ptb→ PropTypes.bool,
ptbr→ PropTypes.bool.isRequired,
ptf→ PropTypes.func,
ptfr→ PropTypes.func.isRequired,
ptn→ PropTypes.number,
ptnr→ PropTypes.number.isRequired,
pto→ PropTypes.object.,
ptor→ PropTypes.object.isRequired,
pts→ PropTypes.string,
ptsr→ PropTypes.string.isRequired,
ptnd→ PropTypes.node,
ptndr→ PropTypes.node.isRequired,
ptel→ PropTypes.element,
ptelr→ PropTypes.element.isRequired,
pti→ PropTypes.instanceOf(ClassName),
ptir→ PropTypes.instanceOf(ClassName).isRequired,
pte→ PropTypes.oneOf(['News', 'Photos']),
pter→ PropTypes.oneOf(['News', 'Photos']).isRequired,
ptet→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
ptetr→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
ptao→ PropTypes.arrayOf(PropTypes.number),
ptaor→ PropTypes.arrayOf(PropTypes.number).isRequired,
ptoo→ PropTypes.objectOf(PropTypes.number),
ptoor→ PropTypes.objectOf(PropTypes.number).isRequired,
ptsh→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),
ptshr→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,




npm i vscode-standardjs-snippets

DownloadsWeekly Downloads






Unpacked Size

55.1 kB

Total Files


Last publish


  • capaj