用VS code让你更加快速书写ES7和react

都9021年了我也早早的从Sublime切换到了VS code，最近一直想写一篇如何通过VS code让自己更快速地写出react和JS的代码。

今天就整理一下这些高频的快捷键让大家方便使用。

首先安装这个插件

官方地址

image.png

接下来就可以看到我们可以使用很多快捷键，这里我就列举几个最高频的快捷键。

引入module

imp

import moduleName from 'module'

导出

exp

export default moduleName

for of

fof

for(let itemName of objectName { }

箭头函数

nfn

const functionName = (params) => { }

Promise

prom

return new Promise((resolve, reject) => { }

props

const { } = this.props

state

const { } = this.state

import React和component

imrc

import React, { Component } from 'react'

import React Dom

imrd

import ReactDOM from 'react-dom'

import react 和 proptyeps

imrcp

import React, { Component } from 'react' & import PropTypes from 'prop-types'

import 路由

imrr

imrr

import redux

redux

import { connect } from 'react-redux'

render

ren

render() { return( ) }

set state

sst

this.setState({ })

bind

bnd

this.methodName = this.methodName.bind(this)

带class

rcc

import React, { Component } from 'react'

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

带class 带 proptypes

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

不使用class用function

rfcp

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

function $1(props) {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

带redux

rcredux

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)

带redux props 和 state

reduxmap

const mapStateToProps = state => ({})

const mapDispatchToProps = {}