vscode-standardjs-snippets

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 like them in the snippets.

Standard JavaScript Snippets for Visual studio code

A collection of ES6 snippets for faster JavaScript development in Atom Editor.

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:

• Are Semicolons Necessary in JavaScript?
• An Open Letter to JavaScript Leaders Regarding Semicolons
• JavaScript Semicolon Insertion - Everything You Need to Know

Making the snippets top priority

I certainly 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

Snippets are optimized to be short and easy to remember. Note that these links work only on github, not on VSCode marketplace:

• declarations
• flow control
• functions
• iterables
• objects and classes
• returning values
• types
• promises
• ES6 modules
• testing
• console
• timers
• DOM
• Node.js
• miscellaneous

Declarations

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}) {
  ${0}
}

el⇥ else statement

else {
  ${0}
}

ife⇥ else statement

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

}

ei⇥ else if statement

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

fl⇥ for loop (ES6)

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

fi⇥ for in loop (ES6)

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

fo⇥ for of loop (ES6)

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

wl⇥ while loop

while (${1:condition}) {
  ${0}
}

wid⇥ while iteration decrementing

let ${1:array}Index = ${1:array}.length
while (${1:array}Index--) {
  ${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 {

}

Functions

f⇥ anonymous function

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

fn⇥ named function

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

asf⇥ async function

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

aa⇥ async arrow function

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

iife⇥ immediately-invoked function expression (IIFE)

;(function (${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}(${1:arguments}) {
  ${0}
}

Iterables

fe⇥ forEach loop

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

map⇥ map function

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

reduce⇥ reduce function

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

filter⇥ filter function

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

find⇥ ES6 find function

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

every⇥ every function

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

some⇥ some function

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

Objects and classes

cs⇥ class (ES6)

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

csx⇥ extend a class (ES6)

class ${1:name} extends ${2:base} {
  constructor(${2:arguments}) {
    super(${2: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}) {

}

proto⇥ prototype method

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

ok Object.keys

Object.keys(${1:obj})

oc Object.create

Object.create(${1:obj})

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}', {
  ${0}
})

Returning values

r⇥ return

return ${0}

rt⇥ return this

return this

rn⇥ return null

return null

ro⇥ return new object

return {
  ${0}
}

ra⇥ return new array

return [
  ${0}
]

rp⇥ return Promise (ES6)

return new Promise((resolve, reject) => {
  ${0}
})

tof⇥ typeof comparison

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

iof⇥ instanceof comparison

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

ia⇥ isArray

Array.isArray(${1:source})

Promises

pa⇥ Promise.all

Promise.all([${1:value}])

p⇥ new Promise (ES6)

new Promise((resolve, reject) => {
  ${0}
})

pt⇥ Promise.then

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

pc⇥ Promise.catch

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

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 () {
  ${0}
})

it⇥ synchronous "it"

it('${1:description}', function () {
  ${0}
})

ita⇥ asynchronous "it"

it('${1:description}', function (done) {
  ${0}
})

bf⇥ before test suite

before(function () {
  ${0}
})

bfe⇥ before each test

beforeEach(function () {
  ${0}
})

aft⇥ after test suite

after(function () {
  ${0}
})

afe⇥ after each test

afterEach(function () {
  ${0}
})

Timers

st⇥ setTimeout

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

si⇥ setInterval

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

sim⇥ setImmediate

setImmediate(() => {
  ${0}
})

DOM

ae⇥ addEventListener

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

rel⇥ removeEventListener

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

evc dom event cancel default and propagation

ev.preventDefault()
ev.stopPropagation()
return false

gi⇥ getElementById

${1:document}.getElementById('${2:id}')

gc⇥ getElementsByClassName

Array.from(${1:document}.getElementsByClassName('${2:class}'))

gt⇥ getElementsByTagName

Array.from(${1:document}.getElementsByTagName('${2:tag}'))

qs⇥ querySelector

${1:document}.querySelector('${2:selector}')

qsa⇥ querySelectorAll

Array.from(${1:document}.querySelectorAll('${2:selector}'))

cdf⇥ createDocumentFragment

${1:document}.createDocumentFragment(${2:elem});

cel⇥ createElement

${1:document}.createElement(${2:elem});

ac⇥ appendChild

${1:document}.appendChild(${2:elem});

rc⇥ removeChild

${1:document}.removeChild(${2:elem});

cla⇥ classList.add

${1:document}.classList.add('${2:class}');

ct⇥ classList.toggle

${1:document}.classList.toggle('${2:class}');

clr⇥ classList.remove

${1:document}.classList.remove('${2:class}');

ga⇥ getAttribute

${1:document}.getAttribute('${2:attr}');

sa⇥ setAttribute

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

ra⇥ removeAttribute

${1:document}.removeAttribute('${2:attr}');

Node.js

cb⇥ Node.js style callback

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

rq⇥ require a module

require('${1: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}) => {
  ${0}
})

Miscellaneous

us⇥ use strict

'use strict'

js⇥ JSON Stringify

JSON.stringify($0)

jp⇥ JSON Parse

JSON.parse($0)

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}))

Console

cl⇥ console.log

console.log(${0})

ce⇥ console.error

console.error(${0})

cw⇥ console.warn

console.warn(${0})

cod⇥ console.dir

console.dir(${0})

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 component
jc→	jsx self-closed component
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
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
props→	this.props
state→	this.state
bnd→	binds the this of method inside the constructor

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,

License

The MIT License (MIT)

Copyright (c) 2016, Jiří Špác

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.