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.

Quick links

UI

General

• Get to know (opens new window) the user interface so you don’t feel overwhelmed
• Arrange tool windows (opens new window) in one of 8 dock locations that makes sense to you
• Pin or unpin (opens new window) tool windows so they stay prominent (Dock Pinned) or get out of your way (Dock Unpinned)
• Save and restore (opens new window) your ideal arrangement so you don’t need to set up each individual project

Tabs

• Configure tabs (opens new window) to show more of them vertically
• Split views (opens new window) to work on multiple files simultaneously

Lists

• Type in any list (opens new window) (Project, Recent Files, Find in Files, etc) to filter / highlight entries

Project

Projects

• Manage Projects (opens new window) (add Cmd + Shift + P) using the popup to quickly view, filter and open projects

Scopes

• Configure scopes (opens new window) to limit operations to files and folders (opens new window) using a special scope path syntax
• Filter Project by Scope (opens new window) (including open and changed files (opens new window)) using the dropdown in the Project view toolbar
• Search within Scope (opens new window) using the Scope option in the Find in Files (opens new window) dialog

Folders

• Mark as Excluded (opens new window) so their content isn’t indexed and doesn’t clutter search results
• Mark as Resource Root (opens new window) to hint WebStorm into providing path auto-completion for assets

Files

• Search for files (opens new window) (Cmd + Shift + O) and type to filter and press Enter to open
• Open recent files (opens new window) (Cmd + E) and type to filter then press Enter to open
• Locate current file (opens new window) in the Project view by clicking the cross-hairs icon in the Project view toolbar

Scratch files

• Scratch Files (opens new window) (Cmd + Shift + N) let you work on temporary notes, code, styles, or any other file type!
• Run or debug (opens new window) the scratch file by Right Click then choose “Run Scratch” or “Debug”
• Use the Quokka plugin (free and paid versions available) for additional code insight

Editing

Cursor

• Navigate edits (opens new window) (Cmd + [ / ] ) to go to and from last edit locations, even across files
• Multiple carets (opens new window) (Alt + Click / Drag) allow you to make multiple simultaneous edits and selections
• Copy and paste (opens new window) to and from multiple carets to manipulate code like a pro!

Selection

• Extend / shrink (opens new window) the selection (Alt + Up / Down) to intelligently select by context boundaries
• Select multiple occurrences (opens new window) (Ctrl + G / Shift + Ctrl + G) as an interactive alternative to Find and Replace

Manipulation

• Manipulate lines and selections (opens new window) (move, duplicate, delete, etc) with intuitive keyboard shortcuts
• Move blocks (opens new window) up and down (Cmd + Shift + Up / Down) with intelligent positioning and reformatting

Find and replace

• Use regular expressions (opens new window) for exacting search as well as replacement preview including capture references (opens new window)
• Edit code directly (opens new window) in the code preview window! Incredibly useful when you want to manually edit multiple files.
• Narrow your search (opens new window) with additional filters, file type or scope

Coding

Code style

• Configure code style (opens new window) for any language or markup, globally, per-project, or per-folder (with unbelievable options!)
• Reformat (opens new window) code on the fly (Cmd + Alt + L) according to your configured code style

Intentions

• Use Code completion (opens new window) (Ctrl + Space) to show completion suggestions for code and markup
• Use Intention actions (opens new window) (Alt + Enter) on any code or markup member to get a list of clever things you can do
• For the full list, see Preferences > Editor > Intentions

Navigation

• Go to declaration (opens new window) (Cmd + B / Cmd + Click) on any keyword (component, import, tag, CSS class)
• Show usages (opens new window) popup (Cmd + B / Cmd + Click) on any declaration (variable, class)
• Find usages (opens new window) (Alt + F7 / Right Click > Find Usages) on any file in the Project View

Importing

• Imports are added automatically (opens new window) by simply typing the symbol name and hitting Tab
• For existing code, use Intention actions (opens new window) (Alt + Enter) then choose “Import…” to generate the imports

Refactoring

• In the Project view, drag or move files (opens new window) (F5) to automatically update imports for the file and its usages
• Use move refactoring (opens new window) (F6) to move declarations to other files and automatically update imports
• Use rename refactoring (opens new window) (Shift + F6) to rename symbols and automatically update imports
• Use extract refactorings (opens new window) to introduce variables, constants, parameters, fields, methods, and functions
• Use change signature (opens new window) (Cmd + F6) to update the function name, params and order, and all calls to that function
• Use the Refactor This (opens new window) popup (Ctrl + T) to get access to all these refactorings in a single list

Code generation

• Generate code (opens new window) such as constructors, accessors, and interface implementations automatically
• Live Templates (opens new window) insert code snippets with placeholders, (intelligent (opens new window)!) variables and Tab-completion
• Postfix Completion (opens new window) lets you do things like type value.log + Tab to enter console.log(value)

Smart Keys

• Anywhere:

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

• HTML:

  • Within tags, type = to automatically add "" and place the caret in between
  • Change one tag to automatically update the other (opens new window)

• 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

• WebStorm automatically recognises languages within other languages (opens new window) and provides support as the context changes

Tooling

Commands

• Search actions (opens new window) (Cmd + Shift + A) when you can’t quite remember the name of the thing you need to do
• Search everywhere (opens new window) (Shift + Shift) to find files, actions, panels, preferences, etc

Change lists

• Manage changelists (opens new window) to group changes related to different tasks and commit these sets of changes independently
• Shelve and unshelve (opens new window) changelists to easily switch tasks and work on them later

Version control

• Powerful and integrated version control (opens new window) including full repository management (opens new window).
• Track changes (opens new window) from the margin indicators and select, copy, or revert code as needed
• Compare files (opens new window) and resolve conflicts (opens new window) with the best in the business file comparison tool
• View version history (opens new window) as well as local history (opens new window) for both files and selections

NPM support

• Run and debug NPM scripts (opens new window) from the dedicated NPM panel
• and jump directly to packages from the JSON

Debugging code

• Debug NPM scripts (opens new window) right from package.json or the NPM script panel
• Debug Node applications (opens new window) including Express servers (opens new window)
• Use the Debugger (opens new window) to stop, inspect and change your code:
  • Add breakpoints (opens new window) right in the margin
  • View values inline (opens new window) or inspect variables (opens new window) whilst the program is paused
  • Set variable values (opens new window) in the panel or use the built-in console (opens new window)
  • Step through (opens new window) the code to see what is actually happening

Test support

• Run individual tests (opens new window) from the margin of the code itself
• Explore test results (opens new window) tests from a convenient panel
• View code coverage (opens new window) results in both a panel and the editor (opens new window)

Web development tools

• Markdown editor (opens new window)
• Database (opens new window) (via the DataGrip (opens new window) plugin)
• CSV Editor (opens new window)
• HTTP Client (opens new window)

Plugins

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

• Quokka (opens new window)

  Run JavaScript and TypeScript directly in WebStorm with instant feedback and live values

• Awesome Console (opens new window)

  Displays links to local files (including errors) and opens them in an editor pane

• DataGrip (opens new window)

  An outrageously good database editing tool, directly in WebStorm

• String Manipulation (opens new window)

  Case switching, sorting, filtering, incrementing, aligning to columns, grepping, escaping, encoding…