Novedades de WebStorm 2023.1

¡La tan esperada compatibilidad con Astro ha llegado a WebStorm! Para ello, deberá contar con el nuevo complemento Astro, que puede instalarse desde Preferences/Settings | Plugins. El complemento ofrece funciones básicas, como el resaltado de sintaxis, la finalización de código con importaciones automáticas, refactorizaciones, navegación, formateo correcto y mucho más.

Hemos añadido la compatibilidad con TypeScript en las plantillas Vue. Se activa cuando se establece el atributo lang de una etiqueta script en ts. Anteriormente, JavaScript se utilizaba independientemente del atributo lang de la etiqueta script. WebStorm proporcionará ahora compatibilidad con inline casting, acotado de tipos mejorado, e información correcta sobre tipos inferidos en la documentación rápida en plantillas de Vue Single-File Components.

Hay otra mejora específica de Vue en esta versión que merece la pena mencionar. Ahora obtendrá finalización de código para sus eventos de componentes personalizados en las plantillas Vue. Esto funciona de forma idéntica tanto en JavaScript como en TypeScript.

Cuando copie y pegue código de un archivo a otro, WebStorm añade automáticamente todas las importaciones necesarias. Esto ocurría anteriormente con JavaScript común, los lenguajes TypeScript y las plantillas React. En WebStorm 2023.1 ahora también funciona para las plantillas Vue, Svelte, Astro y Angular.

Hemos añadido una nueva forma de mostrar el tipo esperado para el prop de un componente. Si pulsa Ctrl+P donde se pasan props a un componente, aparecerá una ventana emergente con información del tipo. Antes, esta información solo estaba disponible al pasar por encima el ratón, lo que resultaba incómodo para los usuarios que usan principalmente el teclado.

WebStorm automáticamente añadirá una importación para símbolos globales y exportados en sus componentes al finalizar el código cuando esté trabajando en plantillas Angular. El IDE también es compatible con la directiva NgoptimizedImage de Angular 15 proporcionando una inspección que sugiere utilizar ngSrc en lugar de src para img.

Ahora puede ejecutar todas las pruebas de una carpeta específica a través del menú contextual del botón derecho del ratón. Esta característica ha funcionado con Vitest, y ahora también la hemos implementado para Jest.

