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
SeanGroff/vscode-es7-javascript-react-snippets
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features forVS Code
Here is direct link to marketplaceES7 React/Redux/React-Native/JS Snippets
- JavaScript (.js)
- JavaScript React (.jsx)
- TypeScript (.ts)
- TypeScript React (.tsx)
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 |
cp→ | const { } = this.props |
cs→ | const { } = this.state |
| Prefix | Method |
|---|---|
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' |
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) |
| 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'exportdefaultclassFileNameextendsComponent{render(){return<div>$2</div>}}
importReact,{Component}from'react'exportclassFileNameextendsComponent{render(){return<div>$2</div>}}exportdefault$1
importReact,{Component}from'react'importPropTypesfrom'prop-types'exportclassFileNameextendsComponent{staticpropTypes={}render(){return<div>$2</div>}}exportdefault$1
importReact,{PureComponent}from'react'exportdefaultclassFileNameextendsPureComponent{render(){return<div>$2</div>}}
importReact,{PureComponent}from'react'importPropTypesfrom'prop-types'exportdefaultclassFileNameextendsPureComponent{staticpropTypes={}render(){return<div>$2</div>}}
importReact,{PureComponent}from'react'importPropTypesfrom'prop-types'exportclassFileNameextendsPureComponent{staticpropTypes={}render(){return<div>$2</div>}}exportdefaultFileName
importReact,{Component}from'react'importPropTypesfrom'prop-types'exportdefaultclassFileNameextendsComponent{staticpropTypes={$2:$3,}render(){return<div>$4</div>}}
importReactfrom'react'importPropTypesfrom'prop-types'function$1(props){return<div>$0</div>}$1.propTypes={}exportdefault$1
importReactfrom'react'exportdefaultfunction$1(){return<div>$0</div>}
importReactfrom'react'function$1(){return<div>$0</div>}exportdefault$1
importReactfrom'react'importPropTypesfrom'prop-types'const$1=props=>{return<div>$0</div>}$1.propTypes={}exportdefault$1
importReactfrom'react'const$1=()=>{return<div>$0</div>}exportdefault$1
importReactfrom'react'const$1=()=>{return<div>$0</div>}exportdefault$1
importReact,{memo}from'react'exportdefaultmemo(function$1(){return<div>$0</div>})
importReact,{memo}from'react'importPropTypesfrom'prop-types'const$1=memo(function$1(props){return<div>$0</div>})$1.propTypes={}exportdefault$1
importReact,{Component}from'react'importPropTypesfrom'prop-types'import{connect}from'react-redux'exportclassFileNameextendsComponent{staticpropTypes={$2:$3,}render(){return<div>$4</div>}}constmapStateToProps=state=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps,)(FileName)
constmapStateToProps=state=>({})constmapDispatchToProps={}
importReact,{Component}from'react'import{Text,View}from'react-native'exportdefaultclassFileNameextendsComponent{render(){return(<View><Text> $2</Text></View>)}}
importReact,{Component}from'react'import{Text,StyleSheet,View}from'react-native'exportdefaultclassFileNameextendsComponent{render(){return(<View><Text> $2</Text></View>)}}conststyles=StyleSheet.create({})
importReact,{Component}from'react'import{Text,View}from'react-native'exportclassFileNameextendsComponent{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'exportclassFileNameextendsComponent{staticpropTypes={$2:$3,}render(){return(<View><Text> $2</Text></View>)}}constmapStateToProps=state=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps,)(FileName)
/**|--------------------------------------------------| $1|--------------------------------------------------*/
describe('$1',()=>{$2})
test('should $1',()=>{$2})
it('should $1',()=>{$2})
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()})})
importReactfrom'react'importrendererfrom'react-test-renderer'import{Provider}from'react-redux'importstorefrom'src/store'import{${1:ComponentName}}from'../${1:ComponentName}'describe('<${1:ComponentName} />',()=>{constdefaultProps={}constwrapper=renderer.create(<Providerstore={store}><${1:${TM_FILENAME_BASE}}{...defaultProps}/>)</Provider>,)test('render',()=>{expect(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