vscode-react-typescript-snippet
下载
打开vscode插件并搜索React code snippets Typescript即可。
支持文件
- TypeScript (.ts)
- TypeScript React (.tsx)
代码片段
| Trigger |
Content |
tslrcc→ |
react 类式组件 |
tslrcstate |
包含Props, State, 和 constructor的类式组件 |
tslrpcc→ |
react PureComponent组件 |
tslrpfc |
react 函数式组件 |
tsldrpfc |
拥有default export的函数式react组件 |
tslrfc |
无状态的函数式react组件 |
tslconc→ |
react constructor 方法 |
tslcwm→ |
componentWillMount 方法 |
tslren→ |
render 方法 |
tslcdm→ |
componentDidMount 方法 |
tslcwrp→ |
componentWillReceiveProps 方法 |
tslscu→ |
shouldComponentUpdate 方法 |
tslcwu→ |
componentWillUpdate 方法 |
tslcdu→ |
componentDidUpdate 方法 |
tslcwum→ |
componentWillUnmount 方法 |
tslsst→ |
this.setState生成 |
tslbnd→ |
绑定语句 |
tslmet→ |
创建一个方法 |
tslcredux→ |
创建一个类式的redux，包含connect |
tslrfredux-> |
创建一个函数式的redux，包含connect |
imt |
生成一个import语句 |
state 相关
tslrcstate
import * as React from "react";
export interface IAppProps {}
export interface IAppState {}
export default class App extends React.Component<IAppProps, IAppState> {
constructor(props: IAppProps) {
super(props);
this.state = {};
}
public render() {
return <div></div>;
}
}
functional 相关
tslrfc
import * as React from "react";
interface IAppProps {}
const App: React.FC<IAppProps> = (props) => {
return <div></div>;
};
export default App;
redux 相关
tslrcredux
import * as React from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
// you can define global interface ConnectState in @/state/connect.d
import { ConnectState } from "@/state/connect.d";
export interface IAppProps {}
export type ReduxType = ReturnType<typeof mapStateToProps> &
ReturnType<typeof mapDispatchToProps> &
IAppProps;
class App extends React.Component<ReduxType> {
public render() {
return <div></div>;
}
}
const mapStateToProps = (state: ConnectState) => {
return {};
};
const mapDispatchToProps = (dispatch: Dispatch) => {
return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
tslrfredux
import * as React from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
// you can define global interface ConnectState in @/state/connect.d
import { ConnectState } from "@/state/connect.d";
export interface IAppProps {}
export type ReduxType = ReturnType<typeof mapStateToProps> &
ReturnType<typeof mapDispatchToProps> &
IAppProps;
const App: React.FC<ReduxType> = (props) => {
return <div></div>;
};
const mapStateToProps = (state: ConnectState) => {
return {};
};
const mapDispatchToProps = (dispatch: Dispatch) => {
return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
tslrpfc
import * as React from "react";
export interface IAppProps {}
export function App(props: IAppProps) {
return <div></div>;
}
| |
