forked fromr5n-labs/vscode-react-javascript-snippets
- Notifications
You must be signed in to change notification settings - Fork0
Extension for Javascript/React snippets with search supporting ES7 and babel features
License
NotificationsYou must be signed in to change notification settings
DevMoshko/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
LaunchQuick Open:
Paste the following command and pressEnter:
ext install dsznajder.es7-react-js-snippets
Change to your.vscode/extensionsVS Code extensions directory.Depending on your platform it is located in the following folders:
- Linux:
~/.vscode/extensions - macOS:
~/.vscode/extensions - Windows:
%USERPROFILE%\.vscode\extensions
Clone the Material Theme repository asdsznajder.es7-react-js-snippets:
git clone https://github.com/dsznajder/vscode-es7-javascript-react-snippets.git dsznajder.es7-react-js-snippets
It is possible to use this package in your vim/neovim text editor, to make this possible, make sure you have thecoc.nvim previously configured, then add this command to yourinit.vim
Plug'dsznajder/vscode-es7-javascript-react-snippets', {'do':'yarn install --frozen-lockfile && yarn compile' }
Update your vim / neovim settings with:source % and then install the new package with:PlugInstall
Note: This example usesvim-plug as a package manager, feel free to use some other
You can search through snippets withES7 snippet search command which can be run withCMD + Shift + P or just useCMD + Shift + R (CTRL + ALT + R for Windows & Linux) keybinding.
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.
TypeScript has own components and own snippets. Use search or just typets before every component snippet.
I.E.tsrcc
| 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' |
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) |
- All hooks fromofficial docs are added with hook name prefix.
| 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 = {} |
| Prefix | Method |
|---|---|
graphql→ | import { compose, graphql } from react-apollo' |
expgql-> | export default compose(graphql($1, { name: $2 }))($3) |
| Prefix | Method |
|---|---|
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 |
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'exportconst$1=()=>{return<div>$0</div>}
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'import{connect}from'react-redux'exportclassFileNameextendsComponent{render(){return<div>$4</div>}}constmapStateToProps=(state)=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(FileName)
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)
importReact,{Component}from'react'import{connect}from'react-redux'exportconstFileName=()=>{return<div>$4</div>}constmapStateToProps=(state)=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(FileName)
importReact,{Component}from'react'importPropTypesfrom'prop-types'import{connect}from'react-redux'exportconstFileName=()=>{return<div>$4</div>}FileName.propTypes={$2:$3,}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>)}}
importReactfrom'react'import{View,Text}from'react-native'exportdefaultfunction$1(){return(<View><Text> $2</Text></View>)}
importReactfrom'react'import{StyleSheet,View,Text}from'react-native'exportdefaultfunction$1(){return(<View><Text> $2</Text></View>)}conststyles=StyleSheet.create({})
importReactfrom'react'import{View,Text}from'react-native'const$1=()=>{return(<View><Text> $2</Text></View>)}exportdefault$1
importReactfrom'react'import{StyleSheet,View,Text}from'react-native'const$1=()=>{return(<View><Text> $2</Text></View>)}exportdefault$1conststyles=StyleSheet.create({})
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'exportdefault(WrappedComponent)=>{consthocComponent=({ ...props})=><WrappedComponent{...props}/>hocComponent.propTypes={}returnhocComponent}
About
Extension for Javascript/React snippets with search 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
Languages
- TypeScript100.0%