He estado usando WebStormSe abre en una nueva pestaña y otros IDEs de JetBrains desde 2016. Cuando programaba en Java durante mi Formación Profesional, mis compañeros y mi profesor usaban EclipseSe abre en una nueva pestaña. Sin embargo, tras investigar un poco, decidí decantarme por JetBrainsSe abre en una nueva pestaña y su potente IntelliJ IDEASe abre en una nueva pestaña.
Tras terminar mis estudios, me centré en el Desarrollo Web. Empecé a programar con Sublime TextSe abre en una nueva pestaña, luego pasé a AtomSe abre en una nueva pestaña y poco después a VS CodeSe abre en una nueva pestaña en cuanto salió.
Cuando me contrataron en Autentia, y tras ver que todo el mundo allí usaba JetBrains (bueno, casi todos), decidí darle una oportunidad a WebstormSe abre en una nueva pestaña. Fue un desafío, e incluso volví momentáneamente a VSCode durante un par de meses, pero tras un increíble taller sobre Refactorización con IDEs de JetBrains impartido por Carlos BléSe abre en una nueva pestaña, sentí que realmente me estaba perdiendo algo.
“”Estaba pasando de un Editor de Texto a un IDE
Y desde entonces, nunca miré atrás. Me cuido mucho de no identificarme con las herramientas que utilizo, ya que quiero usar la mejor herramienta para cada trabajo. Y para mí, si te dedicas al Desarrollo de Software, JetBrains es la mejor herramienta. Permíteme mostrarte por qué.
Como esta entrada de blog contiene un montón de atajos, es posible que desees cambiar entre Windows y macOS para obtener los atajos específicos de tu sistema operativo.
Cambiará los atajos como este: Option + A
Empecemos.
Foco
Para mí, el foco es uno de mis mayores activos, y cuando programo, quiero favorecer mi entorno de trabajo tanto como sea posible para facilitar la entrada en la zona?. Para ello, suelo programar en el Modo ZenSe abre en una nueva pestaña, que es uno de sus modos de presentación.
Si vas a dar una presentación y mostrar código, utiliza el Modo de Presentación. Puedes activarlo con Ctrl + `
Con el modo de presentación verás el IDE con una fuente más grande y menos elementos para que tu audiencia pueda centrarse en el código.
El Modo Zen oculta todas las barras de herramientas, iconos y pestañas. Esto elimina el desorden visual y te obliga a aprender atajos de teclado porque no hay demasiadas cosas en las que hacer clic.
Aquí está el antes:
Y aquí el después:
Ahora puedes centrarte totalmente en el código.
Sin Pestañas
He desactivado totalmente las pestañas, y tú también deberías hacerlo.
He descubierto que desactivar las pestañas reduce la sobrecarga de tareas; además, puedes usar Cmd + E para abrir archivos recientes de todos modos, que es mi método preferido de navegación.
Al comenzar una nueva tarea o al cambiar de contexto de programación, borro todo el listado de archivos recientes. Para hacerlo, abro los Archivos Recientes con Cmd + E, luego selecciono todos (para unos pocos) con Cmd + A y pulso Borrar. Esto no borra realmente los archivos del sistema, solo del panel de Archivos Recientes.
Navegación de Herramientas
Una de las cosas que más aprecio de un IDE es que tiene todas las herramientas que necesito integradas, como GitSe abre en una nueva pestaña o el Chat de IASe abre en una nueva pestaña. Y puedo activarlas y abrirlas directamente con el teclado.
Para abrir paneles específicos, utilizo Cmd + [Número]. Aquí está la lista de paneles y sus números correspondientes que utilizo:
| Ventana | Comando |
|---|---|
| Commit | Cmd + 0 |
| Proyecto | Cmd + 1 |
| Marcadores | Cmd + 2 |
| Buscar | Cmd + 3 |
| Ejecutar | Cmd + 4 |
| Depurar | Cmd + 5 |
| Problemas | Cmd + 6 |
| Chat de IA | Cmd + 7 |
| Servicios | Cmd + 8 |
| Git | Cmd + 9 |
No utilizo tanto la Herramienta de EstructuraSe abre en una nueva pestaña, que por defecto está en Cmd + 7, así que la cambié por el Chat de IA.
Una característica útil que cabe destacar es que si quieres ocultar todos los paneles para volver al código, puedes hacerlo usando Shift + Esc o Cmd + Shift + F12 para ocultar todos los paneles.
A veces es necesario redimensionar los paneles y, por supuesto, el IDE permite realizar este redimensionamiento sin ratón utilizando Cmd + Option + Izquierda/Derecha.
Pantallas Divididas
La pantalla dividida es una función que utilizo casi todos los días; me permite comparar código, hacer TDD? o desarrollar UI?.
He creado atajos personalizados Ctrl + Cmd + V/H para divisiones Verticales o Horizontales. También he añadido Option + Tab para alternar entre las diferentes divisiones.
Puedes crear la Espiral de Fibonacci usando este atajo. ¿No me crees? ¡Pruébalo!
Para utilizar las teclas de flecha para navegar por el panel del árbol con facilidad, activo Always Select Opened File (Seleccionar siempre el archivo abierto) en los ajustes de vista del Proyecto para que el árbol de archivos refleje siempre la ventana activa del editor.
Esto es muy práctico cuando abres un archivo a través de Cmd + E porque cuando luego enfocas el Panel de Proyecto con Cmd + 1 puedes abrir archivos adyacentes usando las teclas arriba y abajo.
Aquí tienes un vídeo de a qué me refiero:
Ahora que hemos aprendido a usar las Herramientas y las Ventanas, pasemos a las Acciones.
Acciones Esenciales
Buscar en todas partes Shift + Shift es el único atajo que realmente necesitas conocer al principio, ya que puedes usarlo para encontrar otros atajos, clases, archivos y símbolos?.
Sin embargo, es posible que quieras ser más explícito con lo que estás buscando, por lo que puedes utilizar diferentes métodos de búsqueda:
- Buscar Acción: Usa
Cmd + Shift + A - Buscar Archivo: Usa
Cmd + Shift + O - Buscar Clase: Usa
Cmd + O
Hablando de acciones esenciales, sin duda deberías remapear la tecla de bloqueo de mayúsculas a control.
Uno de mis mentores me sugirió una vez cambiar la tecla Bloq Mayús para que actuara como Control. Pensé que era una locura, pero no, ¡fue una de las recomendaciones más increíbles que he recibido! Este cambio hizo que el uso de los atajos en general fuera más ergonómico.
Ejecución de tareas
Una de mis funciones favoritas es la posibilidad de ejecutar scripts de npm a través de atajos. Esto se hace a través de las Configuraciones de EjecuciónSe abre en una nueva pestaña. Puedes verlo, por ejemplo, en el package.json:
Esos triángulos verdes significan que podemos ejecutar scripts a través del IDE. Podemos hacer clic en ellos o, mejor aún, usar Ctrl + Shift + R para dispararlos.
Puedes (¡y deberías!) guardar las configuraciones que ejecutas con más frecuencia. También puedes reordenarlas, borrarlas y depurarlas.
Lo que es aún más genial es que puedes encontrar diversos disparadores de ejecución por todo el código y en diferentes archivos, por ejemplo, en archivos de prueba.
Me encanta esta función porque me permite practicar mejor TDD. Permíteme explicarte cómo. Siempre que estoy cambiando código después de haber escrito una prueba, me gusta ejecutar la prueba anterior con Ctrl + R, que ejecuta la configuración de ejecución anterior.
- Crear prueba
- Verificar prueba fallida
- Implementar código
- Volver a ejecutar la prueba con
Ctrl + R - Repetir
Increíble.
Plugins
El Marketplace de JetBrainsSe abre en una nueva pestaña es bastante GRANDE. Claro, puede que no sea tan grande como otros, pero siento que todo ya está integrado en el IDE, así que no hay necesidad de instalar demasiados plugins. Estos son algunos plugins que te recomiendo probar:
- Key Promoter XSe abre en una nueva pestaña: Actúa como "ClippitSe abre en una nueva pestaña" para los atajos. Si usas el ratón para una acción, te avisa del atajo de teclado y rastrea con qué frecuencia perdiste la oportunidad de usarlo. ¡Genial para aprender!
- Quokka.jsSe abre en una nueva pestaña: Increíble para archivos Scratch?. Ejecuta JavaScript/TypeScript en tiempo real, mostrando valores y errores directamente junto al código mientras escribes. Lo utilizo para impartir talleres o cursos.
- Code With MeSe abre en una nueva pestaña: Útil para el pair programming.
- camelCaseSe abre en una nueva pestaña: Lo uso bastante a menudo para cambiar entre diferentes estilos (kebab-case, SNAKE_CASE, PascalCase, camelCase, snake_case o space case).
Pero aparte de estos, realmente no siento que necesite configurar mi IDE con toneladas de extensiones de terceros que ralenticen el rendimiento.
Multi-cursor
Esta es una herramienta tan fantástica que hay toda una charla de un compañero mío sobre ella:
Otros consejos y trucos
El increíble número de funciones del IDE es tan grande que meterlo todo en una sección con descripción haría que este post fuera bastante largo. Así que esta es una lista rápida de otros consejos y trucos. ¡Disfrútalos!
- Plantillas en vivo (Live Templates): Crea fragmentos personalizados (por ejemplo, para importaciones o estructuras de pruebas) para evitar escribir código repetitivo una y otra vez.
- Emmet: Utiliza EmmetSe abre en una nueva pestaña para la ejecución de HTML/CSS. Escribe abreviaturas y pulsa
Tabpara expandir estructuras de etiquetas complejas al instante. - Envolver y Desenvolver:
- Desenvolver (Unwrap): Usa
Option + Enteren una etiqueta para eliminarla manteniendo el contenido. - Envolver (Wrap): Usa
Cmd + Option + J(Surround with Emmet) para envolver bloques de código en nuevas etiquetas. - Activa/desactiva puntos de interrupción con
Cmd + F8. - Ejecuta en modo depuración con
Ctrl + Shift + D. - Resuelve conflictos de Git usando la función integrada "Magic Wand" que automatiza la resolución de conflictos sencillos.
- Usa
Ctrl + V(VCS Operations) para acceder rápidamente a acciones de Git como commit, ramas o historial. - Modo LightEdit: Usa la herramienta de línea de comandos para abrir archivos en modo "LightEdit" para ediciones rápidas sin cargar todo el IDE
webstorm -e ..
Conclusión
Simplemente ️ Webstorm, y espero haberte mostrado por qué en este post.