WebStorm Power User Manual

Intro

Overview

In April 2022 I did a Webinar with JetBrains titled WebStorm's Power User Manual.

Along with Margaux Flores 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 article.

Thanks again to JetBrains, Paul Everitt and Aleksandra Aganezova.

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 the user interface so you don't feel overwhelmed
• Arrange tool windows in one of 8 dock locations that makes sense to you
• Pin or unpin tool windows so they stay prominent (Dock Pinned) or get out of your way (Dock Unpinned)
• Save and restore your ideal arrangement so you don't need to set up each individual project

Tabs

• Configure tabs to show more of them vertically
• Split views to work on multiple files simultaneously

Lists

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

Project

Projects

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

Scopes

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

Folders

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

Files

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

Scratch files

• Scratch Files (Cmd + Shift + N) let you work on temporary notes, code, styles, or any other file type!
• Run or debug 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 (Cmd + [ / ] ) to go to and from last edit locations, even across files
• Multiple carets (Alt + Click / Drag) allow you to make multiple simultaneous edits and selections
• Copy and paste to and from multiple carets to manipulate code like a pro!

Selection

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

Manipulation

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

Find and replace

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

Coding

Code style

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

Intentions

• Use Code completion (Ctrl + Space) to show completion suggestions for code and markup
• Use Intention actions (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 (Cmd + B / Cmd + Click) on any keyword (component, import, tag, CSS class)
• Show usages popup (Cmd + B / Cmd + Click) on any declaration (variable, class)
• Find usages (Alt + F7 / Right Click > Find Usages) on any file in the Project View

Importing

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

Refactoring

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

Code generation

• Generate code such as constructors, accessors, and interface implementations automatically
• Live Templates insert code snippets with placeholders, (intelligent!) variables and Tab-completion
• Postfix Completion 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
• JavaScript:
  • Start template string interpolation on typing $
  • Convert attributes when pasting HTML into JSX files
• See the Smart Keys help for the full list of languages and smarts

Language injection

• WebStorm automatically recognises languages within other languages and provides support as the context changes

Tooling

Commands

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

Change lists

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

Version control

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

NPM support

• Run and debug NPM scripts from the dedicated NPM panel
• and jump directly to packages from the JSON

Debugging code

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

Test support

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

Web development tools

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

Plugins

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

• Quokka
  Run JavaScript and TypeScript directly in WebStorm with instant feedback and live values
• Awesome Console
  Displays links to local files (including errors) and opens them in an editor pane
• DataGrip
  An outrageously good database editing tool, directly in WebStorm
• String Manipulation
  Case switching, sorting, filtering, incrementing, aligning to columns, grepping, escaping, encoding...