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