VS Code React Snippets

This extension contains code snippets for React with Typescript and Generate React Component.

Code generation

Usage

Configuration

Snippets

Supported extensions

• TypeScript (.ts)
• TypeScript React (.tsx)

Trigger	Content
isc	import styled-components
sc	define a styled component
scc	extends a styled component
scp	Use props inside styled-component
icm	import a css module
ss	use css module
icn	import classnames

isc

import styled from 'styled-components';

sc

const $1 = styled.$2`
    $3
`;

scc

const $1 = styled($2)`
    $3
`;

scp

${props => props.$1};

icm

import styles from './index.less';

ss

className = { styles };

icn

import classNames from 'classnames';

Trigger	Content
ust	React useState() hook
uef	React useEffect() hook
urf	React useRef() hook
sl	define a selector
usl	use selector
udp	useDispatch
rcc	define a class component
rfc	define a function component
cwm	componentWillMount
cdm	componentDidMount
cwr	componentWillReceiveProps
scu	shouldComponentUpdate
cwup	componentWillUpdate
cdup	componentDidUpdate
cwun	componentWillUnmount
sst	setState use object
ssf	setState use function
slice	Create a slice by @reduxjs/toolkit
mobx	Create a Mobx Store

ust

const [$1, set$1] = useState($2);

uef

useEffect(() => {
    $1;
});

urf

const $1 = useRef($2);

sl

export const select$2 = (state: RootState) => state$1;

usl

const $1 = useSelector((state: RootState) => state.$1);

udp

const dispatch = useDispatch();

rcc

import React, { PureComponent } from 'react';

type DemoProps = {};

type DemoState = Readonly<{}>;

class Demo extends PureComponent<DemoProps, DemoState> {
    readonly state: DemoState = {};

    render() {
        return <div>I am Demo</div>;
    }
}

export default Demo;

rfc

import React, { FC } from 'react';

type DemoProps = {};

const Demo: FC<DemoProps> = (props) => {
    return <div>I am Demo</div>;
};

export default Demo;

cwm

componentWillMount() {
    $1
}

cdm

componentDidMount() {
    $1
}

cwr

componentWillReceiveProps(nextProps: Props) {
    $1
}

scu

shouldComponentUpdate(nextProps: Props, nextState: State) {
    $1
}

cwup

componentWillUpdate(nextProps: Props, nextState: State) {
    $1
}

cwun

componentWillUnmount() {
    $1
}

sst

this.setState({ $1 });

ssf

this.setState((state, props) => {
    return { $1 };
});

slice

import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';

import { RootState } from './rootReducer';

export const initialState = {
    value: 0,
};

export const changeCountAsync = createAsyncThunk('counter/changeCountAsync', async (count: number) => {
    await new Promise((resolve) => {
        setTimeout(resolve, 3000);
    });
    return count;
});

const counter = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        changeCount(state, action: PayloadAction<number>) {
            switch (true) {
                case action.payload > 0:
                    state.value++;
                    break;
                case action.payload < 0:
                    state.value--;
                    break;
                default:
            }
        },
    },
    extraReducers: (builder) => {
        builder.addCase(changeCountAsync.fulfilled, (state, action) => {
            state.value += action.payload;
        });
    },
});

export const { changeCount } = counter.actions;
export const selectCount = (state: RootState) => state.counter.value;
export default counter.reducer;

mobx

import { makeAutoObservable } from 'mobx';

class Counter {
    constructor() {
        makeAutoObservable(this);
    }

    count = 1;

    increment() {
        this.count += 1;
    }

    decrement() {
        this.count -= 1;
    }
}

export default Counter;

Trigger	Content
req	Require a package to const
mde	Module exports from Common JS, node syntax at ES6
sti	setInterval
sto	setTimeout
prom	Creates and returns a new Promise in the standard ES6 syntax
thenc	Add the .then and .catch methods to handle promises
cer	console.error()
clg	console.log()
cwa	console.warn()
cin	console.info()
cti	console.time()
cte	console.timeEnd()

req

const packageName = require('packageName');

mde

module.exports = {
    $1,
};

sti

setInterval(() => {
    $1;
}, intervalInms);

sto

setTimeout(() => {
    $1;
}, delayInms);

prom

return new Promise((resolve, reject) => {
    $1;
});

thenc

.then((result) => {
    $1
}).catch((err) => {
    $2
});

cer

console.error(object);

clg

console.log(object);

cwa

console.warn(object);

cin

console.info(object);

cti

console.time(object);

cte

console.timeEnd(object);