CODEWITHSUNDEEP
reactjstemplateskeyboard-shortcutswebstormcode-snippets
Andres Diaz
Andres Diaz

Reputation: 441

WebStorm functional snippet React

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

So far I only found shortcut for class components.

Upvotes: 42

Views: 50853

Answers (4)

Gift Brightson
Gift Brightson

Reputation: 163

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

go to settings -> editor -> live templates

live Templates

  1. 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
  2. Click Live template it will open a pane on belowLive Template pane
  3. Add your desired abbreviation in my case i wanted a arrow function with export so i added rafce, description is optional
  4. 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

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

Upvotes: 11

Nasir Siraj
Nasir Siraj

Reputation: 439

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;

Upvotes: 9

Phil O.
Phil O.

Reputation: 665

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

Upvotes: 55

lena
lena

Reputation: 93848

Please try rsf - it creates a code like

import React from 'react';

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

export default Func;

enter image description here

Upvotes: 76

Related Questions