WebStorm

Comprehensive WebStorm shortcuts and workflows for JavaScript, TypeScript, React, Vue, and Node.js development.

General Shortcuts

Windows/Linux	macOS	Description
Ctrl+Shift+A	Cmd+Shift+A	Find Action
Ctrl+Shift+N	Cmd+Shift+O	Go to File
Ctrl+N	Cmd+O	Go to Class
Ctrl+Shift+Alt+N	Cmd+Option+O	Go to Symbol
Ctrl+E	Cmd+E	Recent Files
Ctrl+Shift+E	Cmd+Shift+E	Recent Locations
Ctrl+G	Cmd+L	Go to Line
Ctrl+F12	Cmd+F12	File Structure
Alt+F1	Option+F1	Select In

Navigation

Windows/Linux	macOS	Description
Ctrl+B	Cmd+B	Go to Declaration
Ctrl+Alt+B	Cmd+Option+B	Go to Implementation
Ctrl+Shift+B	Cmd+Shift+B	Go to Type Declaration
Ctrl+U	Cmd+U	Go to Super Method
Alt+F7	Option+F7	Find Usages
Ctrl+F7	Cmd+F7	Find Usages in File
Ctrl+Shift+F7	Cmd+Shift+F7	Highlight Usages
Ctrl+Alt+F7	Cmd+Option+F7	Show Usages
Ctrl+Click	Cmd+Click	Go to Declaration

Editing

Windows/Linux	macOS	Description
Ctrl+Space	Ctrl+Space	Basic Code Completion
Ctrl+Shift+Space	Ctrl+Shift+Space	Smart Code Completion
Ctrl+Alt+Space	Ctrl+Option+Space	Class Name Completion
Ctrl+Shift+Enter	Cmd+Shift+Enter	Complete Current Statement
Ctrl+P	Cmd+P	Parameter Info
Ctrl+Q	Ctrl+J	Quick Documentation
Shift+F1	Shift+F1	External Documentation
Ctrl+F1	Cmd+F1	Show Error Description
Alt+Insert	Cmd+N	Generate Code
Ctrl+O	Ctrl+O	Override Methods

Code Formatting

Windows/Linux	macOS	Description
Ctrl+Alt+L	Cmd+Option+L	Reformat Code
Ctrl+Alt+O	Ctrl+Option+O	Optimize Imports
Ctrl+Alt+I	Ctrl+Option+I	Auto-Indent Lines
Tab	Tab	Indent Selection
Shift+Tab	Shift+Tab	Unindent Selection
Ctrl+Alt+T	Cmd+Option+T	Surround With
Ctrl+/	Cmd+/	Comment/Uncomment Line
Ctrl+Shift+/	Cmd+Shift+/	Comment/Uncomment Block

Refactoring

Windows/Linux	macOS	Description
F5	F5	Copy
F6	F6	Move
Shift+F6	Shift+F6	Rename
Ctrl+F6	Cmd+F6	Change Signature
Ctrl+Alt+N	Cmd+Option+N	Inline
Ctrl+Alt+M	Cmd+Option+M	Extract Method
Ctrl+Alt+V	Cmd+Option+V	Extract Variable
Ctrl+Alt+F	Cmd+Option+F	Extract Field
Ctrl+Alt+C	Cmd+Option+C	Extract Constant
Ctrl+Alt+P	Cmd+Option+P	Extract Parameter

Running and Debugging

Windows/Linux	macOS	Description
Shift+F10	Ctrl+R	Run
Shift+F9	Ctrl+D	Debug
Ctrl+Shift+F10	Ctrl+Shift+R	Run Context Configuration
Ctrl+Shift+F9	Ctrl+Shift+D	Debug Context Configuration
F8	F8	Step Over
F7	F7	Step Into
Shift+F7	Shift+F7	Smart Step Into
Shift+F8	Shift+F8	Step Out
Alt+F9	Option+F9	Run to Cursor
Alt+F8	Option+F8	Evaluate Expression

JavaScript/TypeScript Specific

