VS Code ES7 React/Redux/React-Native/JS snippets 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 moduleNameexd→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} = objectToDescructdar→const [propName] = arrayToDescructsti→setInterval(() => { }, intervalTimesto→setTimeout(() => { }, delayTimeprom→return new Promise((resolve, reject) => { }cmmb→comment blockcp→const { } = this.propscs→const { } = this.state
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'impt→import PropTypes from 'prop-types'redux→import { connect } from 'react-redux'rconst→constructor(props) with this.staterconc→constructor(props, context) with this.stateest→this.state = { }cwm→componentWillMount = () => { } DEPRECATED!!!cdm→componentDidMount = () => { }cwr→componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!scu→shouldComponentUpdate = (nextProps, nextState) => { }cwup→componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!cdup→componentDidUpdate = (prevProps, prevState) => { }cwun→componentWillUnmount = () => { }cwun→componentWillUnmount = () => { }gdsfp→static getDerivedStateFromProps(nextProps, prevState) { }gsbu→getSnapshotBeforeUpdate = (prevProps, prevState) => { }ren→render() { return( ) }sst→this.setState({ })ssf→this.setState((state, props) => return { })props→this.props.propNamestate→this.state.stateNamercontext→const ${1:contextName} = React.createContext()cref→this.${1:refName}Ref = React.createRef()fref→const ref = React.createRef()bnd→this.methodName = this.methodName.bind(this)
Prefix Method imrn→import { $1 } from 'react-native'rnstyle→const styles = StyleSheet.create({})
Prefix Method rxaction→redux action templaterxconst→export const $1 = '$1'rxreducer→redux reducer templaterxselect→redux selector template
Prefix Method pta→PropTypes.arrayptar→PropTypes.array.isRequiredptb→PropTypes.boolptbr→PropTypes.bool.isRequiredptf→PropTypes.funcptfr→PropTypes.func.isRequiredptn→PropTypes.numberptnr→PropTypes.number.isRequiredpto→PropTypes.objectptor→PropTypes.object.isRequiredpts→PropTypes.stringptsr→PropTypes.string.isRequiredptnd→PropTypes.nodeptndr→PropTypes.node.isRequiredptel→PropTypes.elementptelr→PropTypes.element.isRequiredpti→PropTypes.instanceOf(name)ptir→PropTypes.instanceOf(name).isRequiredpte→PropTypes.oneOf([name])pter→PropTypes.oneOf([name]).isRequiredptet→PropTypes.oneOfType([name])ptetr→PropTypes.oneOfType([name]).isRequiredptao→PropTypes.arrayOf(name)ptaor→PropTypes.arrayOf(name).isRequiredptoo→PropTypes.objectOf(name)ptoor→PropTypes.objectOf(name).isRequiredptsh→PropTypes.shape({ })ptshr→PropTypes.shape({ }).isRequiredptany→PropTypes.anyptypes→static propTypes = {}
|graphql→|import { compose, graphql } from 'react-apollo'|
export default compose ( graphql ( $1 , { name :$2 } ) ) ( $3 ) Prefix Method clg→console.log(object)cas→console.assert(expression,object)ccl→console.clear()cco→console.count(label)cdi→console.dircer→console.error(object)cgr→console.group(label)cge→console.groupEnd()ctr→console.trace(object)cwa→console.warncin→console.info
import React , { Component } from 'react' export default class FileName extends Component { render ( ) { return < div > $2</ div > } } import React , { Component } from 'react' export class FileName extends Component { render ( ) { return < div > $2</ div > } } export default $1 import React , { Component } from 'react' import PropTypes from 'prop-types' export class FileName extends Component { static propTypes = { } render ( ) { return < div > $2</ div > } } export default $1 import React , { PureComponent } from 'react' export default class FileName extends PureComponent { render ( ) { return < div > $2</ div > } } import React , { PureComponent } from 'react' import PropTypes from 'prop-types' export default class FileName extends PureComponent { static propTypes = { } render ( ) { return < div > $2</ div > } } import React , { Component } from 'react' import PropTypes from 'prop-types' export default class FileName extends Component { static propTypes = { $2 :$3 , } render ( ) { return < div > $4</ div > } } import React from 'react' const $1 = props => { return < div > $0</ div > } export default $1 import React from 'react' import PropTypes from 'prop-types' const $1 = props => { return < div > $0</ div > } $1 . propTypes = { } export default $1 import React from 'react' export default ( ) => { return < div > $0</ div > } import React from 'react' import PropTypes from 'prop-types' export default ( ) => { return < div > $0</ div > } $1 . propTypes = { } import React , { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' export class FileName extends Component { static propTypes = { $2 :$3 , } render ( ) { return < div > $4</ div > } } const mapStateToProps = state => ( { } ) const mapDispatchToProps = { } export default connect ( mapStateToProps , mapDispatchToProps , ) ( FileName ) const mapStateToProps = state => ( { } ) const mapDispatchToProps = { } import React , { Component } from 'react' import { Text , View } from 'react-native' export default class FileName extends Component { render ( ) { return ( < View > < Text > $2</ Text > </ View > ) } } import React , { Component } from 'react' import { Text , StyleSheet , View } from 'react-native' export default class FileName extends Component { render ( ) { return ( < View > < Text > $2</ Text > </ View > ) } } const styles = StyleSheet . create ( { } ) import React , { Component } from 'react' import { Text , View } from 'react-native' export class FileName extends Component { render ( ) { return ( < View > < Text > $2</ Text > </ View > ) } } export default $1 import React , { Component } from 'react' import { View , Text } from 'react-native' import PropTypes from 'prop-types' import { connect } from 'react-redux' export class FileName extends Component { static propTypes = { $2 :$3 , } render ( ) { return ( < View > < Text > $2</ Text > </ View > ) } } const mapStateToProps = state => ( { } ) const mapDispatchToProps = { } export default connect ( mapStateToProps , mapDispatchToProps , ) ( FileName ) /** |-------------------------------------------------- | $1 |-------------------------------------------------- */ test ( 'should $1' , ( ) => { $2 } ) 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 ( ) } ) } ) 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 ( ) } ) } ) import 'react-native' import React from 'react' import renderer from 'react-test-renderer' import $ { 1 :ComponentName } from '../${1:ComponentName}' describe ( '<${1:ComponentName} />' , ( ) => { const defaultProps = { } const wrapper = renderer . create ( < $ { 1 :ComponentName } { ...defaultProps } /> ) test ( 'render' , ( ) => { expect ( wrapper ) . toMatchSnapshot ( ) } ) } ) import React from 'react' import renderer from 'react-test-renderer' import { $ { 1 :ComponentName } } from '../${1:ComponentName}' describe ( '<${1:ComponentName} />' , ( ) => { const defaultProps = { } const wrapper = renderer . create ( < $ { 1 :ComponentName } { ...defaultProps } /> ) test ( 'render' , ( ) => { expect ( wrapper ) . toMatchSnapshot ( ) } ) } ) import 'react-native' import React from 'react' import renderer from 'react-test-renderer' import { Provider } from 'react-redux' import store from 'src/store/configureStore' import $ { 1 :ComponentName } from '../${1:ComponentName}' describe ( '<${1:ComponentName} />' , ( ) => { const defaultProps = { } const wrapper = renderer . create ( < Provider store = { store } > < $ { 1 :ComponentName } { ...defaultProps } /> </ Provider > , ) test ( 'render' , ( ) => { expect ( wrapper ) . toMatchSnapshot ( ) } ) } ) 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 ) ) import React from 'react' import PropTypes from 'prop-types' export default WrappedComponent => { const hocComponent = ( { ...props } ) => < WrappedComponent { ...props } /> hocComponent . propTypes = { } return hocComponent }