WebStorm 2019.3: lanzamiento más rápido, soporte mejorado para Vue.js y otras mejoras

Hola a todos!

Durante mucho tiempo en Habré no hubo publicaciones en el blog del equipo de WebStorm. Bueno, lo arreglaremos, especialmente porque hay una gran razón: acabamos de lanzar la última actualización importante de WebStorm este año.



Si no tiene tiempo para leer el artículo completo, aquí hay algunas palabras sobre lo que apareció en WebStorm 2019.3:

• Hemos realizado un trabajo serio para acelerar el lanzamiento del IDE, y ahora WebStorm 2019.3 muestra una pantalla de bienvenida y abre proyectos indexados anteriormente aproximadamente un 20% más rápido que las versiones anteriores.
• Gracias a la finalización automática de los nombres de las ranuras, la documentación rápida para los caracteres Vue y la compatibilidad con los componentes definidos en archivos separados, ahora puede crear aplicaciones con Vue.js aún más rápido.
• La funcionalidad existente se ha vuelto más conveniente de usar: ahora puede habilitar automáticamente los visores de archivos globales para todos los proyectos nuevos, más rápido para clonar proyectos desde GitHub y más allá.
• La finalización del código para JavaScript y TypeScript se ha vuelto aún más inteligente. Por ejemplo, para nuevas variables, funciones, clases e interfaces, WebStorm ahora solicita nombres adecuados que ya se han utilizado en la misma área, pero que aún no se han definido y marcado como no resueltos.

Esto es solo una parte de las mejoras. Para probarlos, descargue la versión de prueba de 30 días de WebStorm 2019.3 en el sitio web o use la aplicación Toolbox . Los titulares de una suscripción activa a WebStorm o All Products Pack pueden utilizar la versión completa, así como estudiantes y desarrolladores gratuitos de proyectos de código abierto.

Y ahora veamos cada una de las mejoras con más detalle y veamos otros cambios importantes en el producto.

Inicio de entorno de desarrollo más rápido

Uno de los problemas de rendimiento más comunes de WebStorm fue su lanzamiento lento. Hemos dedicado los dos últimos ciclos de lanzamiento a la corrección de este inconveniente, del cual muchos usuarios se quejaron. Como resultado, WebStorm 2019.3 muestra una pantalla de bienvenida y abre proyectos indexados anteriormente mucho más rápido que las versiones anteriores.

¿Qué queremos decir exactamente cuando decimos "más rápido"? Medimos el tiempo de lanzamiento de WebStorm 2019.3 en diferentes sistemas operativos y comparamos estas cifras con el rendimiento de dos versiones anteriores: 2019.1 y 2019.2. Para obtener resultados precisos, utilizamos el mismo proyecto en todas partes: una aplicación React con el archivo app.js abierto en el editor, creado usando create-react-app . Aquí están los resultados que obtuvimos:



En promedio, el tiempo de inicio se redujo en aproximadamente un 20% en comparación con las versiones anteriores, pero los resultados pueden variar según la configuración de red utilizada, el tamaño del espacio de trabajo, la antigüedad de la computadora y la configuración del antivirus.

No planeamos descansar en nuestros laureles: en la versión 2020.1 encontrará varias mejoras significativas más en esta área, incluida la optimización de proyectos de indexación.

Grandes mejoras en el soporte de Vue.js

Además de acelerar el lanzamiento, hemos mejorado significativamente el soporte para Vue.js para que los usuarios de WebStorm puedan crear rápidamente aplicaciones en este marco.

Para empezar, la finalización del código en los proyectos Vue.js se ha vuelto mucho mejor. Primero, WebStorm ahora puede completar automáticamente los nombres de las ranuras. Esto funciona para los nombres de ranuras definidos tanto en los componentes del proyecto como en las bibliotecas de componentes Vuetify, Quasar y BootstrapVue. En segundo lugar, WebStorm ahora comprende la relación entre las partes de un componente ubicado en diferentes archivos y ofrece opciones de autocompletado para parámetros de entrada, datos y métodos, incluso si no están definidos en el mismo archivo vue.



