WebStorm Power User Manual

The WebStorm features and tools I use everyday to write better code and build bigger apps

12 minute read

Intro

Overview

In April 2022 I did a Webinar with JetBrains titled WebStorm’s Power User Manual (opens new window).

Along with Margaux Flores (opens new window) we shared some of our favourite WebStorm features in a fairly freewheeling discussion.

This article accompanied the webinar and is what I was using to make sure I’d covered as much as I could in the time, as well as giving attendees a prompt to ask questions or request demos.

For JetBrains’ own one-page intro to WebStorm, see their excellent Getting Started (opens new window) article.

Thanks again to JetBrains (opens new window), Paul Everitt (opens new window) and Aleksandra Aganezova (opens new window).

Content

Because WebStorm is already so well documented, so I’ve listed only the features rather than adding screenshots, etc.

For each feature there’s:

  • the feature name / purpose
  • a link to the docs
  • a short description / tips
  • any shortcut key

If you want to get the most out of WebStorm, I recommend trying each of these features for yourself. If you have any questions or comments, I’d be glad to answer them below.

See my article on WebStorm’s keyboard shortcuts to get way more done without taking your hands off the keyboard.

UI

General

Tabs

Lists

Project

Projects

Scopes

Folders

Files

Scratch files

Editing

Cursor

Selection

Manipulation

Find and replace

Coding

Code style

Intentions

Navigation

Importing

Refactoring

Code generation

Smart Keys

  • Anywhere:

    • Type < ( { [ " ' to insert the corresponding pair
    • Surround selection on typing quote or brace, i.e. hit [ to get [selection]
  • HTML:

  • JavaScript:

    • Start template string interpolation on typing $
    • Convert attributes when pasting HTML into JSX files
  • See the Smart Keys (opens new window) help for the full list of languages and smarts

Language injection

Tooling

Commands

Change lists

Version control

NPM support

Debugging code

Test support

Web development tools

Plugins

Because WebStorm has so much functionality built-in, I don’t use that many plugins, but here are some I like:

So...