DATOS DE PUBLICACIÓN

PUBLICIDAD

ATAJOS DE TECLADO CON SUBLIME TEXT 3 Y EMMET


Sublime Text es un poderoso y sofisticado editor de texto y código. Es uno de los editores de código más populares y más usados entre la comunidad de desarrolladores debido a su facilidad de uso, personalización y la posibilidad de instalar una serie de plugin que permiten trabajar de forma mucho más fácil y rápida; lo que la convierten en una herramienta muy completa e indispensable para todos aquellos que quieran iniciar o se dediquen ya al desarrollo web (FrontEnd y BackEnd).

Una de estos plugin que nos facilitan el trabajo a la hora de trabajar con Sublime Text es Emmet.

¿QUÉ ES EMMET?

Emmet es un conjunto de herramientas para desarrolladores web que permite mejorar considerablemente el flujo de trabajo al escribir código HTML y CSS.

Básicamente lo que hace Emmet es autocompletar el código, por lo cual no se tendrá que escribir la sintaxis completa de lo que se quiera escribir, sino que mediante cortos atajos de teclado poder insertar de forma completa el o los elementos de código. Todo esto nos permite ahorrar tiempo, esfuerzo y optimizar nuestro flujo de trabajo.

 

INSTALACIÓN DE EMMET EN SUBLIME TEXT 3:

Lo primero que se debe hacer es abrir Sublime Text en el ordenador.

Luego, en el menú que se encuentra en la parte superior, dar clic en Preferences.

Se desplegará una lista en la cual debemos dar clic en Package Control.

Se nos abrirá una pequeña ventana como la siguiente: 





luego, debemos dar clic en la opción Install Package.

Aparecerá una pantalla como la siguiente:





En el cuadro de búsqueda debemos escribir Emmet y dar clic en la primera opción, como se muestra en la siguiente imagen:





¡Listo! Ahora ya podemos comenzar a utilizar Emmet en Sublime Text 3.

 

EJEMPLOS DE ATAJOS DE TECLADO EN SUBLIME TEXT CON EMMET

 

ESTRUCTURA HTML

Para escribir la estructura básica de HTML tenemos dos opciones:

Con el signo ! + TAB obtendremos lo siguiente:


<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title>Document</title>

</head>

<body>          

</body>

</html>

Obtendremos el mismo resultado con el siguiente atajo:

html:5 + TAB

 

ELEMENTOS HIJO

Con el operador > se pueden incluir elementos dentro de otros. Ejemplos:

ATAJO: 

div>ul>li  + TAB

RESULTADO:

<div>

            <ul>

                        <li></li>

            </ul>

 </div>

Como se puede observar, en el ejemplo se ha insertado un elemento <div>, y mediante el símbolo > se ha insertado dentro del <div> un elemento <ul>, que a su vez lleva dentro un elemento <li>; siempre haciendo uso del signo >.

 

ELEMENTOS HERMANOS

Para colocar elementos en el mismo nivel, se utiliza el signo +. Ejemplo:

ATAJO:          

div+p  + TAB

RESULTADO:

<div></div>

 <p></p>

Básicamente lo que hace el signo + es agregar elementos, uno tras otro, siempre al mismo nivel. Muy útil cuando se necesite agregar varios elementos a la vez.

 

ELEMENTOS ESCALA

Con el operador > se desciende por el árbol generado y las posiciones de todos los elementos hermanos se resolverán contra el elemento más profundo. Ejemplo:

ATAJO:

 div+div>p>span+em + TAB

RESULTADO:

<div></div>

<div>

            <p><span></span><em></em></p>

</div>

Como se puede observar, lo que se ha hecho es insertar dos elementos, primero un <div> y luego otro <div> con elementos dentro de él. Recordar que la escala se aplica en este caso en el elemento mas interno; es decir, en el segundo <div> para el caso del ejemplo.

 

El operador ^, permite subir un nivel por el árbol y cambiar el contexto donde deberían aparecer los siguientes elementos. Ejemplo:

ATAJO:

div+div>p>span+em^bq