Windows/Linux	macOS	Description
Ctrl+Shift+F10	Ctrl+Shift+R	Run JavaScript File
Alt+Shift+F10	Option+Shift+R	Run Node.js
Ctrl+Shift+I	Cmd+Shift+I	Auto Import
Ctrl+Alt+Shift+T	Cmd+Option+Shift+T	Refactor This
F2	F2	Next Highlighted Error
Shift+F2	Shift+F2	Previous Highlighted Error

React Development

Windows/Linux	macOS	Description
Ctrl+J	Cmd+J	Insert Live Template
Ctrl+Alt+J	Cmd+Option+J	Surround with Live Template
Ctrl+Shift+A	Cmd+Shift+A	Find Action (React snippets)
rcc + Tab	rcc + Tab	React Class Component
rfc + Tab	rfc + Tab	React Function Component
useState + Tab	useState + Tab	useState Hook
useEffect + Tab	useEffect + Tab	useEffect Hook

Vue.js Development

Windows/Linux	macOS	Description
vue + Tab	vue + Tab	Vue Component Template
vdata + Tab	vdata + Tab	Vue Data Function
vmethod + Tab	vmethod + Tab	Vue Method
vcomputed + Tab	vcomputed + Tab	Vue Computed Property
vwatcher + Tab	vwatcher + Tab	Vue Watcher

Node.js Development

Windows/Linux	macOS	Description
Ctrl+Shift+F10	Ctrl+Shift+R	Run Node.js File
Alt+F12	Option+F12	Terminal
Ctrl+Shift+X	Cmd+Shift+X	Run npm Script
Ctrl+Alt+F12	Cmd+Option+F12	Node.js Console

Testing

Windows/Linux	macOS	Description
Ctrl+Shift+F10	Ctrl+Shift+R	Run Test
Ctrl+Shift+F9	Ctrl+Shift+D	Debug Test
Alt+Shift+F10	Option+Shift+R	Run All Tests
Ctrl+Alt+F6	Cmd+Option+F6	Run Failed Tests

Version Control (Git)

Windows/Linux	macOS	Description
Ctrl+K	Cmd+K	Commit
Ctrl+Shift+K	Cmd+Shift+K	Push
Ctrl+T	Cmd+T	Update Project
Alt+9	Cmd+9	Version Control Tool Window
Ctrl+Alt+Z	Cmd+Option+Z	Rollback

Search and Replace

Windows/Linux	macOS	Description
Ctrl+F	Cmd+F	Find
F3	Cmd+G	Find Next
Shift+F3	Cmd+Shift+G	Find Previous
Ctrl+R	Cmd+R	Replace
Ctrl+Shift+F	Cmd+Shift+F	Find in Path
Ctrl+Shift+R	Cmd+Shift+R	Replace in Path

Tool Windows

Windows/Linux	macOS	Description
Alt+1	Cmd+1	Project Tool Window
Alt+2	Cmd+2	Favorites
Alt+3	Cmd+3	Find Tool Window
Alt+4	Cmd+4	Run Tool Window
Alt+5	Cmd+5	Debug Tool Window
Alt+6	Cmd+6	TODO Tool Window
Alt+7	Cmd+7	Structure Tool Window
Alt+8	Cmd+8	Services Tool Window
Alt+9	Cmd+9	Version Control
Alt+0	Cmd+0	Messages Tool Window

Best Practices

Project Setup

1. Configure Node.js: File → Settings → Languages & Frameworks → Node.js
2. Enable TypeScript: File → Settings → Languages & Frameworks → TypeScript
3. Set Code Style: File → Settings → Editor → Code Style → JavaScript/TypeScript

React Development

1. Install React Plugin: File → Settings → Plugins → React
2. Configure JSX: File → Settings → Languages & Frameworks → JavaScript → React JSX
3. Enable ES6: File → Settings → Languages & Frameworks → JavaScript → ECMAScript 6+

Debugging Tips

1. Browser Debugging: Use built-in Chrome DevTools integration
2. Node.js Debugging: Configure Node.js run configurations
3. Source Maps: Enable source map support for debugging transpiled code

Performance Optimization

1. Exclude Folders: Mark node_modules as excluded
2. Power Save Mode: Enable for better battery life
3. Memory Settings: Increase heap size for large projects