1 post tagged

WebStorm

Quick Add React Component to Webstorm

Boris Dinkevich

One of the better practices in React is breaking our view to as many reusable components as possible. To make the test a bit easier, we can set WebStorm to auto generate React Component files.

Setup

  1. Open WebStorm
  2. Click Ctrl+Enter
  3. Select “Edit File Template”
  4. Click green + on left top
  5. Name it “React Component”
  6. Set extension to: “js” (or “jsx”)
  7. Click “enable live templates”
  8. Paste this to main edit view:
#set ($clean = ${StringUtils.sub(${NAME}, "_", "-")})
#set ($component = ${StringUtils.removeAndHump(${clean}, "-")})

const $component = () => (  
  #[[$END$]]#
);

export default $component;

Usage

Anywhere in WebStorm where file adding dialog pops-up (e. g. Ctrl+Enter) you can now select “React Component”

Set the name of the file (both “-” and “_” are supported) and viola – a new Dumb ReactJS ES2015 compatible component is created.

const HelloWorld = () => (  
  <h1>Hi</h1>
);

export default HelloWorld;

Summary

This is just a small taste of what WebStorm’s file creation and Live Templates can do. Do explore more.

React   Tips   WebStorm