Novedades de WebStorm 2021.2

¡Los usuarios nos pedían que mejoráramos la funcionalidad Live Edit y lo hemos hecho! WebStorm ahora puede actualizar de forma automática las páginas en un navegador a medida que edita y guarda sus archivos HTML, CSS y JavaScript. Para comenzar, abra un archivo HTML en el editor, coloque el cursor sobre él y haga clic en el icono del navegador que quiera usar; todos los navegadores son compatibles.

¿Le gusta realizar determinadas operaciones al guardar? ¡WebStorm 2021.2 ahora admite este flujo de trabajo correctamente! Hemos rediseñado todas las funcionalidades existentes, las hemos recopilado en un único lugar y las hemos mejorado con algunas opciones nuevas, como la posibilidad de reformatear el código y optimizar las importaciones al guardar.

¿Sabía que WebStorm puede añadir las declaraciones de importación que falten a medida que completa los símbolos de ES6? Ahora puede hacer lo mismo para los módulos CommonJS: las importaciones require se pueden insertar con la finalización de código.

WebStorm ahora admite correctamente la sintaxis de TypeScript utilizada en los comentarios JSDoc en sus archivos .js. Hemos rediseñado y ampliado la compatibilidad existente y hemos solucionado muchos problemas conocidos.

¿Necesita añadir rápidamente una función de flecha a su código? Ahora puede envolver un bloque de código con una función de flecha usando Ctrl+Alt+J. También puede escribir arf y pulsar Tab para expandir la plantilla y añadir una función de flecha vacía.

La pestaña de vista previa, que solía funcionar únicamente para la vista Project, ahora funciona cuando depura su aplicación. Para activarla, vaya a Preferences / Settings | Editor | General | Editor Tabs y marque la casilla de verificación Enable preview tab. Esto le ayudará a evitar saturar el editor con varios archivos, ya que WebStorm abrirá los archivos sucesivamente en una pestaña.

Ya no tiene que perder el tiempo refactorizando valores y funciones useState uno por uno; ¡ahora WebStorm puede renombrarlos por usted! Coloque el signo de intercalación en un valor de estado y pulse Mayús+F6 o vaya a Refactor | Rename desde el menú contextual del botón derecho.

Añadir nuevas dependencias de proyectos a package.json se ha vuelto aún más fácil, ya que la finalización de código ahora funciona para los paquetes npm privados. WebStorm le permite comprobar información sobre las versiones más recientes del paquete, al igual que lo hace con los paquetes públicos.

¿Quiere ejecutar pruebas para verificar su código antes de confirmarlo? Hemos añadido una nueva opción para que pueda hacerlo. Haga clic en el icono de la rueda dentada en la ventana de herramientas Commit, seleccione Run Tests y elija la configuración de ejecución deseada. WebStorm probará sus archivos y le avisará de cualquier problema.

A partir de esta versión, puede disfrutar de una interfaz de usuario de WebStorm completamente traducida a chino, coreano y japonés. Las traducciones están disponibles como complementos de paquetes de idioma no incluidos, que pueden instalarse en WebStorm desde Preferences / Settings | Plugins.

Ahora es más fácil reorganizar las ventanas de herramientas. Coloque el cursor sobre la parte superior de la ventana de herramientas que desea mover y, a continuación, arrástrela hasta donde quiera y suéltela allí. Esto funcionará también si desea separar una ventana de herramientas de la ventana principal de WebStorm; simplemente tiene que arrastrarla fuera del marco del IDE.

¿Sabía que puede asignar iconos personalizados a sus proyectos? Hemos simplificado este proceso. Haga clic con el botón derecho en un proyecto en la pantalla Welcome de WebStorm y, a continuación, seleccione la opción Change Project Icon… y suba el archivo SVG que quiera asociar a dicho proyecto.

Ya no se perderá ninguna actualización crítica de los productos desde Toolbox App. WebStorm le informará si hay una nueva versión disponible para su descarga y le dará la opción de hacer la actualización; solo tiene que asegurarse de tener la versión 1.20.8804 o posterior de Toolbox App.

Ahora hay un nodo con ajustes avanzados en su cuadro de diálogo Preferences / Settings. En él puede encontrar algunas opciones de configuración nuevas, incluida la posibilidad de establecer un margen izquierdo en el modo sin distracciones. Además, ahora puede saltar más rápido entre los nodos abiertos recientemente: simplemente tiene que usar las flechas de la esquina derecha del cuadro de diálogo.