atom-es6-standard

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!

No semicolons - It's fine.Really

changelog

0.3.0+ supports react redux and react-router snippets

Snippets

assert
async
classes
console
declarations
dom
flow-control
functions
iterables
math
misc
modules
node-modules
objects
return
timers
types
react
react-redux
react-router

assert

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

async

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

classes

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

console

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

declarations

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}

dom

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

flow-control

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

functions

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

iterables

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

math

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

misc

us -> use strict

use strict

js -> JSON stringify

JSON.stringify(${0})

jp -> JSON parse

JSON.parse(${0})

modules

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

node-modules

req -> require

require('${1:module}')

exm -> exports.member

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

mex -> module exports

module.exports = ${0}

objects

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

return

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

timers

st -> setTimeout

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

si -> setInterval

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

sim -> setImmediate

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

ct -> clearTimout

clearTimout(${1:timer})

cl -> clearInterval

clearInterval(${1:timer})

types

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}

react

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

atom-es6-standard

atom-es6-standard

changelog

Snippets

assert

async

classes

console

declarations

dom

flow-control

functions

iterables

math

misc

modules

node-modules

objects

return

timers

types

react

I think this package is bad news.