Introducción a WebStorm

⚠️ Este es solo un primer contacto con WebStorm. Es más potente y complejo que VSCode, y por eso no es la opción de entrada del programa. Aun así, ahora que JetBrains lo ofrece gratis para proyectos no comerciales, y con acceso ilimitado a su IA integrada, es una alternativa ideal para trabajar con FrontendLeap. Si decides usarlo, este fundamental te dará lo esencial para empezar. Más adelante veremos funcionalidades avanzadas como depuración, testing o integración con Git.

¿Qué es WebStorm?

• WebStorm es un IDE profesional creado por JetBrains, especializado en desarrollo web frontend y JavaScript.
• A diferencia de VSCode, que es un editor de texto muy ampliable, WebStorm nace como una herramienta integral todo en uno, con funcionalidades avanzadas listas desde el primer momento.
• Ahora, WebStorm es gratuito para proyectos no comerciales, incluyendo los que realices dentro de FrontendLeap.

¿Por qué usar WebStorm?

• Entorno más robusto: WebStorm viene con análisis de código, refactorización, navegación y testing integrados.
• IA integrada de JetBrains, gratuita e ilimitada para tareas básicas como generación de código o autocompletado inteligente.
• Mayor control y precisión en proyectos grandes o avanzados (útil cuando pases a JS o TS).
• Menos necesidad de instalar extensiones.
• Soporte nativo para tecnologías modernas (React, Vue, Node, etc.).
• Ideal si vienes de otros entornos JetBrains (como IntelliJ).

Características clave para principiantes

• Resaltado de sintaxis y autocompletado avanzado por defecto.
• Navegación rápida por el proyecto (Shift + Shift).
• Refactorizaciones inteligentes (Rename, Extract Method, etc.).
• Soporte excelente para HTML, CSS, JS y TypeScript.
• Live Templates para escribir código repetitivo más rápido.

Primeros pasos en WebStorm

• Descarga desde jetbrains.com/webstorm
• Crea una cuenta gratuita o accede con tu cuenta de GitHub.
• Selecciona el plan gratuito para proyectos no comerciales.
• Configura el tema, la fuente y los atajos. Puedes importar atajos de VSCode si vienes de ahí.

Atajos básicos

• Shift + Shift: Buscar todo (archivos, configuraciones, acciones…).
• Ctrl/Cmd + E: Archivos recientes.
• Ctrl/Cmd + B: Ir a la declaración de una función/variable.
• Alt + Enter: Sugerencias inteligentes (inspecciones y correcciones).
• Cmd/Ctrl + P: Mostrar parámetros de una función.
• Cmd/Ctrl + / y Shift + Cmd/Ctrl + /: Comentar línea o bloque.
• Terminal integrada: Alt + F12.

Comparativa rápida: VSCode vs WebStorm

Buenas prácticas

• Usa siempre "Find Action" (Shift + Shift) si no recuerdas cómo se hace algo.
• Dedica unos minutos a familiarizarte con los atajos desde "Keymap".
• Activa "Power Save Mode" si estás en un equipo con pocos recursos.

Recursos útiles

• Guía oficial de WebStorm
• Licencia gratuita para no comerciales}