rafc, rafce, rafcp ~Reactの雛形を作ってくれるエイリアス~

概要

VS Codeやその他のエディタで使用できるReactコンポーネントの雛形を生成するスニペットエイリアスです。

各エイリアスの違い

rafc - React Arrow Function Component

import React from 'react'

const ComponentName = () => {
  return (
    <div>ComponentName</div>
  )
}

export default ComponentName

rafce - React Arrow Function Component Export

import React from 'react'

const ComponentName = () => {
  return (
    <div>ComponentName</div>
  )
}

export default ComponentName

• rafcと同じだが、明示的にexport defaultを含む

rafcp - React Arrow Function Component with PropTypes

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

const ComponentName = props => {
  return (
    <div>ComponentName</div>
  )
}

ComponentName.propTypes = {

}

export default ComponentName

その他の関連エイリアス

rfc - React Function Component

import React from 'react'

function ComponentName() {
  return (
    <div>ComponentName</div>
  )
}

export default ComponentName

rcc - React Class Component

import React, { Component } from 'react'

export default class ComponentName extends Component {
  render() {
    return (
      <div>ComponentName</div>
    )
  }
}

使用方法

1. ファイル内でエイリアスを入力
2. TabキーまたはEnterキーを押す
3. コンポーネント名を入力
4. 自動的に雛形が生成される

設定

これらのスニペットは通常、以下の拡張機能で提供されます：

• ES7+ React/Redux/React-Native snippets
• React Snippets
• JavaScript (ES6) code snippets