Useful Javascript & React live-templates for WebStorm

In this post I’ll show you my set of react/redux + js shortcuts for WebStorm

live-templates in action

Here you can read about creating own live templates:

jakwuh/dailytip

Live Templates — Help | WebStorm

how to import

To start using live templates just put an appropriate xml file with settings into your WebStorm live templates folder

Check out my repo for such files and more info about installing:

Drapegnik/env

Table of contents:

1. JavaScript
2. React

• 2.1 Redux methods
• 2.2 Lifecycle hooks
• 2.3 Events callbacks

Lets dive into code!

JavaScript

> im

ES6 Import — default

import $CLASS$ from '$MODULE$';
$END$

> imp

ES6 Import

import { $FUNC$ } from '$MODULE$';
$END$

> log

console.log

console.log('$MESSAGE$: ', $PARAM$);

> fe

ES6 forEach function

$ARRAY$.forEach($VAR$ => $END$)

> map

ES6 map function

$ARRAY$.map($VAR$ => $END$)

> fil

ES6 filter function

$ARRAY$.filter($VAR$ => $END$)

live-templates params order and values

> red

ES6 reduce function

$ARRAY$.reduce(($ACC$, $CUR$) => $END$);

> =>

ES6 arrow function

const $NAME$ = ($PARAMS$) => { 
 return $END$;
};

> for

Iterate elements of an array

for (let $INDEX$ = 0; $INDEX$ < $ARRAY$.length; $INDEX$++) {
  let $VAR$ = $ARRAY$[$INDEX$];
  $END$
}

> rfor

Iterate elements of an array in a reverse order

for (let $INDEX$ = $ARRAY$.length - 1; $INDEX$ >= 0; $INDEX$--) {
  let $VAR$ = $ARRAY$[$INDEX$];
  $END$
}

loops live-templates parameters

> forof

ES6 Iterate (for..of)

for (let $VAR$ of $ARRAY$) {
  $END$
}

> if

If condition

if ($COND$) {
  $END$
}

> ifel

If, else construction

if ($COND$) {
  $END$
} else {
}

> ter

Ternary operator

$COND$ ? $EXPR$ : $END$;

React

> rcc

React Class Component

import React, { Component, PropTypes } from 'react';
class $COMPONENT$ extends Component {
  propTypes = {};
  
  defaultProps = {};
render() {
    return (
      <div>$END$</div>
    );
  }
}
export default $COMPONENT$;

> rfc

React Functional Component

import React, { PropTypes } from 'react'
const $COMPONENT$ = (props) => {
  return (
      <div>$END$</div>
  );
};
$COMPONENT$.propTypes = {};
$COMPONENT$.defaultProps = {};
export default $COMPONENT$;

> pt

PropType

$PROP$: PropTypes.$TYPE$$ISREQUIRED$,

allow quickly add or remove `.isRequired` postfix

> pts

Functional Component PropTypes

$COMPONENT$.propTypes = {
  $PROP$: PropTypes.$TYPE$$ISREQUIRED$,
  $END$
};

this can be useful if you follow files and components naming conventions

> df

Functional Component defaultProps

$COMPONENT$.defaultProps = {
  $PROP$: $VALUE$,
  $END$
};

> spt

static PropTypes

static propTypes = {
  $PROP$: PropTypes.$TYPE$$ISREQUIRED$,
  $END$
};

> sdf

static defaultProps

static defaultProps = {
  $PROP$: $VALUE$,
  $END$
};

> props

this.props

> cprops

Props destructuring

const { $PROPS$ } = this.props;

> cst

Component Constructor

constructor(props) {
  super(props);
  $END$
}

> ren

render

render() {
  return (
    <div>$END$</div>
  );
}

> ss

setState

this.setState({
  $KEY$: $VALUE$,
});

> ssr

setState with return

this.setState((prevState$PROPS$) => ({
  $KEY$: $VALUE$,
}));

props arg is optional

> cs

classnames import

import classNames from 'classnames';

> wr

Surround with react-router withRouter function

withRouter($SELECTION$)

redux methods

> mstp

mapStateToProps function

const mapStateToProps = state => ({
  $PROP$: $END$,
});

> mstop

mapStateToProps function with ownProps

const mapStateToProps = (state, { $PROPS$ }) => {
  return ({
    $PROP$: $END$,
  });
};

> mdtp

mapDispatchToProps object

const mapDispatchToProps = {
  $PROP$: $END$,
};

> mdtpf

mapDispatchToProps function

const mapDispatchToProps = (dispatch, { $PROPS$ }) => ({
  $PROP$: $END$,
});

> con

Surround with react-redux connect

connect(mapStateToProps, mapDispatchToProps)($SELECTION$)

lifecycle hooks

> cdm

componentDidMount() {
  $END$
}

> cwr

componentWillReceiveProps(nextProps) {
  $END$
}

> cdu

componentDidUpdate(prevProps$PARAMS$) {
  $END$
}

> scu

shouldComponentUpdate(prevProps$PARAMS$) {
  $END$
}

optional param nextState

events callbacks

Other

> td

TODO

    // TODO(@$WHO$): $TEXT$
$END$

> fx

FIXME

    // FIXME(@$WHO$): $TEXT$
$END$

do you feel it?