WebStorming
Umfassende WebStorm Shortcuts und Workflows für JavaScript, TypeScript, React, Vue und Node.js Entwicklung.
Allgemeine 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 | |
Bearbeitung
| | 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 Formatierung
| | 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 | |
Herstellung
| | 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 | |
Laufen und Debuggen
| | 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/TypScript
| | 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 Entwicklung
| | 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 Entwicklung
| | 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 Entwicklung
| | 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 | |
Prüfung
| | 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 | |
Versionskontrolle (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 | |
Suchen und Ersetzen
| | 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 | |
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
Projektaufbau
- ** Konfiguration Node.js*: Datei → Einstellungen → Sprachen & Frameworks → Neuheiten
- TypScript aktivieren: Datei → Einstellungen → Sprachen & Frameworks Zurück zur Übersicht
- Set Code Style: Datei → Einstellungen → Editor → Code Style → JavaScript/TypeScript
React Entwicklung
- *Installieren React Plugin: Datei → Einstellungen → Plugins → React
- Konfigurieren JSX: Datei → Einstellungen → Sprachen & Frameworks → JavaScript → JSX
- Enable ES6: Datei → Einstellungen → Sprachen & Frameworks Zurück zur Übersicht → ECMAScript 6+
Debugging Tipps
- *Browser Debugging: Verwenden Sie integrierte Chrome DevTools Integration
- ** Node.js Debugging*: Konfigurieren Node.js Konfigurationen
- *Quellenkarten: Unterstützung von Quellkarten für Debugging transpiled code aktivieren
Leistungsoptimierung
- ** Ausschließen von Ordnern*: Mark node_modules als ausgeschlossen
- Power Sparmodus: Ermöglicht eine bessere Akkulaufzeit
- *Memory Settings: Heapgröße für große Projekte erhöhen