Tired of Writing Repetitive Code? Try Using Templates

Saving 1 minute per day is 6 hours per year.

I have noticed that I type the same things over and over again in my IDE.

Luckily, WebStorm provides the Live Templates feature, which allows you to insert common constructs into your code. Besides having a ton of built-in templates, you can also create your own templates.

Here are some of the templates I use every day to speed things up.

Template to Create a Component

By typing component I trigger the following template:

import React, { memo } from 'react';

interface $VARIABLE$Props {}

export const $VARIABLE$ = memo(function $VARIABLE$(props: $VARIABLE$Props): React.ReactElement {
  return <div></div>;
});

Then I start type my variable name. For example: MyComponent.

This will result in following code:

import React, { memo } from 'react';

interface MyComponentProps {}

export const MyComponent = memo(function MyComponent(props: MyComponentProps): React.ReactElement {
  return <div></div>;
});

This is how it looks in WebStorm:

Template for useMemo

By typing memo, I trigger the following template:

const $VARIABLE$ = useMemo(() => {}, [])

This is how it looks like in WebStorm:

Template for useCallback

By typing callback, I trigger the following template:

const $VARIABLE$ = useCallback(() => {}, [])

This is how it looks like in WebStorm:

Template create a custom hook

By typing hook, I trigger the following template:

import React, { memo } from 'react';

interface $VARIABLE$Return {}

export function use$VARIABLE$(): $VARIABLE$Return {}

This is how it looks like in WebStorm:

Combine everything

So now let’s combine everything to build a new React component: