forked fromr5n-labs/vscode-react-javascript-snippets
- Notifications
You must be signed in to change notification settings - Fork0
Snippets for Javascript/React supporting ES7 and babel features
License
NotificationsYou must be signed in to change notification settings
crper/vscode-es7-javascript-react-snippets
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This extension provide you Javascript and React/Redux snippets in ES7 with babel plugins features forVs Code
Here is direct link to marketplaceES7 React/Redux/React-Native/JS Snippets
- JavaScript (.js)
- JavaScript React (.jsx)
Every space inside{ } and( ) means that this is pushed into next line :)$ represent each step aftertab.
| 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' |
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 |
| Prefix | Method |
|---|---|
imr→ | import React from 'react' |
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' |
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 = () => { } |
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) |
| Prefix | Method |
|---|---|
imrn→ | import { $1 } from 'react-native' |
rnstyle→ | const styles = StyleSheet.create({}) |
| Prefix | Method |
|---|---|
rxaction→ | redux action template |
rxconst→ | export const $1 = '$1' |
rxreducer→ | redux reducer template |
rxselect→ | redux selector template |
| 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]) |
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→|import { compose, graphql } from 'react-apollo'|
exportdefaultcompose(graphql($1,{name:$2}))($3)
| Prefix | Method |
|---|---|
clg→ | console.log(object) |
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 |
importReact,{Component}from'react'exportdefaultclass$1extendsComponent{render(){return<div>$2</div>}}
importReact,{Component}from'react'exportclass$1extendsComponent{render(){return<div>$2</div>}}exportdefault$1
importReact,{Component}from'react'importPropTypesfrom'prop-types'exportclass$1extendsComponent{staticpropTypes={}render(){return<div>$2</div>}}exportdefault$1
importReact,{PureComponent}from'react'exportdefaultclass$1extendsPureComponent{render(){return<div>$2</div>}}
importReact,{PureComponent}from'react'importPropTypesfrom'prop-types'exportdefaultclass$1extendsPureComponent{staticpropTypes={}render(){return<div>$2</div>}}
importReact,{Component}from'react'importPropTypesfrom'prop-types'exportdefaultclass$1extendsComponent{staticpropTypes={$2:$3,}render(){return<div>$4</div>}}
importReactfrom'react'const$1=props=>{return<div>$0</div>}exportdefault$1
importReactfrom'react'importPropTypesfrom'prop-types'const$1=props=>{return<div>$0</div>}$1.propTypes={}exportdefault$1
importReactfrom'react'exportdefault()=>{return<div>$0</div>}
importReactfrom'react'importPropTypesfrom'prop-types'exportdefault()=>{return<div>$0</div>}$1.propTypes={}
importReact,{Component}from'react'importPropTypesfrom'prop-types'import{connect}from'react-redux'exportclass$1extendsComponent{staticpropTypes={$2:$3,}render(){return<div>$4</div>}}constmapStateToProps=state=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps)($1)
constmapStateToProps=state=>({})constmapDispatchToProps={}
importReact,{Component}from'react'import{Text,View}from'react-native'exportdefaultclass$1extendsComponent{render(){return(<View><Text> $2</Text></View>)}}
importReact,{Component}from'react'import{Text,StyleSheet,View}from'react-native'exportdefaultclass$1extendsComponent{render(){return(<View><Text> $2</Text></View>)}}conststyles=StyleSheet.create({})
importReact,{Component}from'react'import{Text,View}from'react-native'exportclass$1extendsComponent{render(){return(<View><Text> $2</Text></View>)}}exportdefault$1
importReact,{Component}from'react'import{View,Text}from'react-native'importPropTypesfrom'prop-types'import{connect}from'react-redux'exportclass$1extendsComponent{staticpropTypes={$2:$3,}render(){return(<View><Text> $2</Text></View>)}}constmapStateToProps=state=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps)($1)
/**|--------------------------------------------------| $1|--------------------------------------------------*/
describe('$1',()=>{$2})
test('should $1',()=>{$2})
it('should $1',()=>{$2})
import{${1:ComponentName},mapStateToProps,mapDispatchToProps}from'${2:path}/${1:ComponentName}'describe('<${1:ComponentName} />',()=>{constdefaultProps={}constsetup=buildSetup(${1:ComponentName},defaultProps)test('render',()=>{expect(setup().wrapper).toMatchSnapshot()})})
importtoJsonfrom'enzyme-to-json'import{${1:ComponentName}},mapStateToProps,mapDispatchToProps}from'${2:path}/${1:ComponentName}'describe('<${1:ComponentName} />',()=>{constdefaultProps={}constsetup=buildSetup(${1:ComponentName},defaultProps)test('render',()=>{expect(toJson(setup().wrapper)).toMatchSnapshot()})})
import'react-native'importReactfrom'react'importrendererfrom'react-test-renderer'import${1:ComponentName}from'../${1:ComponentName}'describe('<${1:ComponentName} />',()=>{constdefaultProps={}constwrapper=renderer.create(<${1:ComponentName}{...defaultProps}/>)test('render',()=>{expect(wrapper).toMatchSnapshot()})})
import'react-native'importReactfrom'react'importrendererfrom'react-test-renderer'import{Provider}from'react-redux'importstorefrom'src/store/configureStore'import${1:ComponentName}from'../${1:ComponentName}'describe('<${1:ComponentName} />',()=>{constdefaultProps={}constwrapper=renderer.create(<Providerstore={store}><${1:ComponentName}{...defaultProps}/></Provider>,)test('render',()=>{expect(wrapper).toMatchSnapshot()})})
importReactfrom'react'importPropTypesfrom'prop-types'import{connect}from'react-redux'exportconstmapStateToProps=state=>({})exportconstmapDispatchToProps={}exportconst${1:hocComponentName}=(WrappedComponent)=>{consthocComponent=({ ...props})=><WrappedComponent{...props}/>hocComponent.propTypes={}returnhocComponent}exportdefaultWrapperComponent=>connect(mapStateToProps,mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))
importReactfrom'react'importPropTypesfrom'prop-types'exportdefaultWrappedComponent=>{consthocComponent=({ ...props})=><WrappedComponent{...props}/>hocComponent.propTypes={}returnhocComponent}
About
Snippets for Javascript/React supporting ES7 and babel features
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.