WebStorm ahora transformará sus cadenas entre comillas simples o dobles en literales de plantilla automáticamente siempre que escriba ${. Esto funciona tanto para cadenas sin formato como para propiedades JSX.

Hemos mejorado el comportamiento del IDE cuando se añaden autoimportaciones de diferentes bibliotecas con el mismo nombre de elemento exportado. Las importaciones automáticas se añaden ahora basándose en las importaciones existentes en el proyecto. Si necesita añadir una importación para un elemento de otra biblioteca, deberá añadir manualmente la declaración de importación. En WebStorm aparecerá una ventana emergente como en versiones anteriores.

Hemos unificado el comportamiento de importación de TypeScript y JavaScript. En TypeScript, se le mostrarán las opciones de importación en las acciones contextuales como lo haría en JavaScript. Puede abrir las acciones contextuales pulsando Alt+Intro. Los ajustes unificados se encuentran en Preferences / Settings | Editor | General | Auto Import.

En esta versión, hemos añadido la compatibilidad con opciones de configuración, como la finalización de nombres de clase personalizados en la opción classAttributes, o experimentales como tailwindCSS.experimental.configFile. Puede configurar estas opciones en Preferences / Settings | Languages & Frameworks | Style Sheets | Tailwind CSS.

WebStorm 2021.3 introdujo la finalización para HTML que le mostraría nombres de etiquetas o abreviaturas a medida que escribe. Este comportamiento puede distraerle al introducir texto sin formato en HTML, por lo que hemos añadido una opción para desactivarlo. Encontrará la nueva opción en Preferences / Settings | Editor | General | Code Completion.

Ahora puede utilizar un arreglo rápido para corregir el formato de las tablas Markdown. Además, la nueva acción del editor Fill Paragraph le facilita la división de fragmentos largos de texto en varias líneas de igual anchura. Por último, hemos introducido una página dedicada a las opciones de configuración de Markdown en Preferences / Settings | Editor | General | Smart Keys. Consulte este artículo del blog para obtener más información.

Hay una nueva opción en Preferences / Settings | Editor | Code Style | Style Sheets | CSS | PostCSS que le permite especificar qué estilo de comentario de línea se utiliza en sus archivos PostCSS. Puede comentar líneas utilizando Ctrl+/, y se utilizará el estilo de comentario de línea que haya elegido.

El año pasado introdujimos una nueva IU más minimalista para WebStorm y otros IDE de JetBrains. Hemos seguido perfeccionando la nueva interfaz de usuario basándonos en sus comentarios y le invitamos a darle otra oportunidad. Puede hacerlo en Preferences / Settings | Appearance & Behavior | New UI. Siga leyendo para conocer los principales cambios en la interfaz de usuario que se han introducido en esta versión.

WebStorm 2023.1 le permite dividir el área de las ventanas de herramientas y disponerlas de modo que pueda ver dos a la vez. Arrastre el icono de la ventana de herramientas desde la barra lateral y suéltelo bajo el separador. Como alternativa, puede hacer clic con el botón derecho del ratón en el icono y asignar la nueva ubicación de la ventana de herramientas mediante la acción Move to.

Para facilitar el trabajo en pantallas más pequeñas, hemos introducido el modo compacto. Presenta un aspecto más consolidado, con una barra de herramientas y un encabezado de ventana de herramientas más limpios, espacios y caracteres de relleno reducidos e iconos y botones más pequeños. Para activar el nuevo modo, vaya a View | Appearance | Compact Mode en el menú principal.

Hemos implementado una de las peticiones más populares en la nueva interfaz de usuario: pestañas de proyecto para usuarios de macOS. Si tiene varios proyectos abiertos, ahora puede cambiar entre ellos utilizando las pestañas de proyecto que aparecen debajo de la barra de herramientas principal.

En respuesta a los comentarios que hemos recibido sobre la nueva interfaz de usuario del IDE, hemos rediseñado el widget Run de la cabecera de la ventana principal para que sea menos molesto y más agradable a la vista.

Hemos añadido algunas funcionalidades populares que los usuarios echaban de menos en la nueva interfaz de usuario. Por ejemplo, el selector Show Hidden Tabs ha vuelto junto con la acción Fetch en la ventana emergente Branches. Además, hemos introducido mejoras en los modos Distraction Free y Zen ocultando los elementos principales de la barra de herramientas y mostrando el nombre del archivo actual.

Ahora es posible usar el zoom en WebStorm para aumentar o disminuir el tamaño de todos los elementos de la interfaz de usuario a la vez. En el menú principal, seleccione View | Appearance | Switch Zoom IDE. También puede pulsar Ctrl+` y ajustar la escala del IDE mediante Zoom desde ahí.

Hemos introducido una nueva opción de diseño que le permite unificar la anchura de las ventanas de herramientas laterales o conservar la posibilidad de ajustar sus tamaños a medida que personaliza su diseño. La nueva casilla de verificación Remember size for each tool window está disponible en Preferences / Settings | Appearance & Behavior | Appearance | Tool Windows.

WebStorm 2023.1 añade una opción para predefinir el comportamiento de Actions on Save para nuevos proyectos. Para ello, vaya a File | New Projects Setup | Preferences / Settings For New Projects | Tools | Actions on Save y seleccione qué acciones desea que se activen al guardar los cambios en sus futuros proyectos.

Para ofrecerle resultados de búsqueda más relevantes y precisos, seguimos esforzándonos por integrar la clasificación mediante aprendizaje automático en la funcionalidad Search Everywhere (Doble Mayús). El algoritmo de clasificación de la pestaña Classes ahora también funciona por aprendizaje automático de forma predeterminada, junto con los resultados de las pestañas Actions y Files.

Hemos añadido una opción para restaurar el comportamiento de copiar-cortar-pegar a como era en versiones anteriores de WebStorm. Esto le permitirá pegar el contenido del portapapeles en el signo de intercalación, en lugar de pegarlo en la línea anterior. Esta opción se encuentra en el menú desplegable When pasting a line copied with no selection en Preferences / Settings | Advanced Settings | Editor.

Hemos mejorado la experiencia de arranque del IDE realizando el proceso de Scanning files to index... en modo inteligente, lo que debería reducir los retrasos causados por la espera de la indexación en el arranque. Al abrir un proyecto, WebStorm utilizará las cachés existentes del proyecto de una sesión anterior y buscará cualquier archivo nuevo para indexarlo. El IDE estará listo para ponerse en marcha si no encuentra cambios durante la búsqueda.

WebStorm 2023.1 incluye una nueva notificación que aparece cuando se activa Microsoft Defender con protección en tiempo real. WebStorm sugiere añadir ciertas carpetas a la lista de exclusiones de Defender, ya que estas comprobaciones antivirus pueden disminuir significativamente la velocidad del IDE.

Para simplificar el proceso de revisión de código dentro del IDE, hemos rediseñado la ventana de herramientas Pull Request. Ahora cuenta con una pestaña dedicada para cada solicitud de incorporación de cambios que abra. La pestaña muestra instantáneamente la lista de archivos modificados, y encontrará un botón específico para ejecutar la acción más relevante según el estado actual de la solicitud de incorporación de cambios.

Con WebStorm 2023.1, hemos implementado el autocompletado en la ventana emergente Create New Branch. Una vez que empiece a escribir un nombre para su nueva rama, el IDE le sugerirá prefijos relevantes basándose en los nombres de las ramas locales existentes.

Hemos mejorado la usabilidad de la ventana emergente Branches. Navegar entre ramas es ahora más fácil, ya que están agrupadas y almacenadas en listas desplegables.

Para que el seguimiento de los cambios en los archivos resulte más cómodo, hemos añadido sugerencias de color a la ventana de herramientas Structure. Los nombres de los objetos modificados se vuelven ahora azules, mientras que los nombres de los nuevos objetos añadidos aparecen en la ventana de herramientas en verde.

Hemos reelaborado el comportamiento de las comprobaciones de confirmación de Git y Mercurial para acelerar el proceso general de confirmación. Ahora las comprobaciones se realizan en segundo plano después de confirmar, pero antes de enviar.