Editores de código rediseñados con Emmet y autocompletado

Los editores de código de Webflow se han rediseñado en torno a una experiencia de edición única y unificada. Todas las superficies de código (bloque de código, incrustación de código, código personalizado en configuración de página y en el panel) ahora comparten el mismo editor con búsqueda y reemplazo, expansión de abreviaturas Emmet, autocompletado en línea para estilos y variables, y un esquema de colores inspirado en VS Code.

Experiencia de edición unificada

Las cuatro superficies de código ahora comparten el mismo editor moderno con un conjunto de funciones coherente.

• Busca y reemplaza texto en todas las áreas de código mediante un nuevo botón de búsqueda o Cmd-F / Ctrl-F
• El bloque de código y la incrustación de código ahora se abren en ventanas modales redimensionables y arrastrables en lugar de un panel fijo
• El editor autocompleta etiquetas HTML y cierra corchetes mientras escribes
• Esquema de colores actualizado inspirado en VS Code para mejorar la legibilidad
• Formato con un clic mediante Prettier con validación de HTML, CSS y JS para detectar errores antes de publicar
• Avisos al acercarse al límite de 50 000 caracteres
• Detección de cambios sin guardar antes de salir

Compatibilidad con abreviaturas Emmet

Los editores de código ahora admiten abreviaturas Emmet, lo que te permite escribir abreviaturas como ul>li*5 o div.container y expandirlas a HTML completo con la tecla Tab.

• Funciona en incrustación de código, configuración de página y código personalizado del panel para HTML y para CSS en etiquetas <style>
• En el bloque de código, los atajos de Emmet también funcionan para CSS, HTML y JSX/TSX según el lenguaje seleccionado
• El comportamiento de expansión coincide con VS Code y otros editores modernos

Autocompletado de estilos y variables

Los editores de código ahora ofrecen autocompletado en línea para los estilos y variables de tu sitio mientras escribes código personalizado.

• Mientras escribes, Webflow sugiere nombres de clase y variables coincidentes para que no tengas que memorizarlos ni buscarlos
• Disponible en bloque de código, incrustación de código, código personalizado de configuración de página y código personalizado del panel
• Los equipos que mantienen sitios complejos ya no necesitan cambiar entre el panel de estilos y los editores de código para verificar nombres de clase o valores de variables