react-ecosystem-snippets v0.2.8

VS Code React Ecosystem Snippets

This is a fork from https://github.com/xabikos/vscode-react. My version modifies the export styles to be inline; adds more React snippets—options for inline (braceless) SFCs, more options for React skeletons without import or export statements; and adds TypeScript and MobX snippets.

Installation

In order to install this extension, just search for React Ecosystem Snippets from the extensions pane.

Snippets pattern

The class component snippets often have multiple versions, covering vanilla React; MobX; and where appropriate, TypeScript. These snippets follow the following pattern. They all start with r, followed by the rest of the command. If there are MobX versions, there will be an m or mi immediately after the r. If there's a TypeScript version, there will be a ts immediately after the r. If there's a version using both MobX and TypeScript, it'll be rtsm or rtsmi followed by the rest of the command.

For example:

rcc generates a vanilla React class component with a default export. rmcc generates the same, but with a MobX @observer decorator rmicc generates the same, but with MobX @inject and @observer decorators rtscc generates the same, but with TypeScript typings rtsmcc generates the same, but with a MobX @observer decorator, and TypeScript typings. rtsmicc generates the same, but with MobX @inject and @observer decorators, and TypeScript typings.

Of course not all of those permutations exist for all snippets; for example, there are no TypeScript versions for the SFCs.

Snippets

The following table lists the supported MobX snippets. They all begin with mob so it's easy to explore all available options.

The Generated Code

This is what the snippets above actually generate. YourComponentName and yourProps are both prompted for in the generated snippet, and | indicates where your cursor will wind up, when finished providing those values.

rcc:

import React, {Component} from 'react';

export default class YourComponentName extends Component {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rmcc:

import React, {Component} from 'react';
import {observer} from 'mobx-react';

@observer
export default class YourComponentName extends Component {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rmicc:

import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';

@inject('injectedProps')
@observer
export default class YourComponentName extends Component {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rtscc:

import React, {Component} from 'react';

export default class YourComponentName extends Component<propType, stateType> {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rtsmcc:

import React, {Component} from 'react';
import {observer} from 'mobx-react';

@observer
export default class YourComponentName extends Component<propType, stateType> {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rtsmicc:

import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';

@inject('injectedProps')
@observer
export default class YourComponentName extends Component<stateType, ${4:any}> {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rjcc:

class YourComponentName extends Component {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rmjcc:

@observer
class YourComponentName extends Component {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rmijcc:

@inject('injectedProps')
@observer
class YourComponentName extends Component {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rtsjcc:

class YourComponentName extends Component<propType, stateType> {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rtsmjcc:

@observer
class YourComponentName extends Component<propType, stateType> {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rtsmijcc:

@inject('injectedProps')
@observer
class YourComponentName extends Component<stateType, ${4:any}> {
    render() {
        return (
            <div>
                |
            </div>
        );
    }
}

rsc:

import React from 'react';

export default (yourProps) => (
    <div>
        |
    </div>
);

rmsc:

import React from 'react';
import {observer} from 'mobx-react';

export default observer((yourProps) => (
    <div>
        |
    </div>
));

rjsc:

const YourComponentName = (yourProps) => (
    <div>
        |
    </div>
);

rmjsc:

const YourComponentName = observer((yourProps) => (
    <div>
        |
    </div>
));

rscb:

import React from 'react';

export default (yourProps) => {
    return (
        <div>
            |
        </div>
    );
};

rmscb:

import React from 'react';
import {observer} from 'mobx-react';

export default observer((yourProps) => {
    return (
        <div>
            |
        </div>
    );
});

rjscb:

const YourComponentName = (yourProps) => {
    return (
        <div>
            |
        </div>
    );
};

rmjscb:

const YourComponentName = observer((yourProps) => {
    return (
        <div>
            |
        </div>
    );
});

rcfc:

import React, {Component} from 'react';

export default class YourComponentName extends Component {
    constructor(props) {
        super(props);

    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }

    render() {
        return (
            <div>

            </div>
        );
    }
}

ctor:

constructor(props) {
    super(props);
    |
}

cwm:

componentWillMount() {
    |
}

cdm:

componentDidMount() {
    |
}

cwr:

componentWillReceiveProps(nextProps) {
    |
}

scu:

shouldComponentUpdate(nextProps, nextState) {
    |
}

cwup:

componentWillUpdate(nextProps, nextState) {
    |
}

cdup:

componentDidUpdate(prevProps, prevState) {
    |
}

cwun:

componentWillUnmount() {
    |
}

ren:

render() {
    return (
        <div>
            |
        </div>
    );
}

sst:

this.setState({newState});|

sstf:

this.setState((state, props) => ({newState}));|

sstff:

this.setState((state, props) => { return {newState} });|

danger:

dangerouslySetInnerHTML={{__html: |}}

mobimp:

import {action, observable, computed} from 'mobx';

mobimpf:

import {action, observable, computed, autorun, reaction, when, observe, intercept, runInAction, untracked, extendObservable, isObservable, toJS} from 'mobx';

mobrimp:

import {observer} from 'mobx-react';

mobrimpf:

import {observer, Provider, inject} from 'mobx-react';

mobactp:

@action methodName = yourProps => |;

mobactm:

@action
methodName(yourProps) {
    |
}

mobobs:

@observable propertyName = |;

mobcom:

@computed get propertyName() { return |; }