VS Code React Native, React Native Typescript, StyleSheet, ReactJS, Redux Snippet

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

Here is direct link to marketplace React Native, StyleSheet, ReactJS, Redux Snippet

Tutorial

Snippet React Native Example

Snippet React Native Component

Snippet React Native StyleSheet

Supported languages (file extensions)

JavaScript (.js)
ReactJs (.js)
Redux (.js)
React Native (.jsx)
React Native StyleSheet (.jsx)
Typescript ReactJS (.tsx)
Typescript React Native (.tsx)

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';`
`exp→`	`export default moduleName`
`exd→`	`export { destructuredModule } from 'module';`
`exa→`	`export { 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 Native JavaScript

Prefix	Method
`imr→`	`import React from 'react';`
`imrc→`	`import React, { Component } from 'react';`
`imrn→`	`import { $1 } from 'react-native';`
`imrpc→`	`import React, { PureComponent } from 'react';`

StyleSheet

Prefix	Method
`just→`	`justifyContent: '';`
`align→`	`alignItems: '${1}';`
`as→`	`aspectRatio: '';`
`bor→`	`borderWidth: ;`
`flex→`	`flexDirection: '';`
`h→`	`height: ;`
`w→`	`width: ;`
`l→`	`left: '';`
`mar→`	`marginHorizontal: '';`
`max→`	`maxWidth: ;`
`min→`	`minWidth: ;`
`over→`	`overflow: ;`
`padding→`	`paddingHorizontal: ;`
`pos→`	`position: ;`
`ri→`	`right: ;`
`z→`	`zIndex: ;`
`di→`	`direction: ;`
`back→`	`backgroundColor: ;`
`sha→`	`shadowColor: ;`
`op→`	`opacity: ;`
`e→`	`elevation: ;`

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`

Redux

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

PropTypes

Prefix	Method
`ipt`	`import PropTypes from 'prop-types';`
`pt→`	`Component.propTypes = {};`
`dfp`	`Component.defaultProps = {};`
`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`

GraphQL

|graphql→|import { compose, graphql } from 'react-apollo';|

`expgql`

export default compose(
  graphql($1, { name: $2 })
)($3)

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

Typescript React Native

`tsrnc`

import * as React from 'react';
import { View, StyleSheet, Text, } from 'react-native';

export interface $1Props {
}

export default class $1 extends React.Component<$1Props, any> {
  render() {
    return (
      <View>
         <Text>

         </Text>
      </View>
    );
  }
}

`tsrnc`

import * as React from 'react';
import { View, StyleSheet, Text, } from 'react-native';

export interface $1Props {
}

export interface $1State {
}

export default class $1 extends React.Component<$1Props, $1State> {
  constructor(props: $1Props) {
    super(props);
        this.state = {
    }
  }

  render() {
    return (
      <View>
         <Text>
           $1
         </Text>
      </View>
    );
  }
}

`tsrnpc`

import * as React from 'react';
import { View, StyleSheet, Text, } from 'react-native';

export interface $1Props {
}

export interface $1State {
}

export default class $1 extends React.Component<$1Props, $1State> {
  constructor(props: $1Props) {
    super(props);
        this.state = {
    }
  }

  render() {
    return (
      <View>
         <Text>
           $1
         </Text>
      </View>
    );
  }
}

`tsrnc`

import * as React from 'react';
import { View, StyleSheet, Text, } from 'react-native';
import { connect } from 'react-redux';

export interface $1Props {
}

class $1 extends React.Component<$1Props, any> {
    render() {
        return (
            <View>
                <Text>$1</Text>
            </View>
        );
    }
}

const mapState2Props = state => {
    return {
    };
}

export default connect(mapState2Props)($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
}

自己看

VS Code React Native, React Native Typescript, StyleSheet, ReactJS, Redux Snippet

Tutorial

Supported languages (file extensions)

Snippets info

Basic Methods

React Native JavaScript

StyleSheet

React

Redux

PropTypes

GraphQL

expgql

Console

React Components

rcc

rce

rcep

rpc

rpcp

rccp

rfe

rfep

rfc

rfcp

rcredux

reduxmap

React Native Components

rnc

rnce

Typescript React Native

tsrnc

tsrnc

tsrnpc

tsrnc

Others

cmmb

desc

test

tit

stest

sjtest

sntest

hocredux

hoc

`expgql`

`rcc`

`rce`

`rcep`

`rpc`

`rpcp`

`rccp`

`rfe`

`rfep`

`rfc`

`rfcp`

`rcredux`

`reduxmap`

`rnc`

`rnce`

`tsrnc`

`tsrnc`

`tsrnpc`

`tsrnc`

`cmmb`

`desc`

`test`

`tit`

`stest`

`sjtest`

`sntest`

`hocredux`

`hoc`