WebStorm

"Clase de la hoja"

########################################################################################################################################################################################################################################################## Copiar todos los comandos

########################################################################################################################################################################################################################################################## Generar PDF seleccionado/button

■/div titulada

Atajos y flujos de trabajo completos de WebStorm para el desarrollo de JavaScript, TypeScript, React, Vue y Node.js.

Atajos generales

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

Navegación

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

Edición

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

Formato de código

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

Corriendo y depurando

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

Pruebas

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

Control de Versión (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

Búsqueda y sustitución

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

Herramienta 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

Buenas prácticas

Configuración de proyectos

1. Configure Node.js: Archivo → Ajustes → Idiomas & Marcos → Node.js
2. Escribir texto: Archivo → Ajustes → Idiomas & Marcos → TipoScript
3. Set Code Style: Archivo → Configuración → Editor → Code Style → JavaScript/TypeScript

React Development

1. Install React Plugin: Archivo → Ajustes → Plugins → React
2. Configure JSX: File → Ajustes → Idiomas & Marcos → JavaScript → React JSX
3. ** Habilitar ES6**: Archivo → Ajustes → Idiomas & Marcos → JavaScript → ECMAScript 6+

Consejos de depuración

1. Browser Debugging: Uso integrado Chrome DevTools integración
2. Node.js Debugging: Configuración Node.js
3. Mapa web: Activar el apoyo del mapa fuente para depurar el código transpilado

Optimización del rendimiento

1. Exclude Folders: Mark node_modules as excluded
2. Power Save Mode: Permite una mejor vida de la batería
3. ** Ajustes de memoria**: Aumentar el tamaño del montón para grandes proyectos