Finalmente, ahora puede ver la documentación de los componentes y directivas definidos en Vue.js y algunas de las bibliotecas de componentes populares directamente en WebStorm. Para hacer esto, simplemente desplace el mouse sobre el nombre del componente o directiva en su código y presione F1 .

Consejos para nuevos nombres de personajes

Tan pronto como comience a agregar nombres de variables o parámetros en archivos JavaScript o TypeScript, WebStorm le indicará algunas opciones adecuadas basadas en los nombres de clases, interfaces y alias de tipo definidos en su proyecto, así como las bibliotecas y dependencias estándar que utiliza.



Para las nuevas variables, funciones, clases e interfaces, también verá sugerencias para nombres que ya se han utilizado en el mismo ámbito, pero que aún no se han definido y marcado como no resueltos .

Por ejemplo, si desea utilizar alguna función nueva, primero puede llamarla y luego escribir function para agregarla y ver el nombre sugerido. Por supuesto, también puede pasar el mouse sobre su lugar de uso, presionar Alt-Enter y aplicar la función de creación "corrección rápida".

Soporte para las últimas versiones de tecnologías de uso común.

En WebStorm 2019.3 encontrará soporte incorporado para la funcionalidad principal de TypeScript 3.7, que incluye encadenamiento opcional , fusión nula y firmas de afirmación , que lo ayudarán a trabajar con ellas de manera más eficiente. Pero eso no es todo: también hemos agregado soporte para la funcionalidad Plug'n'Play, disponible en la próxima versión de Yarn 2.

Finalización de código para bibliotecas CSS agregadas a través de CDN

¿Usa Bootstrap u otra biblioteca CSS conectada a través de CDN en un archivo HTML? Ahora WebStorm ofrecerá opciones de autocompletado para los nombres de clase de la biblioteca que está utilizando, sin obligarlo a agregar sus fuentes al proyecto. Para habilitar esta funcionalidad, desplace el mouse sobre el enlace CDN en el archivo HTML, presione Alt-Intro y seleccione Descargar biblioteca .

Una acción para ejecutar herramientas y configuraciones

Con la nueva acción Ejecutar cualquier cosa , puede iniciar rápidamente configuraciones y herramientas como npm y Yarn, así como abrir proyectos recientes. Para usarlo, presione Ctrl dos veces o haga clic en el icono en el lado derecho de la barra de navegación.

Conecte visores de archivos globales para todos los proyectos nuevos

Si utiliza herramientas como Prettier en su proyecto y las configura con el visor de archivos, es probable que desee aplicar automáticamente la configuración existente a todos los proyectos nuevos. En WebStorm 2019.3, esto se puede lograr habilitando el visor de archivos global de forma predeterminada. Para habilitarlos, vaya a Preferencias / Configuración | Herramientas | Observadores de archivos , agregue un nuevo visor de archivos global y marque Activado .

Interfaz actualizada para la clonación de proyectos.

Ahora, cuando clona un proyecto desde un sistema de control de versiones, verá un cuadro de diálogo Obtener desde el Control de versiones actualizado. El objetivo principal de esta actualización es mejorar la experiencia de obtener proyectos con GitHub. Ahora puede seleccionar GitHub en el lado izquierdo del cuadro de diálogo e iniciar sesión en su cuenta directamente desde el cuadro de diálogo. Después de eso, puede explorar la lista de repositorios en su cuenta y en las organizaciones a las que pertenece y encontrar la que desea clonar.



Eso es todo por una vez. ¡Gracias por leer hasta el final! Puede obtener aún más detalles de la publicación del blog de lanzamiento (en inglés). Preguntas, deseos, informes de errores y solo pensamientos expresados ​​en los comentarios. Nosotros, como siempre, estaremos encantados de responder.

Equipo JetBrains WebStorm
El impulso para desarrollar