Useful Javascript & React live-templates for WebStorm

Ivan Pazhitnykh
Aug 9, 2017 · 3 min read

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:

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:

Table of contents:

  1. JavaScript
  • 2.1 Redux methods

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?

Thanks to Victoria Drozd

 by the author.

Ivan Pazhitnykh

Written by

Javascript & React developer https://github.com/Drapegnik

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade