• Sign In



  • Categories

    Extension Details



    Readme

    React Code Clips

    Description

    This extension gives you JavaScript and TypeScript code clips for React, React Native, Redux and GraphQL.

    Clips

    Basic Methods

    Trigger Description
    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) => { }
    cp→ const { } = this.props
    cs→ const { } = this.state

    React

    Trigger Description
    imr→ import React from 'react'
    imrd→ import ReactDOM from 'react-dom'
    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'
    imrm→ import React, { memo } from 'react'
    imrmp→ import React, { memo } from 'react' & import PropTypes from 'prop-types'
    impt→ import PropTypes from 'prop-types'
    imrr→ import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
    imbr→ import { BrowserRouter as Router} from 'react-router-dom'
    imbrc→ import { Route, Switch, NavLink, Link } from react-router-dom'
    imbrr→ import { Route } from 'react-router-dom'
    imbrs→ import { Switch } from 'react-router-dom'
    imbrl→ import { Link } from 'react-router-dom'
    imbrnl→ import { NavLink } from 'react-router-dom'
    imrs→ import React, { useState } from 'react'
    imrse→ import React, { useState, useEffect } from 'react'
    redux→ import { connect } from 'react-redux'
    rconst→ constructor(props) with this.state
    rconc→ constructor(props, context) with this.state
    est→ 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 = () => { }
    gdsfp→ static getDerivedStateFromProps(nextProps, prevState) { }
    gsbu→ getSnapshotBeforeUpdate = (prevProps, prevState) => { }
    ren→ render() { return( ) }
    sst→ this.setState({ })
    ssf→ this.setState((state, props) => return { })
    props→ this.props.propName
    state→ this.state.stateName
    rcontext→ const ${1:contextName} = React.createContext()
    cref→ this.${1:refName}Ref = React.createRef()
    fref→ const ref = React.createRef()
    bnd→ this.methodName = this.methodName.bind(this)

    React Native

    Trigger Description
    imrn→ import { $1 } from 'react-native'
    rnstyle→ const styles = StyleSheet.create({})

    Redux

    Trigger Description
    rxaction→ redux action template
    rxconst→ export const $1 = '$1'
    rxreducer→ redux reducer template
    rxselect→ redux selector template
    rxslice→ redux slice template

    PropTypes

    Trigger Description
    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
    ptany→ PropTypes.any
    ptypes→ static propTypes = {}

    GraphQL

    Trigger Description
    graphql→ import { compose, graphql } from react-apollo'
    expgql-> export default compose(graphql($1, { name: $2 }))($3)

    Console

    Trigger Description
    clg→ console.log(object)
    clo→ console.log(`object`, object)
    ctm→ console.time(`timeId`)
    cte→ console.timeEnd(`timeId`)
    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 FileName extends Component {
      render() {
        return <div>$2</div>
      }
    }
    

    rce

    import React, { Component } from 'react'
    
    export class FileName extends Component {
      render() {
        return <div>$2</div>
      }
    }
    
    export default $1
    

    rcep

    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
    

    rpc

    import React, { PureComponent } from 'react'
    
    export default class FileName extends PureComponent {
      render() {
        return <div>$2</div>
      }
    }
    

    rpcp

    import React, { PureComponent } from 'react'
    import PropTypes from 'prop-types'
    
    export default class FileName extends PureComponent {
      static propTypes = {}
    
      render() {
        return <div>$2</div>
      }
    }
    

    rpce

    import React, { PureComponent } from 'react'
    import PropTypes from 'prop-types'
    
    export class FileName extends PureComponent {
      static propTypes = {}
    
      render() {
        return <div>$2</div>
      }
    }
    
    export default FileName
    

    rccp

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

    rfcp

    import React from 'react'
    import PropTypes from 'prop-types'
    
    function $1(props) {
      return <div>$0</div>
    }
    
    $1.propTypes = {}
    
    export default $1
    

    rfc

    import React from 'react'
    
    export default function $1() {
      return <div>$0</div>
    }
    

    rfce

    import React from 'react'
    
    function $1() {
      return <div>$0</div>
    }
    
    export default $1
    

    rafcp

    import React from 'react'
    import PropTypes from 'prop-types'
    
    const $1 = (props) => {
      return <div>$0</div>
    }
    
    $1.propTypes = {}
    
    export default $1
    

    rafc

    import React from 'react'
    
    export const $1 = () => {
      return <div>$0</div>
    }
    

    rafce

    import React from 'react'
    
    const $1 = () => {
      return <div>$0</div>
    }
    
    export default $1
    

    rmc

    import React, { memo } from 'react'
    
    export default memo(function $1() {
      return <div>$0</div>
    })
    

    rmcp

    import React, { memo } from 'react'
    import PropTypes from 'prop-types'
    
    const $1 = memo(function $1(props) {
      return <div>$0</div>
    })
    
    $1.propTypes = {}
    
    export default $1
    

    rcredux

    import React, { Component } from 'react'
    import { connect } from 'react-redux'
    
    export class FileName extends Component {
      render() {
        return <div>$4</div>
      }
    }
    
    const mapStateToProps = (state) => ({})
    
    const mapDispatchToProps = {}
    
    export default connect(mapStateToProps, mapDispatchToProps)(FileName)
    

    rcreduxp

    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)
    

    rfcredux

    import React, { Component } from 'react'
    import { connect } from 'react-redux'
    
    export const FileName = () => {
      return <div>$4</div>
    }
    
    const mapStateToProps = (state) => ({})
    
    const mapDispatchToProps = {}
    
    export default connect(mapStateToProps, mapDispatchToProps)(FileName)
    

    rfreduxp

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import { connect } from 'react-redux'
    
    export const FileName = () => {
      return <div>$4</div>
    }
    
    FileName.propTypes = {
      $2: $3,
    }
    
    const mapStateToProps = (state) => ({})
    
    const mapDispatchToProps = {}
    
    export default connect(mapStateToProps, mapDispatchToProps)(FileName)
    

    reduxmap

    const mapStateToProps = (state) => ({})
    
    const mapDispatchToProps = {}
    

    React Native Components

    rnc

    import React, { Component } from 'react'
    import { Text, View } from 'react-native'
    
    export default class FileName extends Component {
      render() {
        return (
          <View>
            <Text> $2 </Text>
          </View>
        )
      }
    }
    

    rnf

    import React from 'react'
    import { View, Text } from 'react-native'
    
    export default function $1() {
      return (
        <View>
          <Text> $2 </Text>
        </View>
      )
    }
    

    rnfs

    import React from 'react'
    import { StyleSheet, View, Text } from 'react-native'
    
    export default function $1() {
      return (
        <View>
          <Text> $2 </Text>
        </View>
      )
    }
    
    const styles = StyleSheet.create({})
    

    rnfe

    import React from 'react'
    import { View, Text } from 'react-native'
    
    const $1 = () => {
      return (
        <View>
          <Text> $2 </Text>
        </View>
      )
    }
    
    export default $1
    

    rnfes

    import React from 'react'
    import { StyleSheet, View, Text } from 'react-native'
    
    const $1 = () => {
      return (
        <View>
          <Text> $2 </Text>
        </View>
      )
    }
    
    export default $1
    
    const styles = StyleSheet.create({})
    

    rncs

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

    rnce

    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
    

    rncredux

    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)
    

    TypeScript variants of the above components can be accessed by using the ts prefix e.g. tsrfce

    Other

    cmmb

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

    desc

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

    test

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

    tit

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

    stest

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

    srtest

    import React from 'react'
    import renderer from 'react-test-renderer'
    import { Provider } from 'react-redux'
    
    import store from 'src/store'
    import { ${1:ComponentName} } from '../${1:ComponentName}'
    
    describe('<${1:ComponentName} />', () => {
      const defaultProps = {}
      const wrapper = renderer.create(
        <Provider store={store}>
          <${1:${TM_FILENAME_BASE}} {...defaultProps} />)
        </Provider>,
      )
    
      test('render', () => {
        expect(wrapper).toMatchSnapshot()
      })
    })
    

    sntest

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

    snrtest

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

    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
    }
    

    Acknowledgements

    React Code Clips is based on Damian Sznajder's VS Code extension

    License

    The MIT License (MIT)

    Copyright (c) 2014, Nicolas Mercier

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    Release Notes

    Version 1.0.2

    Typo fix for 'rafce' clip name courtesy of @dlbnco

    Version 1.0.1

    Some minor fixes courtesy of @Pitchoune:

    • Added 2 missing commands listed in readme
    • Added missing existing commands in readme
    • Fixed 'typeof' command (spelled tpyeof)

    Version 1.0

    Initial release