dsznajder/vscode-react-javascript-snippets Public

Code Issues 5 Pull requests Actions Security Insights

5c68701f8d
vscode-react-javascript-snippets / docs / Snippets.md
dsznajder fix: initial hooks for prettier, generated with standard History
1 contributor

Snippets
Snippets info
Every space inside { } and ( ) means that this is pushed into next line :) $ represent each
step after tab .
TypeScript has own components and own snippets. Use search or just type ts before every
component snippet.
I.E. tsrcc

React Hooks
Hooks from official docs are added with hook name as prefix.
Basic Methods
Prefix Method
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'

 Prefix
exp→
Method
export default moduleName

exd→ export { destructuredModule } from 'module'

exa→ export { originalName as aliasName} from 'module'

enf→ export const functionName = (params) => { }

edf→ export default (params) => { }

ednf→ export default function functionName(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

734 lines (554 sloc) 17.4 KB
cs→ const { } = this.state

React
Prefix Method
imr→ import React from 'react'

imrd→ import ReactDOM from 'react-dom'

imrc→ import React, { Component } from 'react'

imrpc→ import React, { PureComponent } from 'react'

imrm→ import React, { memo } from 'react'

import { BrowserRouter as Router, Route, NavLink} from 'react-

imrr→
 Prefix router-dom'
Method
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'

est→ this.state = { }

cdm→ componentDidMount = () => { }

scu→ shouldComponentUpdate = (nextProps, nextState) => { }

cdup→ componentDidUpdate = (prevProps, prevState) => { }

cwun→ componentWillUnmount = () => { }

gdsfp→ static getDerivedStateFromProps(nextProps, prevState) { }

gsbu→ getSnapshotBeforeUpdate = (prevProps, prevState) => { }

sst→ this.setState({ })

ssf→ this.setState((state, props) => return { })

props→ this.props.propName

state→ this.state.stateName

rcontext→ const $1 = React.createContext()

cref→ this.$1Ref = React.createRef()

fref→ const ref = React.createRef()

bnd→ this.methodName = this.methodName.bind(this)

React Native
Prefix Method
imrn→ import { $1 } from 'react-native'

rnstyle→ const styles = StyleSheet.create({})

Redux
Prefix Method
rxaction→ redux action template

rxconst→ export const $1 = '$1'

rxreducer→ redux reducer template

rxselect→ redux selector template

rxslice→ redux slice template

PropTypes
Prefix Method
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])
 Prefix Method
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 = {}

Console
Prefix Method
clg→ console.log(object)

clo→ console.log(`object`, object)

clj→ console.log(`object`, JSON.stringify(object, null, 2))

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
 Prefix
cin→ console.info Method
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

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 } from '../$1'

describe('<$1 />', () => {

const defaultProps = {}
const wrapper = renderer.create(<$1 {...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 } from '../$1'

describe('<$1 />', () => {

const defaultProps = {}
const wrapper = renderer.create(
<Provider store={store}>
<$1 {...defaultProps} />)
</Provider>,
)

test('render', () => {
expect(wrapper).toMatchSnapshot()
})
})
sntest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import $1 from '../$1'

describe('<$1 />', () => {

const defaultProps = {}

const wrapper = renderer.create(<$1 {...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 from '../$1'

describe('<$1 />', () => {

const defaultProps = {}
const wrapper = renderer.create(
<Provider store={store}>
<$1 {...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 = (WrappedComponent) => {
const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

hocComponent.propTypes = {}

return hocComponent
}

export default (WrapperComponent) =>

connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent))

hoc

import React from 'react'

import PropTypes from 'prop-types'

export default (WrappedComponent) => {

const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

hocComponent.propTypes = {}

return hocComponent
}