Webstorm / IntelliJ Typescript React Arrow Function Template

README.md

Webstorm / IntelliJ Typescript React Arrow Function Template

This is a IntelliJ/WebStorm live template that can be used to easily create a new arrow function component.

How to use

1. Go to the WebStorm/IntelliJ settings
2. Open the Live Template editor
3. Add a new template to the "React" section
4. Add the contents of content.tsx to the content field
5. Add the TM_FILENAME_BASE variable using this expression: capitalize(camelCase(fileNameWithoutExtension()))
6. Add the TypeScript > Top Level Statement context
7. Use any abbreviation you like, I usually use rfc

content.tsx

import * as React from 'react';
import { FunctionComponent } from 'react';

type Props = Record<string, never>;

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

export default $TM_FILENAME_BASE$;