React Snippets in VS Code

I love finding out about nice shortcuts which make repeatable tasks quicker which is why I'm so happy to have found this VS Code extension.

The VS Code ES7 React/Redux/React-Native/JS snippets extension is super powerful; it quickly and intuitively writes out snippets with just a taps on the keyboard. The list of options is exhaustive (in a good way!), so I'll just share the couple I'm finding most useful at the moment.

rce will create a React Component using the filename as the classname

import React, { Component } from 'react'

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

export default $1

rpce will create a Pure Component with PropTypes imported and scaffolded in the class.

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

And last, imd creates the destructuring import syntax of a module...something I reach for a lot.

import { destructuredModule } from 'module'

Like I said, they have a ton of methods available, but these three are usually the ones I reach for most often!