Webstorm live templates

overview.md

React Native Live Templates for WebStorm

How to add Live Template in Webstorm

1. open preferences
2. editor> live templates
3. add template group for React Native
4. add templates below to the new group
5. define context > javascript
6. edit variables > add "fileNameWithoutExtension" to "$fnName$"

Templates

Javascript

deb: Debugger

debugger;

log: Console.log

console.log($CONTENT$);

iife: Immediately-Invoked Function Expression

(function () {
    $CONTENT$
}());

#### `pro`: Promise ES6 style
```javascript
new Promise((resolve, reject) => {
    $CONTENT$
});

pro: Promise ES5 style

new Promise(function(resolve, reject) {
    $CONTENT$
});

f: Function ES6 style

($ARGUMENTS$) => {
    $BODY$
}

fu: Function ES5 style

function $NAME$($ARGUMENTS$) {
    $BODY$  
}

class: Class

class $CLASS_NAME$ {
  constructor($CONSTRUCTOR_ARGUMENTS$) {
    $CONTRUCTOR_BLOCK$
  }
}

us: Use strict

'use strict';
$END$

React native

rncc: React Native Statefull Component

import React, { Component } from 'react';
import { View } from 'react-native';

class $fnName$ extends Component {
  propTypes = {$PROP_TYPES$}
  state = {$STATE$};

  render() {
    return (
        $RENDER$
    )
  }
}

rncf: React Native Functional Component

import React from 'react';
import { View } from 'react-native';

export const $fnName$ = () => {
  return (
    $RENDER$
  )
};

$fnName$.propTypes = {
    $PROP_TYPES$
}

rnrs: React Native Redux Store

export function dummieDispatch (state) {
  return {
    type: TEST,
    state,
  }
}

export function dummieAction () {
  return function (dispatch, getState) {
    dispatch(dummieDispatch())
  }
}



const initialState = {
 
}

export default function settings (state = initialState, action) {
  switch (action.type) {
    case TEST :
      return {
        ...state,
      }
    default :
      return state
  }
}

rnss: React Native Stylesheet

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    $CONTENT$
});

export default styles;

React (native) goodies

cdm: componentDidMount

componentDidMount() {
  $END$
}

cdu: componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  $END$
}

cstr: constructor

constructor(props) {
  super(props);
  
  this.state = {
    $START$: $END$
  };
}

cwm: componentWillMount

componentWillMount() {
  $END$
}

cwr: componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  $END$
}

cwu: componentWillUpdate

componentWillUpdate(nextProps, nextState) {
  $END$
}

cwum: componentWillUnmount

componentWillUnmount() {
  $END$
}

rcomp: react component (es6)

import React, {Component, PropTypes} from 'react';

class $COMPONENT$ extends Component {
  render() {
    return (
      <div>$END$</div>
    );
  }
}

$COMPONENT$.propTypes = {
};

$COMPONENT$.defaultProps = {
};

export default $COMPONENT$;

rfcomp: react functional component

import React, {PropTypes} from 'react';

const $COMPONENT$ = ({}) => {
  return (
    
  );
};

$COMPONENT$.propTypes = {
};

$COMPONENT$.defaultProps = {
};

export default $COMPONENT$;

rrcomp: react redux component

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux'

class $COMPONENT$ extends Component {
  render() {
    return (
      <div>$END$</div>
    );
  }
}

$COMPONENT$.propTypes = {
};

$COMPONENT$.defaultProps = {
};

const mapStateToProps = (state) => {
  return {
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
  };
};

export default connect(mapStateToProps, mapDispatchToProps)($COMPONENT$);

scu: shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  $END$
}```

edit variables > add "fileNameWithoutExtension" to "$fnName$"

capitalize(camelCase(fileNameWithoutExtension()));()

i thin this expression more better, because news-header.jsx -> NewsHeader

In all honesty, I am not using Webstorm for more then 4 years...

In all honesty, I am not using Webstorm for more then 4 years...

But WHY? I <3 Jetbrain IDEs!

666