A collection of ES6/7 snippets for faster javascript development in Atom
originally forked from atom-es6-javascript, but I've added couple more. Of course, these snippets use standard javascript guide.
Yes, no semicolons!
0.3.0+ supports react redux and react-router snippets
ase
-> assert.equal
assert.equal(${1:actual}, ${2:expected})
asn
-> assert.notEqual
assert.notEqual(${1:actual}, ${2:expected})
asd
-> assert deepEqual
assert.deepEqual(${1:actual}, ${2:expected})
cb
-> Node callback
(err, ${1:value}) => {${0}}
p
-> Promise
new Promise((resolve, reject) => {
${0}
})
then
-> Promise.then
${1:promise}.then(${2:value}) => {
${0}
}
.then
-> chain then
.then(${1:value}) => {
${0}
}
catch
-> Promise.catch
${1:promise}.catch(${2:err} => {
${0}
})
.catch
-> chain catch
.catch(${1:err} => {
${0}
})
cs
-> class
class ${1:name} {
constructor(${2:arguments}) {
${0}
}
}
csx
-> class extends
class ${1:name} extends ${2:base} {
constructor(${3:arguments}) {
super(${3:arguments})
${0}
}
}
cl
-> console.log
console.log('${1:title}', ${2:$1}$0)
cll
-> console.log(text only)
console.log(${0})
ce
-> console.error
console.error(${0})
cw
-> console.warn
console.warn(${0})
v
-> var statement
var ${1:name}
ve
-> var assignment
var ${1:name} = ${2;value}
l
-> set statement
let ${1:name}
le
-> let assignment
let ${1:name} = ${2:value}
la
-> let assignment await
let ${1:name} = await ${2:value}
ly
-> let yielded assignment
let ${1:name} = yield ${2:value}
co
-> const statement
const ${1:name}
coe
-> const assignment
const ${1:name} = ${2:value}
con
-> const named assignment
const { ${1:name} } = ${2:value}
cosy
-> const Symbol
const ${1:name} = Symbol('${2:name}')
coa
-> const assignment await
const ${1:name} = await ${2:value}
coy
-> const yielded assignment
const ${1:name} = yield ${2:value}
ae
-> addEventListener
${1:document}.addEventListener('${2:event}', function (e) {
${0}
})
rel
-> removeEventListener
${1:document}.removeEventListener('${2:event}', ${3:listener})
stp
-> stopPropagation
${1:event}.stopPropagation()
prd
-> preventDefault
${1:event}.preventDefault()
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
${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}')
clt
-> 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}')
if
-> if statement
if (${1:condition}) {
${2}
}
el
-> else statement
else {
${0}
}
ife
-> if/else statement
if (${1:condition}) {
${2}
} else {
${3}
}
ei
-> else if statement
else if (${1:condition}) {
${2}
}
fl
-> for loop
for (let ${1:i} = 0; ${1:i} < ${2:iterable}${3:.length}; ${1:i}++) {
${4}
}
fi
-> for in loop
for (let ${1:key} in ${2:source}) {
if (${2:source}.hasOwnProperty(${1:key})) {
${3}
}
}
fo
-> for of loop
for (let ${1:key} of ${2:source}) {
${3}
}
wl
-> while loop
while (${1:condition}) {
${2}
}
tc
-> try/catch
try {
${1}
} catch (${2:err}) {
${3}
}
tf
-> try/finally
try {
${1}
} finally {
${2}
}
tcf
-> try/catch/finally
try {
${1}
} catch (${2:err}) {
${3}
} finally {
${4}
}
f
-> anonymous function
function (${1:arguments}) {${0}}
fn
-> named function
function ${1:name} (${2:argments}) {
${0}
}
immediately-invoked function expression
;((${1:argments}) => {
${0}
})(${2})
fa
-> function apply
${1:fn}.apply(${2:this}, ${3:argments})
fc
-> function call
${1:fn}.call(${2:this}, ${3:arguments})
fb
-> function bind
${1:fn}.bind(${2:this}, ${3:argments})
af
-> arrow function
(${1:argments}) => ${2:statement}
afb
-> arrow function with body
(${1:argments}) => {
${0}
}
gf
-> generator
function * (${1:argments}) {
${0}
}
gfn
-> named generator
function * ${1:name} (${2:arguments}) {
${0}
}
fe
-> forEach loop
${1:iterable}.forEach(${2:item} => {
${0}
})
.forEach
-> chain forEach loop
.forEach(${1:item} => {
${0}
})
map
-> map
${1:iterable}.map(${2:item} => {
${0}
})
.map
-> chain map
.map(${1:item} => {
${0}
})
.mapr
-> chain map return object or jsx
.map(${1:item} => (${2}))
reduce
-> reduce
${1:iterable}.reduce((${2:p}, ${3:c}) => {
${0}
})
.reduce
-> chain reduce
.reduce((${1:p}, ${2:c}) =>{
${0}
})
filter
-> filter
${1:iterable}.filter(${2:item} => {
${0}
})
.filter
-> chain filter
.filter(${1:item} => {
${0}
})
find
-> find
${1:iterable}.find(${2:item} => {
${0}
})
.find
-> chain find
.find(${1:item} => {
${0}
})
every
-> every
${1:iterable}.every(${2:item} => {
${0}
})
.every
-> chain every
.every(${1:item} => {
${0}
})
some
-> some
${1:iterable}.some(${2:item} => {
${0}
})
.some
-> chain some
.some(${1:item} => {
${0}
})
sin
-> Math.sin
Math.sin(${0})
abs
-> Math.abs
Math.abs(${0})
acos
-> Math.acos
Math.acos(${0})
asin
-> Math.asin
Math.asin(${0})
atan
-> Math.atan
Math.atan(${0})
ceil
-> Math.cel
Math.ceil(${0})
cos
-> Math.cos
Math.cos(${0})
floor
-> Math.floor
Math.floor(${0})
loge
-> Math.log
Math.log(${0})
log2
-> Math.log2
Math.log2(${0})
pow
-> Math.pow
Math.pow(${1:base}, ${2:2})
random
-> Math.random
Math.random()
sqrt
-> Math.sqrt
Math.sqrt(${0})
tan
-> Math.tan
Math.tan(${0})
PI
-> Math.PI
Math.PI
us
-> use strict
use strict
js
-> JSON stringify
JSON.stringify(${0})
jp
-> JSON parse
JSON.parse(${0})
ex
-> module export
export ${1:member}
ec
-> module export const
export const ${1:member} = ${2:value}
ed
-> module export default
export default ${1:member}
edf
-> module export default function
export default function ${1:name} (${2:argments}) {
${0}
}
edaf
-> module export default arrow function
export default (${1:argments}) => {
${0}
}
im
-> import module
import ${1:*} from '${2:module}'
ima
-> import module as
import ${1:*} as ${2:name} from '${3:module}'
imn
-> import module named
import { ${1{1:name}} } from '${2:module}'
imp
-> import single
import '${1:module}'
req
-> require
require('${1:module}')
exm
-> exports.member
exports.${1:member} = ${2:value}
mex
-> module exports
module.exports = ${0}
kv
-> key/value pair
${1:key}: ${2:'value'}
m
-> method
${1:method} (${2:argments}) {
${0}
}
get
-> getter
get ${1:property} (${2:value}) {
${0}
}
gs
-> getter + setter
get ${1:property} () {
${0}
}
set ${1:property} (${2:value}) {
${3}
}
proto
-> prototype method
${1:Class}.prototype.${2:method} = function (${3:argments}) {
${0}
}
.proto
-> chain prototype method
.prototype.${1:method} = function (${2:argments}) {
${0}
}
oa
-> Object assign
Object.assign(${1:dest}, ${2:source})
oc
-> Object create
Object.create(${1:obj})
ok
-> Object keys
Object.keys(${1:obj})
og
-> Object getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor(${1:dest}, '${2:prop}')
od
-> Object defineProperty
Object.defineProperty(${1:dest}, '${2:prop}')
r
-> return
return ${0}
rt
-> return this
return this
rn
-> return null
return null
rf
-> return false
return false
ro
-> return object
return {
${0}
}
rp
-> return promise
return new Promise((resolve, reject) => {
${0}
})
st
-> setTimeout
setTimeout(() => {
${0}
}, ${1:delay})
si
-> setInterval
setInterval(() => {
${0}
})
sim
-> setImmediate
setImmediate(() => {
${0}
})
ct
-> clearTimout
clearTimout(${1:timer})
cl
-> clearInterval
clearInterval(${1:timer})
S
-> String
String
N
-> Number
Number
O
-> Object
Object
D
-> Date
Date
Rx
-> RegExp
RegExp
tof
-> typeof
typeof ${1:source} === '${2:undefined}'
iof
-> instanceof
${1:source} instanceof ${2:Object}
rcn
-> React className
className='${1}'
imr
-> import React
import React from 'react'
imrd
-> import ReactDom
import ReactDom from 'react-dom'
imrc
-> import React and Component
import React, { Component } from 'react'
imrp
-> import PropTypes
import PropTypes from 'prop-types'
rc
-> React Componet
class ${1:MyComponent} extends Component {
constructor (props) {
super(props)
this.state = {
${2}
}
}
render () {
return (
${3:<div>MyComponent</div>}
)
}
}
export default ${1:MyComponent}
rcp
-> React Component with PropTypes:
class ${1:MyComponent} extends Component {
static propTypes = {
${2}
}
constructor (props) {
super(props)
this.state = {
${3}
}
}
render () {
return (
${4:<div>MyComponent</div>}
)
}
}
export default ${1:MyComponent}
rcf
-> React Component Function
function ${1} (props) {
return (
${3:<div>MyComponent</div>}
)
}
${1}.propTypes = {
${2}
}
export default ${1}
rcaf
-> React Component Arrow Function
const ${1} = (props) => {
return (
${3:<div>MyComponent</div>}
)
}
export default ${1}
rcm
-> React method
${1:method} = (${2}) => {
${3}
}
rcwm
-> React componentwillMount
componentWillMount () {
${1}
}
rcdm
-> React componentDidMount
componentDidMount () {
${1}
}
rcwr
-> React componentWillReceiveProps
componentWillReceiveProps () {
${1}
}
rscup
-> React shouldComponentUpdate
shouldComponentUpdate (nextProps, nextState) {
${1}
}
rcdup
-> React componentDidUpdate
componentDidUpdate (prevProps, prevState) {
${1}
}
rcwup
-> React componentWillUpdate
componentWillUpdate (nextProps, nextState) {
${1}
}
rcwu
-> React componentWillUnmount
componentWillUnmount () {
${1}
}
rdp
-> React static defaultProps
static defaultProps = {
${1}
}
rpt
-> React static propTypes
static propTypes = {
${1}: PropTypes.${2:string}
}
rcc
-> React createContext
const ${1:myContext} = React.createContext(${2:defaultValue})
rcco
-> React Context Consumer
<${1:myContext.}Consumer>
{value => ${2}}
</${1:myContext.}Consumer>
rcpr
-> React Context Provider
<${1:myContext.}Provider value={${2}}>
${3}
</${1:myContext.}Provider>
`rss` -> React setState
this.setState({ ${1}: ${2} })
`rtp` -> React this.props
`this.props.${1}`
`rts` -> React this.state
`this.state.${1}`
`rps` -> React PropTypes string
`PropTypes.string`
`rpsr` -> React PropTypes.string.isRequired
`PropTypes.string.isRequired`
`rpa` -> React PropTypes array
`PropTypes.array`
`rpar` -> React PropTypes.array.isRequired
`PropTypes.array.isRequired`
`rpb` -> React PropTypes bool
`PropTypes.bool`
`rpbr` -> React PropTypes.bool.isRequired
`rpf` -> React PropTypes function
`PropTypes.func`
`rpfr` -> React PropTypes.func.isRequired
`PropTypes.func.isRequired`
`rpn` -> React PropTypes number
`PropTypes.number`
`rpnr` -> React PropTypes.number.isRequired
`PropTypes.number.isRequired`
`rpo` -> React PropTypes object
`PropTypes.object`
`rpor` -> React PropTypes.object.isRequired
`PropTypes.object.isRequired`
`rpnode` -> React PropTypes node
`PropTypes.node`
`rpnoder` -> React PropTypes.node.isRequired
`PropTypes.node.isRequired`
`rpe` -> React PropTypes element
`PropTypes.element`
`rper` -> React PropTypes.element.isRequired
`PropTypes.element.isRequired`
`rpi` -> React PropTypes isinstanceOf
`PropTypes.instanceOf(${1})`
`rpir` -> React PropTypes.isinstanceOf.isRequired
`propTypes.isinstanceOf(${1}).isRequired`
`rpone` -> React PropTypes oneOf
`PropTypes.oneOf([${1}])`
`rponer` -> React PropTypes.oneOf.isRequired
`PropTypes.oneOf([${1}]).isRequired`
`rponet` -> React PropTypes.oneOfType
PropTypes.oneOfType([ ${1} ])
`rponetr` -> React PropTypes.oneOfType.isRequired
PropTypes.oneOfType([ ${1} ]).isRequired
`rpao` -> React PropTypes arrayOf
`PropTypes.arrayOf(${1})`
`rpaor` -> React PropTypes.arrayOf.isRequired
`PropTypes.arrayOf(${1}).isRequired`
`rpoo` -> React PropTypes objectOf
`PropTypes.objectOf(${1})`
`rpoor` -> React PropTypes.objectOf.isRequired
`PropTypes.objectOf(${1}).isRequired`
`rpsh` -> React PropTypes shape
PropTypes.shape({ ${1} })
`rpshr` -> React PropTypes.shape.isRequired
PropTypes.shape({ ${1} }).isRequired
`rpany` -> React PropTypes any
`PropTypes.any`
`rpanyr` -> React PropTypes.any.isRequired
`PropTypes.any.isRequired`
<div id="react-redux"></div>
### react-redux
`imrr` -> import Redux
`import { createStore${1:, applyMiddleware} } from 'redux'`
`imrrr` -> import Redux combineReducers
`import { combineReducers } from 'redux'`
`imrrp` -> import Redux Provider
`import { Provider } from 'react-redux'`
`imrrc` -> import Redux connect
`import { connect } from 'react-redux'`
`imrrb` -> import Redux bindActionCreators
`import { bindActionCreators } from 'redux'`
`imrrt` -> import Redux thunk
`import thunk from 'redux-thunk'`
`rrc` -> React Redux Container
class ${1:MyComponent} extends Component { static propTypes = { ${4} }
constructor (props) { super(props) this.state = { ${5} } }
render () { return ( ${6:MyComponent} ) } }
const mapStateToProps = (state) => ({ ${2} })
const mapDispatchToProps = (dispatch) => ({ ${3} })
export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent})
`rrcc` -> React Redux @connect
@connect( ${3:state} => { ${6} }, ${4:dispatch} => bindActionCreators(${5:actions}, dispatch) )
class ${1:MyComponent} extends Component { static propTypes = { ${2} }
render () { return ( ${7:MyComponent} ) } }
`rrac` -> React Redux Action Creator
prefix: 'rrac' body: """ export const ${1:asyncAction} = (${2:arguments}) => (dispatch, getState) => { dispatch(${0}) return fetch(${3:url}) .then(response => response.json()) .then(json => dispatch(${1})) }
<div id="react-router"></div>
### react-router
`imro` -> import react-router-dom
`import { ${1:Route}, ${2:BrowserRouter} as Router, ${3:Switch}, ${4:Link}} from 'react-router-dom'`
`imrol` -> import react-router Link
`import { Link } from 'react-router-dom'`
`imros` -> import react-router Switch
`import { Switch, ${1:Link} } from 'react-router-dom'`
`rolink` -> react-router-link
`<Link to='${1:path}'>${2:description}</Link>`
`roswitch` -> react-router Switch
roroute
-> react-router Route
<Route path='${1:/}' component={${2}} ${3:exact} />
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.