vscode中好用的react套件_加速開發

 


ES7 React/Redux/GraphQL/React-Native snippets
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets



經常使用的快捷

rfce







Basic Methods

PrefixMethod
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) => { }
cmmb→comment block
cp→const { } = this.props
cs→const { } = this.state

React

PrefixMethod
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 Hooks

PrefixMethod
rch→import { $1 } from 'react-native'

React Native

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

Redux

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

PropTypes

PrefixMethod
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

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

Console

PrefixMethod
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

Note for React 17 use _ prefix. Currently workaround for future options.

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)

Others

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

 













留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題