Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>mobx-snipNew to Visual Studio Code? Get it now.

mobx-snip

lltest

|
1,189 installs
| (0) | Free
snip of mobx
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

vscode-snippets-mobx-react README

create code snippets at mobx react now it can support rematch!

normal

Prefix Method
imp→ import moduleName from 'module'
imn→ import 'module'
imd→ import { destructuredModule } from 'module'
exp→ export default moduleName
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 { }
sti→ setInterval(() => { }, intervalTime
sto→ setTimeout(() => { }, delayTime
prom→ return new Promise((resolve, reject) => { }
cp→ const { } = this.props
cs→ const { } = this.state

React

Prefix Method
est→ this.state = { }
cwm→ componentWillMount = () => { } DEPRECATED!!!
cdm→ componentDidMount = () => { }
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

rmcp

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import PropTypes from 'prop-types'

@inject('store')
@observer
export default class Add extends Component {
  static propTypes = {
  }
  render() {
    return <div></div>
  }
}

rmsc

import { observable, action, configure, runInAction } from 'mobx'

configure({ enforceActions: true })

export default class A {
  @observable
  name = ''

  @action
  async functionName (params) {
    runInAction(() => {
    })
  }
}

rmcpf

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { observer, inject } from 'mobx-react'

@inject('store')
@observer
export default class $1 extends Component {
  static propTypes = {
  }
  render() {
    return (
      <Fragment>
      </Fragment>
    )
  }
}

rcws

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Style from './index.less'

export default class $0 extends Component {
  static propTypes = {
  }
  constructor() {
    super()
    Style.use()
  }

  componentWillUnmount () {
    Style.unuse()
  }
  render() {
    return (
      <>
      </>
    )
  }
}

rpsr

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { createContainer } from 'utils/hoc'

class $1 extends Component {
  static propTypes = {
    actions: PropTypes.object.isRequired,
  }
  state = {}
  constructor (props) {
    super(props)
    //this.props.actions.get()
  }
  
  render () {
    return (
      <>
        <div />
      </>
    )
  }
}

const mapState = state => ({
  error: state.common.error,
})

const mapDispatch = dispatch => ({
  actions: {
    // createDataTrack: dispatch.common.createDataTrack,
    get: dispatch.idx.get,
  },
})

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )($1)
)

Enjoy!

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft