Skip to content

Instantly share code, notes, and snippets.

@hoetmaaiers
Last active August 29, 2022 07:28
Show Gist options
  • Save hoetmaaiers/93859527afbcb3ffe2e62f41e5f8e86e to your computer and use it in GitHub Desktop.
Save hoetmaaiers/93859527afbcb3ffe2e62f41e5f8e86e to your computer and use it in GitHub Desktop.
Webstorm live templates

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;
@hoetmaaiers
Copy link
Author

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

@mjkatgithub
Copy link

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

But WHY? I <3 Jetbrain IDEs!

@fgc1101
Copy link

fgc1101 commented May 15, 2022

666

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment