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

• Armour/express-webpack-react-redux-typescript-boilerplate

Contributing

See CONTRIBUTING.md

License

MIT License