Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

Pocket-titan/vscode-es7-javascript-react-snippets

 
 

Repository files navigation

VersionInstallDownloadsRatings

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features forVS Code

Search command

You can search through snippets withES7 snippet search command which can be run withCMD + Shift + P or just useCMD + Shift + R 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.

Basic Methods

PrefixMethod
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

React

PrefixMethod
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, Link } from 'react-router-dom'
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

React Native

PrefixMethod
imrn→import { $1 } from 'react-native'
rnstyle→const styles = StyleSheet.create({})

Redux

PrefixMethod
rxaction→redux action template
rxconst→export const $1 = '$1'
rxreducer→redux reducer template
rxselect→redux selector template

PropTypes

PrefixMethod
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

|graphql→|import { compose, graphql } from 'react-apollo'|

expgql

export default compose(graphql($1, { name: $2 }))($3)

Console

PrefixMethod
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

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'const $1 = () => {  return <div>$0</div>}export default $1

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

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'const $1 = () => {  return (    <View>      <Text> $2 </Text>    </View>  )}export default $1

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

rncredux

import React, { Component } from 'react'import { View, Text } from 'react-native'import PropTypes from 'prop-types'import { connect } from 'react-redux'export class FileName extends Component {  static propTypes = {    $2: $3,  }  render() {    return (      <View>        <Text> $2 </Text>      </View>    )  }}const mapStateToProps = state => ({})const mapDispatchToProps = {}export default connect(  mapStateToProps,  mapDispatchToProps,)(FileName)

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:ComponentName} } from '../${1:ComponentName}'describe('<${1:ComponentName} />', () => {  const defaultProps = {}  const wrapper = renderer.create(<${1:ComponentName} {...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:ComponentName} } from '../${1:ComponentName}'describe('<${1:ComponentName} />', () => {  const defaultProps = {}  const wrapper = renderer.create(    <Provider store={store}>      <${1:${TM_FILENAME_BASE}} {...defaultProps} />)    </Provider>,  )  test('render', () => {    expect(wrapper).toMatchSnapshot()  })})

sntest

import 'react-native'import React from 'react'import renderer from 'react-test-renderer'import ${1:ComponentName} from '../${1:ComponentName}'describe('<${1:ComponentName} />', () => {  const defaultProps = {  }  const wrapper = renderer.create(<${1:ComponentName} {...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:ComponentName} from '../${1:ComponentName}'describe('<${1:ComponentName} />', () => {  const defaultProps = {}  const wrapper = renderer.create(    <Provider store={store}>      <${1:ComponentName} {...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:hocComponentName} = (WrappedComponent) => {  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />  hocComponent.propTypes = {  }  return hocComponent}export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

hoc

import React from 'react'import PropTypes from 'prop-types'export default WrappedComponent => {  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />  hocComponent.propTypes = {}  return hocComponent}

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript100.0%
[8]ページ先頭
©2009-2025 Movatter.jp