WebStorm Keyboard Shortcuts
WebStorm inherits the same IntelliJ platform shortcut foundation as PyCharm and IntelliJ IDEA, so anyone fluent in one JetBrains IDE transfers nearly all of their muscle memory directly — the core navigation, refactoring, and run/debug shortcuts are functionally identical across the family. What's specifically worth covering here is how those shared shortcuts apply in a JavaScript/TypeScript context, plus the npm-scripts and JSX-aware refactoring behaviors that are WebStorm's own specialization within the shared platform. Windows and Linux share a Ctrl/Alt-based keymap; Mac uses a distinct Cmd/Option-based keymap that isn't a simple character substitution of the Windows one. Frontend teams that standardize on WebStorm specifically for its deep TypeScript type-checking and JSX-aware refactoring tend to be doing enough React or Vue work at scale that VS Code's lighter-weight extension-based tooling starts to feel less reliable by comparison — the tradeoff is a heavier, more resource-intensive IDE in exchange for refactoring operations (like extracting a component with correctly inferred props) that a general-purpose editor's plugins can approximate but rarely match with the same consistency.
Navigation
| Action | Windows | Mac | Description |
|---|---|---|---|
| Search Everywhere | Shift+Shift | Shift+Shift | Double-tapping Shift opens universal search across files, symbols, and IDE actions, the fastest catch-all when unsure where something lives in the project. |
| Go to file by name | Ctrl+Shift+N | Cmd+Shift+O | Opens a fuzzy filename search, useful for jumping directly into a component or module file by typing a few distinguishing characters. |
| Go to declaration/definition | Ctrl+B | Cmd+B | Follows a function, component, or variable under the cursor straight to its real definition, correctly resolving across TypeScript type declarations and plain JS modules alike. |
| Find usages of symbol | Alt+F7 | Option+F7 | Lists every genuine reference to the symbol under the cursor across the project, distinct from a plain text search since it's based on actual code resolution rather than string matching. |
| Show recent files | Ctrl+E | Cmd+E | Opens a popup listing recently viewed and edited files, letting you jump back to something you were just working in without remembering its exact name or location in the project tree. |
Refactoring
| Action | Windows | Mac | Description |
|---|---|---|---|
| Rename symbol (safe refactor) | Shift+F6 | Shift+F6 | Renames a symbol and all its real references project-wide, including updating JSX usages of a renamed component correctly rather than just plain-text occurrences. |
| Extract React component | Ctrl+Alt+C (via refactor menu) | Cmd+Option+C | Extracts the selected JSX block into a new standalone React component, automatically inferring required props from variables referenced inside the selection. |
| Extract function | Ctrl+Alt+M | Cmd+Option+M | Moves the highlighted code into a freshly created function, swapping the original block for a call to it and figuring out the needed parameters by looking at the variables the code references. |
| Auto-import symbol under cursor | Alt+Enter | Option+Enter | Opens a quick-fix popup for an unresolved symbol, offering to add the correct import statement automatically — one of the most-used shortcuts in daily TypeScript/JS work given how often imports need adding when typing component or utility names. |
Run Debug
| Action | Windows | Mac | Description |
|---|---|---|---|
| Run current configuration | Shift+F10 | Ctrl+R | Executes the active run configuration, which could be an npm script, a Node.js file, or a Jest test suite depending on what's configured. |
| Open npm scripts panel | No single default shortcut — use tool window | No default shortcut | WebStorm's npm scripts tool window, listing and letting you run scripts directly from package.json, is opened from the View > Tool Windows menu rather than a default keyboard shortcut. |
| Debug current configuration | Shift+F9 | Ctrl+D | Starts the active configuration under WebStorm's built-in JavaScript debugger, stopping at breakpoints set in either source or compiled code depending on source map configuration. |
Frequently Asked Questions
Do WebStorm shortcuts really match PyCharm's exactly?
The vast majority of navigation, refactoring, and run/debug shortcuts are identical since both run on the shared IntelliJ platform and default keymap — the main differences are language-specific refactorings (like Extract React Component, which has no Python equivalent) rather than different keys for the same underlying platform action.
Why does Auto-import sometimes suggest the wrong package?
When multiple installed packages or local files export a symbol with the same name, WebStorm's Alt+Enter quick-fix shows a list to choose from rather than guessing — if it picked the wrong one automatically in the past, it's usually because there was only one candidate at the time, and a newly installed package or added file since then introduced ambiguity it now correctly surfaces as a choice.
Can I customize the keymap to match VS Code instead?
Yes — WebStorm ships with alternative keymap presets including one that approximates VS Code's bindings, accessible through Settings > Keymap, which can ease the transition for developers moving from VS Code without giving up WebStorm's deeper refactoring engine underneath.
Does Extract React Component work correctly with hooks used inside the selected JSX?
Generally yes for straightforward cases — WebStorm analyzes which variables and hook results the selected JSX block actually references and attempts to pass them through as props to the newly extracted component, though genuinely complex cases involving hooks with interdependent state logic may still need manual adjustment afterward to correctly wire up state that can't simply be passed down as a prop.
Is Recent Files different from just using browser-style back/forward navigation?
Yes — Recent Files (Ctrl+E / Cmd+E) shows a chronological list of files you've had open regardless of navigation path, letting you jump to any of them directly, while back/forward navigation retraces the specific sequence of jumps (like following a go-to-definition chain) you actually took, which is a different and complementary way of returning to previous context depending on whether you remember the file or the path you took to get there.
Does WebStorm need a separate Node.js debugging plugin, or is debug support built in?
Node.js and browser JavaScript debugging support is built directly into WebStorm without needing a separate plugin, including full breakpoint support, variable inspection, and source-map-aware stepping through transpiled TypeScript, which is one of the more meaningful advantages over a general-purpose editor that typically needs a dedicated debugger extension installed and configured separately.
Why does Search Everywhere sometimes miss a file that definitely exists in the project?
This usually happens when the file lives inside a directory WebStorm has been configured to exclude from indexing, such as node_modules or a build output folder marked as excluded in project structure settings — excluded directories are deliberately kept out of most navigation and search features to keep the index fast and relevant, which occasionally means a legitimately present file won't surface until that exclusion is adjusted.
Is there a shortcut for running the current file's associated npm script in WebStorm?
Yes — right-clicking a script entry in package.json and choosing Run (or clicking the green run gutter icon next to it) executes that npm script directly; while there's no single universal keyboard shortcut for 'run current file's script' generically, recently run configurations can be re-run quickly with Shift+F10.