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

| Trigger | Content | | -------: | ------- | | rcc | class component default export skeleton | | rmcc | MobX observer class component default export skeleton | | rmicc | MobX inject and observer class component default export skeleton | | rtscc | TypeScript class component default export skeleton | | rtsmcc | TypeScript MobX observer class component default export skeleton | | rtsmicc | TypeScript MobX inject and observer class component default export skeleton | | | ----------------------------------------------------------------------------------------------- | rjcc | class component skeleton without import of default export | | rmjcc | MobX observer class component skeleton without import or default export | | rmijcc | MobX inject and observer class component skeleton without import or default export | | rtsjcc | TypeScript class component skeleton without import of default export | | rtsmjcc | TypeScript MobX observer class component skeleton without import or default export | | rtsmijcc| TypeScript MobX inject and observer class component skeleton without import or default export | | | ----------------------------------------------------------------------------------------------- | rsc | inline SFC default export skeleton | | rmsc | MobX inline SFC default export skeleton | | | ----------------------------------------------------------------------------------------------- | rjsc | inline SFC without import or export | | rmjsc | MobX inline SFC without import or export | | | ----------------------------------------------------------------------------------------------- | rscb | SFC with braces default export skeleton | | rmscb | MobX SFC with braces with default export skeleton | | | ----------------------------------------------------------------------------------------------- | rjscb | SFC with braces without import or export | | rmjscb | MobX SFC without import or export | | | ----------------------------------------------------------------------------------------------- | rcfc | class component skeleton that contains all the lifecycle methods | | ctor | class default constructor with props| | cwm | componentWillMount method | | cdm | componentDidMount method | | cwr | componentWillReceiveProps method | | scu | shouldComponentUpdate method | | cwup | componentWillUpdate method | | cdup | componentDidUpdate method | | cwun | componentWillUnmount method | | ren | render method | | sst | this.setState with object as parameter | | sstf | this.setState with inline function as parameter | | sstff | this.setState with function as parameter | | danger | dangerouslySetInnerHtml template|

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

| Trigger | Content | | -------: | ------- | | mobimp | Basic MobX imports | | mobimpf | Full MobX imports | | mobactp | MobX action property | | mobactm | MobX action method | | mobobs | MobX observable property | | mobcom | MobX computed property |

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 |; }