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: