VS Code ES7 React/Redux/React-Native/JS snippets

This extension provide you Javascript and React/Redux snippets in ES7 with babel plugins features for Vs Code

Here is direct link to marketplace ES7 React/Redux/React-Native/JS Snippets

Supported languages (file extensions)

JavaScript (.js)
JavaScript React (.jsx)

Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

Basic Methods

Prefix	Method
`imp→`	`import moduleName from 'module'`
`imn→`	`import 'module'`
`imd→`	`import { destructuredModule } from 'module'`
`ime→`	`import * as alias from 'module'`
`ima→`	`import { originalName as aliasName} from 'module'`
`enf→`	`export const functionName = (params) => { }`
`edf→`	`export default (params) => { }`
`met→`	`methodName = (params) => { }`
`fre→`	`arrayName.forEach(element => { }`
`fof→`	`for(let itemName of objectName { }`
`fin→`	`for(let itemName in objectName { }`
`anfn→`	`(params) => { }`
`nfn→`	`const functionName = (params) => { }`
`dob→`	`const {propName} = objectToDescruct`
`dar→`	`const [propName] = arrayToDescruct`
`sti→`	`setInterval(() => { }, intervalTime`
`sto→`	`setTimeout(() => { }, delayTime`
`prom→`	`return new Promise((resolve, reject) => { }`
`cmmb→`	`comment block`

React

Prefix	Method
`imr→`	`import React from 'react'`
`imrc→`	`import React, { Component } from 'react'`
`imrcp→`	`import React, { Component } from 'react' & import PropTypes from 'prop-types'`
`imrpc→`	`import React, { PureComponent } from 'react'`
`imrpcp→`	`import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'`
`redux`	`import { connect } from 'react-redux'
`rconst→`	`constructor(props) with this.state`
`rconc→`	`constructor(props, context) with this.state`
`est→`	`this.state = { }`
`cwm→`	`componentWillMount = () => { }`
`cdm→`	`componentDidMount = () => { }`
`cwr→`	`componentWillReceiveProps = (nextProps) => { }`
`scu→`	`shouldComponentUpdate = (nextProps, nextState) => { }`
`cwup→`	`componentWillUpdate = (nextProps, nextState) => { }`
`cdup→`	`componentDidUpdate = (prevProps, prevState) => { }`
`cwun→`	`componentWillUnmount = () => { }`
`ren→`	`render() { return( ) }`
`sst→`	`this.setState({ })`
`ssf→`	`this.setState((state, props) => return { })`
`props→`	`this.props.propName`
`state→`	`this.state.stateName`

React Native

Prefix	Method
`imrn→`	`import { $1 } from 'react-native'`

Redux

Prefix	Method
`rxaction→`	`redux action template`
`rxconst→`	`export const $1 = '$1'`
`rxreducer→`	`redux reducer template`
`rxselect→`	`redux selector template`

PropTypes

Prefix	Method
`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(name)`
`ptir→`	`PropTypes.instanceOf(name).isRequired`
`pte→`	`PropTypes.oneOf([name])`
`pter→`	`PropTypes.oneOf([name]).isRequired`
`ptet→`	`PropTypes.oneOfType([name])`
`ptetr→`	`PropTypes.oneOfType([name]).isRequired`
`ptao→`	`PropTypes.arrayOf(name)`
`ptaor→`	`PropTypes.arrayOf(name).isRequired`
`ptoo→`	`PropTypes.objectOf(name)`
`ptoor→`	`PropTypes.objectOf(name).isRequired`
`ptsh→`	`PropTypes.shape({ })`
`ptshr→`	`PropTypes.shape({ }).isRequired`

Console

Prefix	Method
`clg→`	`console.log(object)`
`cas→`	`console.assert(expression,object)`
`ccl→`	`console.clear()`
`cco→`	`console.count(label)`
`cdi→`	`console.dir`
`cer→`	`console.error(object)`
`cgr→`	`console.group(label)`
`cge→`	`console.groupEnd()`
`ctr→`	`console.trace(object)`
`cwa→`	`console.warn`
`cin→`	`console.info`

React Components

`rcc`

import React, { Component } from 'react'

export default class $1 extends Component {
  render() {
    return (
      <div>
        $2
      </div>
    )
  }
}

`rce`

import React, { Component } from 'react'

export class $1 extends Component {
  render() {
    return (
      <div>
        $2
      </div>
    )
  }
}

export default $1

`rcep`

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class $1 extends Component {
  static propTypes = {

  }

  render() {
    return (
      <div>
        $2
      </div>
    )
  }
}

export default $1

`rpc`

import React, { PureComponent } from 'react'

export default class $1 extends PureComponent {
  render() {
    return (
      <div>
        $2
      </div>
    )
  }
}

`rpcp`

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class $1 extends PureComponent {
  static propTypes = {

  }

  render() {
    return (
      <div>
        $2
      </div>
    )
  }
}

`rccp`

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class $1 extends Component {
  static propTypes = {
    $2: $3
  }

  render() {
    return (
      <div>
        $4
      </div>
    )
  }
}

`rfe`

import React from 'react'

const $1 = (props) => {
  return (
    <div>
      $0
    </div>
  )
}

export default $1

`rfep`

import React from 'react'
import PropTypes from 'prop-types'

const $1 = (props) => {
  return (
    <div>
      $0
    </div>
  )
}

$1.propTypes = {

}

export default $1

`rfc`

import React from 'react'

export default () => {
  return (
    <div>
      $0
    </div>
  )
}

`rfcp`

import React from 'react'
import PropTypes from 'prop-types'

export default () => {
  return (
    <div>
      $0
    </div>
  )
}

$1.propTypes = {

}

`rcredux`

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export class $1 extends Component {
  static propTypes = {
    $2: $3
  }

  render() {
    return (
      <div>
        $4
      </div>
    )
  }
}

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = {

}

export default connect(mapStateToProps, mapDispatchToProps)($1)

`reduxmap`

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = {

}

React Native Components

`rnc`

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class $1 extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}

`rnce`

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export class $1 extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}

export default $1

Others

`cmmb`

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

`desc`

describe('$1', () => {
  $2
})

`test`

test('should $1', () => {
  $2
})

`tit`

it('should $1', () => {
  $2
})

`stest`

import { ${1: ComponentName }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {

  }

  const setup = buildSetup(${1: ComponentName }, defaultProps)

  test('render', () => {
    expect(setup().wrapper).toMatchSnapshot()
  })
})

`sjtest`

import toJson from 'enzyme-to-json'
import { ${1:ComponentName} }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {

  }

  const setup = buildSetup(${1: ComponentName }, defaultProps)

  test('render', () => {
    expect(toJson(setup().wrapper)).toMatchSnapshot()
  })
})

`sntest`

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import ${1:ComponentName} from '../${1:ComponentName}'

it('renders correctly', () => {
  const tree = renderer.create(<${1:ComponentName} />).toJSON()

  expect(tree).toMatchSnapshot()
})

`hocredux`

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = state => ({

})

export const mapDispatchToProps = {

}

export const ${1:hocComponentName} = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {
  }

  return hocComponent
}

export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

`hoc`

import React from 'react'
import PropTypes from 'prop-types'

export default (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {
  }

  return hocComponent
}

OddEssay/vscode-es7-javascript-react-snippets