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;

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