Home » , , » Instalar Emmet en Sublime Text2

Instalar Emmet en Sublime Text2

Emmet es un asistente de contenidos por el cual podemos utilizar métodos abreviados para escribir nuestro código con menos trabajo y con apenas unas combinaciones de teclas.

Les Recomiendo instalen el plugin Emmet antes Zen Coding en Sublime text 2 u otros editores compatibles.

¿Por que? , es simple porque te va a simplificar las cosas a la hora de codificar ademas que ahorraras muchísimo tiempo.



Un pequeño ejemplo de Zen Coding, ahora Emmet:

div#page>div.logo+ul#navigation>li*5>a

Resultado:

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
VÍDEO TUTORIAL DE INSTALACIÓN


CÓDIGO PARA LA INSTALACIÓN:
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')


Que se puede hacer con emmet(zen Coding):Generar mas rápidamente todo el esqueleto html, solo escribiendo html:5 y pulsando la tecla tab.

Y tendremos algo como esto






Si quisiéramos crear una lista con 20 items por ejemplo, simplemente haríamos algo como esto.

El * multiplica los elementos en el numero que establecemos.



Y pulsando la tecla tab quedaría así:



También podemos asignarles id's y nombres de clases



Al igual que en css, el símbolo sharp o numeral (#) indica el id del objeto, y el punto la clase.

Entrar a http://emmet.io/ para conocer mas a fondo este plugin.


Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS