FOMO Digest #3: Top 7 Features for React Development in JetBrains IDEs
Welcome to the third installment of our FOMO digest series, where we gather together the most useful productivity boosters in WebStorm and our other JetBrains IDEs. Today, we’re going to cover some of the coolest features for working with React. All these features are available out of the box in your JetBrains IDE.
‘Reactify’ HTML on copy and paste
Let’s start with one small yet super-useful feature that’s loved by many of our users.
#WebStormTip – Pasting HTML into a React project will convert `class` into `className` 🤯
— alistair (@alistaiiiir) February 15, 2021
That’s right! Whenever you paste HTML code into a React component, your IDE will automatically convert it so it follows proper React conventions.
In this example, class was converted to className. The IDE will also convert event handlers, for example changing onclick to onClick. For more information, consult the Transfer HTML attributes to JSX section in our documentation.
Extract React components
Are you striving to reach React zen and the promise of a component-driven application? As you probably know, creating a component-driven application requires a lot of tedious work: moving the JSX, identifying the necessary props (possibly with types), putting in a call to the new component, etc.
Let the IDE do this work for you! First, select the JSX you want to turn into a subcomponent. Then use the Refactor This popup (^T / Ctrl+Alt+Shift+T), and select Extract Component…. Now you just need to name it, make it a class or function, and you’re done.
Want to obey the single-responsibility principle and have one component per file? You can use the Move refactoring to extract the new component and all the imports, data, and inputs it needs into a separate new file.
Bonus tip: You can convert React class components into functional components and back again. Just press ⌥Enter / Alt+Enter on the component definition and select the action you need. Also, if you change your mind, a single “undo” (⌘Z / Ctrl+Z) will put everything back the way it was.
Use React code snippets
There’s a huge collection of React code snippets available inside JetBrains IDEs to help you save some time. With over 50 abbreviations that expand into different statements and blocks of code for your React projects, you’ll rarely need to write anything from scratch.
To use these snippets, type the abbreviation in the editor and press ⇥ /Tab to expand it. You can also use Insert Live Template to add snippets. Press ⌘J / Ctrl+J and select the snippet you want to insert from the list.
You can find the full list of available templates for React under Preferences / Settings | Editor | Live Templates.
Bonus tip: You can modify the code templates the IDE uses for new components by going to Preferences / Settings | Editor | File and Code Templates and selecting the Code tab.
Navigate React projects
WebStorm and our other JetBrains IDEs help you navigate through your symbols, such as JSX tags, with breadcrumbs and colorful highlighting for the tag tree in the editor gutter.
It’s also easy to jump to a declaration of a method or a JavaScript expression inside curly braces {}. Just select the method or expression, and press ⌘B / Ctrl+B.
Bonus tip: There are some other neat shortcuts for navigating in React, such as ⌥Space / Ctrl+Shift+I for viewing a component’s definition and F1 / Ctrl+Q for viewing a component’s quick documentation.
Find problems in your code
There’s a wide range of built-in inspections for JavaScript and HTML that work across your whole React project.
For example, the IDE alerts you about unused variables and functions, missing closing tags, missing statements, and much more. It can also help you clean them up. For example, you can configure the IDE to add missing semicolons when you run Reformat Code (⌥⌘L / Ctrl+Alt+L), and have it clean up any unused imports with Optimize Imports (^⌥O / Ctrl+Alt+O):
Bonus tip: You can customize inspections in Preferences / Settings | Editor | Inspections. Disable any you don’t want or change the severity level from warnings to errors or vice versa.
Turn on the ESLint integration
WebStorm and other JetBrains IDEs integrate with ESLint, allowing you to see warnings and errors reported by it in the editor as you type. You can get warnings when the display name is not set for a React component or when dangerous properties are used. What’s more, issues found with ESLint are reported globally in the Problems view.
To enable ESLint, go to Preferences / Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.
Bonus tip: You can run ESLint every time you use ⌘S / Ctrl+S to save your project, or you can set it up to run automatically when you launch a run/debug configuration, close your IDE, or perform version control operations. To enable this, just tick the option in the ESLint section in Preferences / Settings.
Start debugging from tool windows
Now for a more advanced tip: You can start debugging sessions from wherever your application is running. If your application is running on localhost, you can also start the debugger from the built-in terminal or from the Run tool window.
The Run and Terminal tool windows show the URL your application is running on – by default, http://localhost:3000/. Hold ⌘⇧ / Ctrl+Shift and click the URL link in the tool window. The IDE will start a debugging session.
We hope that you have enjoyed this edition of our FOMO Digest and that you have learned something new. Please let us know what else you’d like to learn about! If you have any favorite features you’d like to see featured, please share them in the comments below.
The WebStorm team
Subscribe to WebStorm Blog updates
