WebStorm functional snippet React

Question

Does anybody knows what the shortcut is for React functional components snippet in WebStorm?

So far I only found shortcut for class components.

score 60 · Answer 1 · answered Aug 04 '20 at 12:01

60

Please try rsf - it creates a code like

import React from 'react';

function Func(props) {
  return (<div></div>);
}

export default Func;

answered Aug 04 '20 at 12:01

lena

90,154
11
145
150

Phil O. · Answer 2 · 2021-08-12T07:32:40.393

46

I use the rsc live template a lot for new components.

This creates code like:

import React from 'react';

const MyComponent = () => {
    return (
        <div>
        
        </div>
    );
};

export default MyComponent;

Apart from that I created my own live template in the JavaScript category for creating arrow functions to save even more time, which creates code like:

const myFunction = () => {
    
};

Just add a new Live Template under the JavaScript category with this template text:

const $1$ = () => {
    $END$
};

And make sure to set applicable in to JavaScript and TypeScript and select the checkboxes for:

statement
top level statement

edited Aug 12 '21 at 07:32

answered Dec 22 '20 at 15:01

Phil O.

575
4
7

why did you also create you Live Template? it seems to me it does the same thing as `rsc` – Fed Aug 11 '21 at 06:46
1

@FedericoCapaldo hi, i created that just for an arrow function. `rsc` always creates the whole block for a component with import and export statements, and I didn't find any existing template which just creates an arrow function. – Phil O. Aug 12 '21 at 07:29
Isn't `arf` doing this? – user2078023 Feb 28 '22 at 17:30
@user2078023 hi, I don't see any live template like that in WebStorm version 2020.3.3 which I use. – Phil O. Mar 01 '22 at 19:14
1

@PhilO. I went to Settings -> Editor -> Live Templates -> JavaScript and it is the 1st one. See image here: https://paste.pics/GA3HW – user2078023 Mar 06 '22 at 17:29

score 6 · Answer 3 · edited Jan 04 '22 at 13:28

i. rsf - Creates a stateless React component as a named function without PropTypes.

import React from 'react';

function AppComponent(props) {
    return (
        <div></div>
    );
}

export default AppComponent;

ii. rsfp - Creates a stateless React component as a named function with PropTypes.

import React from 'react';
import PropTypes from 'prop-types';

AppComponent.propTypes = {
    
};

function AppComponent(props) {
    return (
        <div></div>
    );
}

export default AppComponent;

score 5 · Answer 4 · answered Jul 23 '22 at 18:02

You can configure your own templates in the web-storm by your own key word

go to settings -> editor -> live templates

Selecting React, on the right side press the add button or alt + insert to create a new template key bindings are based on Linux system
Click Live template it will open a pane on below
Add your desired abbreviation in my case i wanted a arrow function with export so i added rafce, description is optional
In the live template paste your desired format of code generation for your abbreviation

Example:

// Created on $DATE$ by $USER$:  for project $project$

import React from 'react'

const $FileName$ = () => {
  return (
    <div>$FileName$</div>
  )
}

export default $FileName$

${var_name}$ can be used to describe a inbuilt function on the ide or your custom variable for more reference refer the webstorm documentation on inbuilt functions for live templates webstorm live templates

You can edit these variable declarations on edit variables to get your desired behavior
Variable declaration for above template
Set the application context to java script and type script click save and apply your template is ready

WebStorm functional snippet React

4 Answers4