RESULTADO:

<div></div>

<div>

            <p><span></span><em></em></p>

            <blockquote></blockquote>

</div>

 

Como se puede observar en el ejemplo, se han insertado dos elementos <div>. En el segundo <div> se ha insertado dentro un elemento <p> y a su vez dentro del elemento <p> un <span> y un <em>; pero si se observa en el atajo que se ha utilizado, junto al elemento <span> y <em> se ha insertado un elemento <bq> pero mediante el símbolo ^, lo que significa que ese elemento se insertará un nivel arriba de los elementos <span> y <em>. Es decir que el elemento <bq> se insertará al mismo nivel que el elemento <p>, como se muestra en el ejemplo.

 

Se pueden usar tantos operadores ^ como se desee, cada operador subirá un nivel. Ejemplo:

ATAJO:

div+div>p>span+em^^^bq

RESULTADO:

<div></div>

<div>

            <p><span></span><em></em></p>

</div>

<blockquote></blockquote>

Como se puede observar en el ejemplo, cada símbolo ^ que se agregue al atajo, será un nivel más que subirá el elemento definido.

En el ejemplo se puede observar que se han insertado tres símbolos antes del elemento <bq>, esto significa que estará tres niveles arriba en relación con el elemento anterior.

Siguiendo con el ejemplo, en el segundo <div> tenemos insertado dentro, un elemento <p>, dentro del elemento <p> tenemos un elemento <span> y un <em>; a ese mismo nivel se insertó el elemento <bq>, pero los tres símbolos de potencia ^ significan que ascenderá 3 niveles en relación a la posición de los elementos <spam> y <em>.

Si analizamos el ejemplo, el primer nivel que ascendió lo posicionaba al mismo nivel que el elemento <p>, con el segundo símbolo lo ascendía al mismo nivel que el elemento <div>, que es en la posición que se encuentra en el ejemplo. El detalle es que ya no hay mas niveles a los que pueda ascender, por lo tanto, queda al mismo nivel que los dos elementos <div> que se insertaron. Para lograr el mismo resultado del ejemplo solamente bastaría con haber definido solamente dos símbolos de potencia antes del elemento <bq>, ya que solo existen 2 subniveles.

ELEMENTOS MULTIPLICADOS

Con el operador * se puede definir cuántas veces se debe enviar el elemento. Ejemplo:

ATAJO:

ul>li*5

RESULTADO:

<ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

</ul>

Como se puede observar, lo que hace el símbolo * es multiplicar X veces el elemento definido. En el caso del ejemplo, lo que se ha hecho es definir un elemento <ul> y con el símbolo > insertar dentro 5 elementos <li>, lo cual se logra con el símbolo * seguido de un número que define la cantidad de veces que el elemento se insertará. Para el caso del ejemplo se definió que se insertaría 5 veces.

 

ELEMENTOS AGRUPADOS

Se utiliza el paréntesis () para agrupar subárboles en abreviaturas complejas. Ejemplo:

ATAJO:

div>(header>ul>li*2>a)+footer>p   + TAB

RESULTADO:

<div>

            <header>

                        <ul>

                                   <li><a href=""></a></li>

                                   <li><a href=""></a></li>

                        </ul>

            </header>

            <footer>

                        <p></p>

            </footer>

</div>

Lo que hace el paréntesis es separar la configuración de los elementos que se encuentran dentro de éste, con los demás elementos insertados antes o después.

En el ejemplo, se puede observar que tenemos un <div> y dentro de este se encuentra un <header>, que a su vez lleva dentro un elemento <ul>. Dentro del elemento <ul> se han insertado 2 elementos <li>, dichos elementos <li> llevan cada uno un elemento <a> dentro.

Todo ello va separado, mediante el paréntesis () se define que esa estructura o subárbol va separado de los demás elementos que van fuera del paréntesis. En este caso tenemos por separado un <footer> con un elemento <p> dentro de él.

Si se observa detenidamente, el <header> y el <footer> están al mismo nivel, ya que mediante el paréntesis se separó la estructura del <header> con la del <footer>.