rojasdelgado.com

Acerca de José Antonio Rojas Delgado:

• Analista-Programador | Diseñador Web | Formador Ocupacional | Webmaster - SEO - Community Manager
• Almería (España)
• +034 629 62 70 84
• +034 629 62 70 84
• joseantonio@rojasdelgado.com

X

José Antonio Rojas Delgado (http://www.rojasdelgado.com)

22/12/2022 19:16:11
jueves, 22 de diciembre del año de N.S. 2022

jard: zen coding emmet

La escritura de código fuente acelerada es una característica que se echa de menos cuando cambias de editor. Desde 2009 se conoce en general como CODIFICACION ZEN (Zen Coding en inglés) (ver https://en.wikipedia.org/wiki/Emmet_(software))
y desde 2013 y hasta la actualidad se conoce como EMMET.

La funcionalidad consiste en escribir una abreviatura de lo que quieres codificar, y a continuación invocar la función Zen, usualmente pulsando la tecla TAB (el tabulador, esa tecla olvidada a la izquierda de tu teclado, encima de la tecla que fija o bloquea las mayúsculas). A continuación la función Zen cambia la abreviatura expandiéndola a su verdadero valor textual.

Por ej:

html:5 te genera un esqueleto html versión 5

ul>li*14 te genera un bloque html <ul> con 14 elementos <li> en su interior

div.divisionprincipal>p*3 te genera un bloque <div class='divisionprincipal> con 3
párrafos <p></p> y su etiqueta de cierre </div>

div[name=division$]*30 te genera 30 divisiones <div name='division1'> <div
name='division2'> ... <div name='division30'>

p#parrafo$*5 te generera 5 parrafos <p id="parrafo1"> .. <p id="parrafo5">

div.calculos#calculos[name=calculos][otrapropiedad=hola] genera <div class="calculos" id="calculos" name="calculos" otrapropiedad="hola"></div>

Exiten Extensiones plug-in para todos los entornos de desarrollo que se precien de serlo: Notepad++, Adobe Dreamweaver, Visual Studio Code...

En Visual Studio Code viene de serie, y para invocar la función Zen hay que hacerlo mediante el menú Editar/Emmet Expandir Abreviación
Este elemento de menú está asociado a la tecla de método abreviado Tab, pero al pulsar esa tecla no se invoca la función Zen. Esto ocurre porque el editor tiene deshabilitado por defecto el uso de Tab para invocar la función Zen.

Para habilitar el uso de Tab para invocar la función Zen hay que ir al menú Archivo/Preferencias/Configuración, y allí buscar "emmet", y entre las múltiples opciones hay una llamada "Emmet: Trigger expansión on tab", que encontrarás sin seleccionar y deberás seleccionarla.

Esto no habilita la tecla tab, sino que habilita "el método abreviado". Así, si no te gusta Tab, para cambiar el método abreviado hay que ejecutar el comando de configuración en el menú Ver/Paleta de Comandos, y allí buscar "Emmet: expandir abreviatura" y pulsar el botoncito de la rueda dentada (configuración) a su derecha. Pulsa el pequeño lapiz a la izquierda para editar, teclea la secuencia de teclas deseada y una vez la tengas configurada, pulsa la tecla intro para aceptar los cambios.