Novedades de WebStorm 2020.3
¡Un diseño incluso más pulido, compatibilidad con Tailwind CSS, una experiencia de depuración mejorada, compatibilidad con pruebas de Git, nuevas funcionalidades de navegación y mucho más!
Diseño
Nueva pantalla de bienvenida
¡Hemos actualizado la pantalla de bienvenida! No solo puede abrir y crear proyectos desde esta pantalla, sino que también puede modificar los parámetros utilizados más comúnmente, como los temas y las fuentes del IDE.
Tema del IDE sincronizado con la configuración del SO
Ahora puede sincronizar su tema de WebStorm con su configuración de macOS y Windows. Simplemente tiene que ir a Preferences / Settings | Appearance & Behavior | Appearance | Theme y seleccionar la opción Sync with OS. Haga clic en el icono de la rueda dentada situado junto a Sync with OS para seleccionar su tema preferido. También planeamos implementar esto para los usuarios de Linux.
Mejora del trabajo con pestañas
Con la versión 2020.3, hemos facilitado el trabajo con las pestañas. Ahora puede dividir el editor arrastrando y soltando las pestañas o utilizando la acción Open in Right Split. Además, las pestañas ancladas ahora se marcan con un icono especial y se muestran al principio de la barra de pestañas para que pueda encontrarlas antes.
Modo lector
WebStorm tiene un nuevo modo que facilita la lectura de los archivos de solo lectura y de su biblioteca. Entra en él para mostrar los comentarios, habilitar las ligaduras de fuentes, etc.
Plantillas de archivos múltiples
Hemos implementado la posibilidad de añadir plantillas de archivos personalizadas que crean varios archivos al mismo tiempo. Esto puede resultar útil si, por ejemplo, necesita añadir un archivo .js junto con un archivo de prueba correspondiente.
Archivos abiertos con WebStorm
Configurar WebStorm para que abra tipos de archivos específicos de forma predeterminada ahora es muy sencillo. Vaya a Preferences / Settings | Editor | File Types y haga clic en el botón Associate File Types with WebStorm.
Marcos de trabajo y tecnologías
Compatibilidad con Tailwind CSS
¡WebStorm ahora puede ayudarle a trabajar con Tailwind CSS de un modo más productivo! Autocompletará sus clases Tailwind, le mostrará una vista previa del CSS resultante al pasar el ratón por encima y es compatible con las personalizaciones que haga con los archivos tailwind.config.js.
Crear componentes React a partir de utilizaciones
¿Tiene un componente React sin resolver en su código? Coloque el signo de intercalación en él, presione Alt+Intro y seleccione Create class / function component de la lista. WebStorm creará la construcción de código relevante por usted.
Mejoras en la edición y previsualización de Markdown
Compatibilidad con Mermaid.js, la posibilidad de reformatear sus archivos .md, y desplazamiento automático del panel de vista previa junto con el editor: estos y otros cambios mejorarán considerablemente su experiencia con archivos Markdown en WebStorm.
Compatibilidad básica con configuraciones de webpack complejas
Hemos empezado a añadir la compatibilidad con varias configuraciones de webpack. Vaya a Preferences / Settings | Languages & Frameworks | JavaScript | Webpack para elegir si quiere detectar los archivos de configuración manual o automáticamente.
Mejoras para Vue.js
Hemos corregido una serie de problemas relacionados con Vue 3. Por ejemplo, WebStorm ahora es compatible con la sintaxis de configuración de script. También hemos conseguido que el IDE aplique correctamente las reglas de estilo de código ESLint en los proyectos Vue y hemos mejorado la integración con el servicio de lenguaje TypeScript.
Compatibilidad total con pnpm
WebStorm ahora es totalmente compatible con el gestor de paquetes pnpm, junto con npm y yarn. Durante el último año, hemos implementado progresivamente mejoras en la compatibilidad con pnpm. Con la versión 2020.3, hemos hecho los toques finales.
Javascript y Typescript
Ventanas de herramientas TypeScript y Problems integradas
Hemos integrado el servicio de lenguaje TypeScript en la ventana de herramientas Problems y hemos quitado la ventana de herramientas TypeScript. Hemos hecho este cambio para facilitar la revisión de problemas en su código desde un solo lugar. También hemos movido las acciones disponibles previamente dentro de la ventana de herramientas TypeScript a un widget dedicado en la barra de estado.
Mejor formateo de los literales de plantilla con CSS y HTML
A partir de la versión 2020.3, WebStorm admitirá correctamente el formateo de código para los bloques CSS y HTML multilínea que contengan JavaScript. El IDE aplicará sangrías correctamente cuando añada estos literales de plantilla más complejos o reformatee su código.
Experiencia de depuración mejorada
¡Utilice los consejos interactivos y las inspecciones inline al depurar! Ahora puede hacer clic en un consejo para ver todos los campos que pertenecen a una variable. Además, puede modificar los valores de las variables y añadir expresiones de inspecciones directamente desde el consejo.
Herramientas
Compatibilidad con nuestra herramienta de desarrollo colaborativa
WebStorm 2020.3 admite Code With Me (EAP), nuestra nueva herramienta para el desarrollo colaborativo y la programación en pares. Esta herramienta le permite compartir proyectos con otras personas para trabajar juntos en tiempo real. Para probar Code With Me, instale el complemento correspondiente desde Preferences / Settings | Plugins.
Curso de formación integrado sobre los aspectos básicos de WebStorm
Para ayudarle a familiarizarse con las principales funcionalidades de WebStorm, hemos desarrollado un curso de formación interactivo. Este curso puede ayudarle a aprender a realizar algunas tareas comunes, como la refactorización de código o desplazarse por los proyectos. Puede encontrarlo en la pestaña Learn WebStorm de la pantalla de bienvenida o accediendo a Help | IDE Features Trainer desde el menú principal.
Conversión cURL en el cliente HTTP
Ahora puede exportar una solicitud HTTP a cURL presionando Alt+Intro en el editor de solicitudes HTTP y seleccionando la opción Convert to cURL and copy to clipboard.
Mejores correctores de ortografía y gramática
Ahora puede resolver los problemas de ortografía y de gramática más rápidamente; pase el ratón sobre un problema y verá una ventana emergente con una explicación y una sugerencia de corrección. También hemos añadido la compatibilidad con más idiomas y hemos mejorado la calidad de las comprobaciones gramaticales.
Control de versiones
Compatibilidad con la zona de pruebas de Git
¡Ahora puede probar sus archivos directamente desde WebStorm! Para hacerlo, vaya a Preferences / Settings | Version Control | Git y seleccione la opción Enable staging area. Podrá probar los cambios desde la ventana de herramientas Commit, así como desde el medianil y con la funcionalidad Show Diff.
Reorganización del menú VCS
El grupo VCS debajo del menú principal ahora recibe su nombre según el sistema de control de versiones que esté utilizando. También hemos reorganizado los elementos debajo de Git en el menú principal para facilitar el acceso a las operaciones más comunes.
Mejora del trabajo con ramas
WebStorm ahora corrige de forma automática los símbolos no aceptados en los nombres de las nuevas ramas. También le muestra todas las acciones disponibles para la rama seleccionada en el momento, al igual que lo haría para otras ramas.
Navegación
Una barra de navegación más útil
Con la barra Navigation, que le ofrece una alternativa rápida a la vista Project, puede recorrer fácilmente la estructura de su proyecto y abrir archivos específicos. Con la versión 2020.3, también hemos hecho que sea posible saltar a elementos específicos del código en sus archivos JavaScript y TypeScript.
Vista previa rápida de los archivos
¡Por fin puede previsualizar los archivos en el editor seleccionándolos en la vista Project! Para activar esta funcionalidad, haga clic en el icono de la rueda dentada en la vista Project y seleccione Enable Preview Tab y Open Files with Single Click.
Mayor potencia para Search Everywhere
La ventana emergente Mayús+Mayús ahora le permitirá hacer incluso más cosas. En primer lugar, puede utilizarla para realizar cálculos matemáticos básicos; los resultados aparecerán directamente en la ventana emergente. También le permitirá buscar datos de Git, incluidos los detalles sobre ramas y confirmaciones. Además, ahora todos los resultados se agrupan en función de su relevancia respecto a la consulta de búsqueda, en vez de por su tipo.