Buenas, hoy les traigo un complemento (creo que sería un plugin) para Sublime Text, ya sea la versión 2 ó 3, que para mí es el mejor que probé hasta el momento después de Color Picker o el autoidentador.
El complemento en cuestión se llama Emmet y lo que hace es completarte el código de HTML (todas sus versiones), CSS y Javascript. La verdad, es algo complicado sacarle provecho al principio, pero una vez que le agarrás la mano vas a poder codear más rápido que flash!
Pero seguro que estás pensando, "pero si el Sublime Text ya te completa el código". Sisi, pero para eso, si mal no recuerdo, tenés que escribir todo el nombre de la etiqueta, la propiedad o lo que sea que se use en JS. Sin embargo, con este plugin en HTML, basta con escribir esto:
para que te lo transforme en esto con solo presionar la tecla "Tab":
Al final del post les voy a dejar el extenso "machete" que armaron los muchachos de Emmet con todas las abreviaciones y sus significados. Les recomiendo que lo prueben porque realmente les va a acelerar un montón el flujo de trabajo ya que, no solo van a tener que escribir mucho menos, si no que practicamente no van a necesitar tocar el mouse para nada, lo que les va a ahorrar un montón de tiempo.
Bueno, para empezar, lo primero que necesitamos es instalar el Package Control si es que no lo tienen. Para hacerlo nos vamos a https://packagecontrol.io/installation y copiamos el código correspondiente a la versión de ST que tengamos instalada en la máquina.
Una vez hecho eso, entramos al Sublime y abrimos la consola (en la barra de menús abrimos la que dice "View" y seleccionamos "Show console".
Ahora sí, pegamos en la consola el código que copiamos anteriormente en la página del Package Control, lo ejecutamos (damos "Enter" y esperamos a que termine de instalarse.
Después de esto, simplemente presionamos "Ctrl" + "Shift" + "P", en el cuadro que nos aparece escribimos "Package Control: Install Package" (como se muestra en la 8va opción en el caso de esta imágen) y presionamos la tecla "Enter".
Al hacer esto nos va a mostrar otro cuadro como el anterior en el que tenemos que escribir "Emmet", darle al "Enter" una vez más y listo. Ya tenemos instalado el Control de Paquetes y el Emmet en el editor de código más famoso de la actualidad.
Lo bueno de esto es que, una vez que tenemos instalado el Package Control, podemos instalar muchísimos plugins realmente útiles como el Color Picker o distintos Linterns (plugins que detectan errores en el código) para muchas sintaxis de la misma manera en la que instalamos Emmet.
Acá les dejo el machete (cheat sheet) con las abreviaturas para que vean todo lo que se puede hacer. También sirve para Javascript pero no aparece, o por lo menos no aparece en la hoja de "trucos":
Espero que les haya servido y que cualquier duda me manden MP que para eso estoy. Saludos.
El complemento en cuestión se llama Emmet y lo que hace es completarte el código de HTML (todas sus versiones), CSS y Javascript. La verdad, es algo complicado sacarle provecho al principio, pero una vez que le agarrás la mano vas a poder codear más rápido que flash!
Pero seguro que estás pensando, "pero si el Sublime Text ya te completa el código". Sisi, pero para eso, si mal no recuerdo, tenés que escribir todo el nombre de la etiqueta, la propiedad o lo que sea que se use en JS. Sin embargo, con este plugin en HTML, basta con escribir esto:
#page>div.logo+ul#navigation>li*5>a{Item $}
para que te lo transforme en esto con solo presionar la tecla "Tab":
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
Al final del post les voy a dejar el extenso "machete" que armaron los muchachos de Emmet con todas las abreviaciones y sus significados. Les recomiendo que lo prueben porque realmente les va a acelerar un montón el flujo de trabajo ya que, no solo van a tener que escribir mucho menos, si no que practicamente no van a necesitar tocar el mouse para nada, lo que les va a ahorrar un montón de tiempo.
Bueno, para empezar, lo primero que necesitamos es instalar el Package Control si es que no lo tienen. Para hacerlo nos vamos a https://packagecontrol.io/installation y copiamos el código correspondiente a la versión de ST que tengamos instalada en la máquina.
Una vez hecho eso, entramos al Sublime y abrimos la consola (en la barra de menús abrimos la que dice "View" y seleccionamos "Show console".
Ahora sí, pegamos en la consola el código que copiamos anteriormente en la página del Package Control, lo ejecutamos (damos "Enter" y esperamos a que termine de instalarse.
Después de esto, simplemente presionamos "Ctrl" + "Shift" + "P", en el cuadro que nos aparece escribimos "Package Control: Install Package" (como se muestra en la 8va opción en el caso de esta imágen) y presionamos la tecla "Enter".
Al hacer esto nos va a mostrar otro cuadro como el anterior en el que tenemos que escribir "Emmet", darle al "Enter" una vez más y listo. Ya tenemos instalado el Control de Paquetes y el Emmet en el editor de código más famoso de la actualidad.
Lo bueno de esto es que, una vez que tenemos instalado el Package Control, podemos instalar muchísimos plugins realmente útiles como el Color Picker o distintos Linterns (plugins que detectan errores en el código) para muchas sintaxis de la misma manera en la que instalamos Emmet.
Acá les dejo el machete (cheat sheet) con las abreviaturas para que vean todo lo que se puede hacer. También sirve para Javascript pero no aparece, o por lo menos no aparece en la hoja de "trucos":
Espero que les haya servido y que cualquier duda me manden MP que para eso estoy. Saludos.