Megasu/vscode-es7-javascript-react-snippetsPublic

forked fromr5n-labs/vscode-react-javascript-snippets

NotificationsYou must be signed in to change notification settings
Fork0
Star0

Extension for Javascript/React snippets with search supporting ES7 and babel features

License

MIT license

0 stars 444 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 185 Commits
.vscode		.vscode
extension		extension
images		images
snippets		snippets
.gitignore		.gitignore
.vscodeignore		.vscodeignore
CHANGELOG.md		CHANGELOG.md
LICENCE		LICENCE
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

VS Code ES7 React/Redux/React-Native/JS snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features forVS Code

Installation

Visual Studio Marketplace

LaunchQuick Open:

Linux:Ctrl+P
macOS:⌘P
Windows:Ctrl+P

Paste the following command and pressEnter:

ext install dsznajder.es7-react-js-snippets

Sponsors

Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

Conquer of Completion

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

Search command

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

Supported languages (file extensions)

JavaScript (.js)
JavaScript React (.jsx)
TypeScript (.ts)
TypeScript React (.tsx)

Snippets info

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

React 17 is currently supported by_ 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'`
`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) => { }`
`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`
`cs→`	`const { } = this.state`

React

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)`

React Hooks

All hooks fromofficial docs are added with hook name prefix.

Prefix	Method
`rch→`	`import { $1 } from 'react-native'`

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])`
`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

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

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

React Components

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

`rcc`

importReact,{Component}from'react'exportdefaultclassFileNameextendsComponent{render(){return<div>$2</div>}}

`rce`

importReact,{Component}from'react'exportclassFileNameextendsComponent{render(){return<div>$2</div>}}exportdefault$1

`rcep`

importReact,{Component}from'react'importPropTypesfrom'prop-types'exportclassFileNameextendsComponent{staticpropTypes={}render(){return<div>$2</div>}}exportdefault$1

`rpc`

importReact,{PureComponent}from'react'exportdefaultclassFileNameextendsPureComponent{render(){return<div>$2</div>}}

`rpcp`

importReact,{PureComponent}from'react'importPropTypesfrom'prop-types'exportdefaultclassFileNameextendsPureComponent{staticpropTypes={}render(){return<div>$2</div>}}

`rpce`

importReact,{PureComponent}from'react'importPropTypesfrom'prop-types'exportclassFileNameextendsPureComponent{staticpropTypes={}render(){return<div>$2</div>}}exportdefaultFileName

`rccp`

importReact,{Component}from'react'importPropTypesfrom'prop-types'exportdefaultclassFileNameextendsComponent{staticpropTypes={$2:$3,}render(){return<div>$4</div>}}

`rfcp`

importReactfrom'react'importPropTypesfrom'prop-types'function$1(props){return<div>$0</div>}$1.propTypes={}exportdefault$1

`rfc`

importReactfrom'react'exportdefaultfunction$1(){return<div>$0</div>}

`rfce`

importReactfrom'react'function$1(){return<div>$0</div>}exportdefault$1

`rafcp`

importReactfrom'react'importPropTypesfrom'prop-types'const$1=(props)=>{return<div>$0</div>}$1.propTypes={}exportdefault$1

`rafc`

importReactfrom'react'exportconst$1=()=>{return<div>$0</div>}

`rafce`

importReactfrom'react'const$1=()=>{return<div>$0</div>}exportdefault$1

`rmc`

importReact,{memo}from'react'exportdefaultmemo(function$1(){return<div>$0</div>})

`rmcp`

importReact,{memo}from'react'importPropTypesfrom'prop-types'const$1=memo(function$1(props){return<div>$0</div>})$1.propTypes={}exportdefault$1

`rcredux`

importReact,{Component}from'react'import{connect}from'react-redux'exportclassFileNameextendsComponent{render(){return<div>$4</div>}}constmapStateToProps=(state)=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(FileName)

`rcreduxp`

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)

`rfcredux`

importReact,{Component}from'react'import{connect}from'react-redux'exportconstFileName=()=>{return<div>$4</div>}constmapStateToProps=(state)=>({})constmapDispatchToProps={}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(FileName)

`rfreduxp`

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)

`reduxmap`

constmapStateToProps=(state)=>({})constmapDispatchToProps={}

React Native Components

`rnc`

importReact,{Component}from'react'import{Text,View}from'react-native'exportdefaultclassFileNameextendsComponent{render(){return(<View><Text> $2</Text></View>)}}

`rnf`

importReactfrom'react'import{View,Text}from'react-native'exportdefaultfunction$1(){return(<View><Text> $2</Text></View>)}

`rnfs`

importReactfrom'react'import{StyleSheet,View,Text}from'react-native'exportdefaultfunction$1(){return(<View><Text> $2</Text></View>)}conststyles=StyleSheet.create({})

`rnfe`

importReactfrom'react'import{View,Text}from'react-native'const$1=()=>{return(<View><Text> $2</Text></View>)}exportdefault$1

`rnfes`

importReactfrom'react'import{StyleSheet,View,Text}from'react-native'const$1=()=>{return(<View><Text> $2</Text></View>)}exportdefault$1conststyles=StyleSheet.create({})

`rncs`

importReact,{Component}from'react'import{Text,StyleSheet,View}from'react-native'exportdefaultclassFileNameextendsComponent{render(){return(<View><Text> $2</Text></View>)}}conststyles=StyleSheet.create({})

`rnce`

importReact,{Component}from'react'import{Text,View}from'react-native'exportclassFileNameextendsComponent{render(){return(<View><Text> $2</Text></View>)}}exportdefault$1

`rncredux`

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)

Others

`cmmb`

/**|--------------------------------------------------| $1|--------------------------------------------------*/

`desc`

describe('$1',()=>{$2})

`test`

test('should $1',()=>{$2})

`tit`

it('should $1',()=>{$2})

`stest`

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()})})

`srtest`

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()})})

`sntest`

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()})})

`snrtest`

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()})})

`hocredux`

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))

`hoc`

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

Releases

No releases published

Packages

No packages published

Languages

TypeScript100.0%

Movatterモバイル変換

License

Megasu/vscode-es7-javascript-react-snippets

Folders and files

Latest commit

History

Repository files navigation

VS Code ES7 React/Redux/React-Native/JS snippets

Installation

Visual Studio Marketplace

Sponsors

Conquer of Completion

Search command

Supported languages (file extensions)

Snippets info

Basic Methods

React

React Hooks

React Native

Redux

PropTypes

GraphQL

Console

React Components

Note for React 17 use_ prefix. Currently workaround for future options.

rcc

rce

rcep

rpc

rpcp

rpce

rccp

rfcp

rfc

rfce

rafcp

rafc

rafce

rmc

rmcp

rcredux

rcreduxp

rfcredux

rfreduxp

reduxmap

React Native Components

rnc

rnf

rnfs

rnfe

rnfes

rncs

rnce

rncredux

Others

cmmb

desc

test

tit

stest

srtest

sntest

snrtest

hocredux

hoc

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages0

Languages

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

`rcc`

`rce`

`rcep`

`rpc`

`rpcp`

`rpce`

`rccp`

`rfcp`

`rfc`

`rfce`

`rafcp`

`rafc`

`rafce`

`rmc`

`rmcp`

`rcredux`

`rcreduxp`

`rfcredux`

`rfreduxp`

`reduxmap`

`rnc`

`rnf`

`rnfs`

`rnfe`

`rnfes`

`rncs`

`rnce`

`rncredux`

`cmmb`

`desc`

`test`

`tit`

`stest`

`srtest`

`sntest`

`snrtest`

`hocredux`

`hoc`

Packages