jueves, 12 de junio de 2014

Emmet no expande HTML5

Emmet es un popular plugin, podría decirse que es un plugin esencial para escribir código HTML de una manera moderna y eficiente. Así, el no disponer de Emmet al comenzar a escribir un archivo html5, es decir, escibir html:5 o ! y ver que al presionar 'tab' el código no se expande, esto provoca un gran dolor de cabeza.

Emmet es un plugin disponible para Sublime Text, es una versión mejorada del antiguo Zen Coding.

Ahora veremos cómo resolver este problema, o al menos el procedimiento que me dió resultado para que Emmet volviera a funcionar correctamente.

La programación es una tarea habitual, en especial el desarrollo web usando: PHP, Javascript, SQL, LESS y especialmente HTML. De tal modo, que el no disponer de mis habituales herramientas de desarrollo como lo es Emmet, sería igual o casi igual que no contar con la ayuda de Git o PHING.

Situación Inicial

Había instalado Emmet en Sublime Text 2 en una máquina con Windows 7, hasta que un buen día inicié un documento HTML, escribí:

html:5

Seguido del tabulador y... no pasa nada, la línea no se expandió, probé desinstalar Emmet pero el Package Control no funcionaba correctamente. Busque en Internet y se planteaban soluciones del tipo, borre el directorio ubicado en:

C:\Users\%User%\AppData\Roaming\Sublime Text 2\Packages\PyV8

Una referencia a este problema con Emmet se encuentra en: https://github.com/sergeche/emmet-sublime/issues/476

Lo hice, pero a mi no me funcionó. De hecho este asunto con 'PyV8', es un problema documentado en el sitio del plugin: https://sublime.wbond.net/packages/Emmet

Resolviendo el problema de Emmet en Sublime Text 2

La solución para mi siguió la secuencia:

  • Desinstalo Sublime Text 2 de Windows 7.
  • Descargo y vuelvo a instalar Sublime Text 2 desde el sitio web: http://www.sublimetext.com/
  • Luego abro Sublime Text y voy al menú: View > Show Console e inserto el código de instalación de Package Control copiado desde: https://sublime.wbond.net/installation#st2
  • Accedo al Package Control usando el atajo Ctrl + Shift + P seleccionó 'Package Control: Remove Package' para elegir de la lista de paquetes instalados a 'Emmet', que aún permanecía.
  • Finalmente, usando el Package Control vuelvo a instalar Emmet, siguiendo una secuencia similar a la anterior, pero usando la opción 'Package Control: Install Package'.

Eso fue todo, y ahora vuelvo a contar con Emmet funcionando correctamente, escribo:

`!`

Y luego de presionar la tecla 'Tab', obtengo inmediatamente en la pantalla de Sublime Text:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Maravilloso, parece magia... o no?

Notese que en este artículo estamos hablando del Emmet plugin no del Emmet CSS Snip`pets que es algo distinto.

Referencias:

10 comentarios:

  1. buena referencia, fijense que antes de meter html:5 esten usando el sublime en html, si esta en plain text no funciona. checkear eso por favor

    ResponderEliminar
    Respuestas
    1. Tienes razón, pero tomando el cuidado que señalas, a veces (no siempre) se genera el problema.

      Eliminar
    2. como pongo el sublime en html?????????????????

      Eliminar
    3. Lo más fácil es que antes de empezar guarde el archivo con exención .html
      así le da el formato al archivo y le funciona el Emmet

      Eliminar
  2. Gracias juan pablo,estube un largo rato sabiendo cual era el problema y efectivamente era el que no habia señalado en sintasix html

    ResponderEliminar
  3. Hola, gracias por el tuto, pero infelizmente a mi no me funciona. despues de hacer al pie de la letra lo que indicas, no sale. Se te ocurre algo?
    Gracias de nuevo.

    ResponderEliminar
  4. Kayhek, asegúrate de que la extensión del archivo sea 'html' y por último revisa los otros paquetes que tienes en Sublime text, pues podría haber una colisión. Sólo para tantear, podrías desinstalar todos los agregados de Sublime Text y volver a instalar Emmet.

    ResponderEliminar
  5. Hola, me sucedia lo mismo con Brackets, deshabilite el Emmet y guardé el cambio, luego lo volví a habilitar y ya funcionó

    ResponderEliminar