live templates

useful shortcuts for WebStorm live templates feature

table of contents

how to use

To start using this live templates simply put .xml file into your WebStorm live templates folder

Open Preferences -> Editor -> Live Templates and modify templates for you

Use cmd+j for fulltext search by templates abbreviation and description

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$);
name expression default
ARRAY jsArrayVariable()  
VAR   "item"

> 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$;
}
name expression default
INDEX jsSuggestIndexName() "i"
ARRAY jsArrayVariable()  
VAR jsSuggestVariableName()  

> forof

Iterate (for..of) - ES6

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 } from 'react';
import PropTypes from 'prop-types';

class $COMPONENT$ extends Component {
  static propTypes = {};

  static defaultProps = {};

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

export default $COMPONENT$;

> rfc

React Functional Component

import React from 'react';
import PropTypes from 'prop-types';

const $COMPONENT$ = props => {
  return <div>$END$</div>;
};

$COMPONENT$.propTypes = {};

$COMPONENT$.defaultProps = {};

export default $COMPONENT$;

> pt

PropType

$PROP$: PropTypes.$TYPE$$ISREQUIRED$,
name expression default
ISREQUIRED   ".isRequired"

> pts

Functional Component PropTypes

$COMPONENT$.propTypes = {
  $PROP$: PropTypes.$TYPE$$ISREQUIRED$,
  $END$,
};
name expression default
COMPONENT fileNameWithoutExtension()  

> 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$,
});

> ssp

setState with prevState

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

> ssr

setState with return

this.setState(prevState$PROPS$ => {
  $END$;
  return {};
});
name expression default
PROPS   ", props"

> 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$
}
name expression default
PARAMS   ", nextState"

events callbacks

shortcut template
onbl onBlur={$END$}
onch onChange={$END$}
onc onClick={$END$}
ondc onDoubleClick={$END$}
oner onError={$END$}
onf onFocus={$END$}
onin onInput={$END$}
onkd onKeyDown={$END$}
onkp onKeyPress={$END$}
onku onKeyUp={$END$}
onmd onMouseDown={$END$}
onme onMouseEnter={$END$}
onml onMouseLeave={$END$}
onmm onMouseMove={$END$}
onmot onMouseOut={$END$}
onmov onMouseOver={$END$}
onmu onMouseUp={$END$}
onsc onScroll={$END$}
onsl onSelect={$END$}

Other

> td

TODO

// TODO(@$WHO$): $TEXT$
$END$;
name expression default
WHO decapitalize(user())  

> fx

FIXME

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