WebStorm Live Templates

A small collection of WebStorm "Live Templates" (tab-expandable snippets) that have been useful to me at least a handful of times – in many cases a lot more.

The header for each snippet includes the keyword I used. Often there are multiple related snippets that have similarly structured keywords.

WebStorm supports a lot of useful markers and functions to quickly fill in the snippets if needed. Most of them are pretty self explanatory, and all of them are detailed here.

Table of contents

• React components
  • rcp / React children (TypeScript) prop type
  • rfc / React interfaced functional component
  • rfcc / React interfaced functional component -- compact
  • rfccc / React interfaced functional component -- MORE compact
• React hooks
  • rhc / React Hooks: useCallback
  • rhd / React Hooks: useDispatch
  • rhl / React Hook: Log: log a variable in a useEffect
  • rhs / React Hooks: useState
  • rhsel / React REDUX Hook: useSelector
• Styling
  • stc / Styled component
  • stcp / Styled component, with props
  • stp / Styled Prop interpolation for styled-components (with props)
• Various
  • usetr / i18n useTranslation hook
  • tvf / Typescript: void function
  • parsej / Parser function for JSON

React components

rcp / React children (TypeScript) prop type

children: ReactNode

rfc / React interfaced functional component

import React from "react";

interface $TM_FILENAME_BASE$Props {
}

export const $TM_FILENAME_BASE$ = ({$PROPS$}: $TM_FILENAME_BASE$Props) => {
    return (
        <div>
            $END$
        </div>
    );
};

Vars:

• Default value: fileNameWithoutExtension() (ALSO USED IN OTHERS BELOW)

rfcc / React interfaced functional component -- compact

interface $TM_FILENAME_BASE$Props {
}

const $TM_FILENAME_BASE$ = ({$PROPS$}: $TM_FILENAME_BASE$Props) => {
    return (
        <div>
            $END$
        </div>
    );
};

rfccc / React interfaced functional component -- MORE compact

const $TM_FILENAME$ = ({children}: $PROPS$) => {
    return (
        <div>
            $END$
        </div>
    );
};

React hooks

rhc / React Hooks: useCallback

const $name$ = useCallback(($params$) => $callback$, [$deps$]);

rhd / React Hooks: useDispatch

const dispatch = useDispatch();

rhl / React Hook: Log: log a variable in a useEffect

Note: Consider including // TODO: remove, as this should surely never ever be comitted

useEffect(() => {
    console.log("$LOGGED_VARIABLE$:", $LOGGED_VARIABLE$);
}, [$LOGGED_VARIABLE$]);

rhs / React Hooks: useState

const [$variable$, set$Variable$] = useState<$type$>($defaultValue$);

rhsel / React REDUX Hook: useSelector

const $var$ = useSelector(($storeName$: $storeType$) => $storeFetched$);

Styling

stc / Styled component

const $NAME$ = styled.$TAG$`
    $END$
`;

stcp / Styled component, with props

const $NAME$ = styled.$TAG$<$PROPS$>`
    $END$
`;

stp / Styled Prop interpolation for styled-components (with props)

${props => props.$END$}

Various

usetr / i18n useTranslation hook

const {$PROPERTIES$} = useTranslation($NAMESPACE$);$END$

tvf / Typescript: void function

() => void

parsej / Parser function for JSON

export function parse$TYPE$(json: any): $TYPE$ {
    return {
        ...json,
        $END$
    };
}