Awesome
VSCode-Typescript-React-Redux-Snippets
Typescript, React and Redux snippets for VSCode (followed ES6 standard)
Snippets
-
_tsr : basic typescript react template
import * as React from 'react'; interface I${1:ComponentName}Props { } interface I${1:ComponentName}State { } export default class ${1:ComponentName} extends React.Component<I${1:ComponentName}Props, I${1:ComponentName}State> { public render() { return ( ${2:<span>Body</span>} ); } }
-
_tsrr : typescript react redux template
import * as React from 'react'; import { connect } from 'react-redux'; import { AnyAction, Dispatch } from 'redux'; // Component interface I${1:ComponentName}StateProps { } interface I${1:ComponentName}DispatchProps { } interface I${1:ComponentName}Props extends I${1:ComponentName}StateProps, I${1:ComponentName}DispatchProps { } interface I${1:ComponentName}State { } export class ${1:ComponentName} extends React.Component<I${1:ComponentName}Props, I${1:ComponentName}State> { public render() { return ( ${3:<span>Body</span>} ); } } // Container interface I${1:ComponentName}OwnProps { } const mapStateToProps = (state: ${2:IGlobalState}, ownProps: I${1:ComponentName}OwnProps): I${1:ComponentName}StateProps => { return { // ...mapStateToProps }; }; const mapDispatchToProps = (dispatch: Dispatch<AnyAction>, ownProps: I${1:ComponentName}OwnProps): I${1:ComponentName}DispatchProps => { return { // ...mapDispatchToProps }; }; export default connect( mapStateToProps, mapDispatchToProps, )(${1:ComponentName});
-
_con : constructor
constructor(props: I${1:ComponentName}Props) { super(props); ${2} } ${3}
-
_cwm : componentWillMount
public componentWillMount() { {1} } ${2}
-
_cdm : componentDidMount
public componentDidMount() { {1} } ${2}
-
_cwr : componentWillReceiveProps
public componentWillReceiveProps(nextProps: I${1:ComponentName}Props) { ${2} } ${3}
-
_scup : shouldComponentUpdate
public shouldComponentUpdate(nextProps: I${1:ComponentName}Props, nextState: I${1:ComponentName}State): boolean { ${2} return true; } ${3}
-
_cwup : componentWillUpdate
public componentWillUpdate(nextProps: I${1:ComponentName}Props, nextState: I${1:ComponentName}State) { ${2} } ${3}
-
_cdup : componentDidUpdate
public componentDidUpdate(prevProps: I${1:ComponentName}Props, prevState: I${1:ComponentName}State) { ${2} } ${3}
-
_cwun : componentWillUnmount
public componentWillUnmount() { {1} } ${2}
Install
Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.
ext install vscode-typescript-react-redux-snippets
Development
cd ~/.vscode/extensions
git clone https://github.com/Armour/vscode-typescript-react-redux-snippets
cd vscode-typescript-react-redux-snippets
This will load our snippets each time VS Code runs
Used projects
Contributing
See CONTRIBUTING.md