Emmet, anteriormente Zen Coding, es uno de los complementos de editor de texto más prácticos y productivos que jamás haya visto. Con su capacidad de expandir instantáneamente abreviaturas simples en fragmentos de código complejos, Emmet te hace sentir como un poderoso asistente de codificación con el mundo a tu alcance.
Como seguimiento de nuestro artículo anterior sobre los conceptos básicos de la codificación Zen, hoy vamos a sumergirnos en siete consejos increíbles para ayudarlo a convertirse en un verdadero profesional de Emmet.
1. Salta la div
Nuestro primer consejo es que raramente necesitas escribir? Div? en tu macro Es tentador porque eso es lo que haces con cualquier otro elemento HTML, pero los divs son especiales y en realidad requieren menos esfuerzo. Todo lo que tienes que hacer es escribir una ID (con un hashtag) o una clase (con un punto) y Emmet asumirá que estás buscando crear un div.
Como puede ver, ambas abreviaturas dan el mismo resultado. Ya que Emmet se trata de ahorrarle tiempo al reducir la cantidad de escritura requerida, siempre tome la ruta más corta hacia lo que desee.
Nombres de etiquetas implícitas
Esta peculiaridad es en realidad parte de una característica mayor llamada "nombres de etiquetas implícitas", que intenta interpretar la etiqueta que desea según el contexto. Tenga en cuenta que no escribo? Div? o? li? en mi abreviatura, pero se asumen y se insertan en el fragmento expandido final.
2. Cadena de abreviaturas con navegación DOM
Si estás usando Emmet para expandir los nombres de clase simples en divs, es bueno para ti, tienes un comienzo decente. Sin embargo, el poder de ahorro en tiempo real solo se alcanza una vez que aprendes a construir macros más grandes que pueden expandirse en una parte significativa de tu marca.
La clave para esto es memorizar y comprender la sintaxis que le ayudará a ramificarse en diferentes niveles de su árbol de documentos. Hay tres símbolos importantes a tener en cuenta:
Como puedes ver,?> Var13 ->? te permite ir más profundo en el árbol y crear un niño,? +? le permite crear un nuevo elemento en el mismo nivel que el anterior (un hermano), y? ^? te permite subir un nivel para crear un elemento. En aras de la simplicidad, comencemos con los dos primeros.
Como puede ver, con el símbolo secundario (al igual que el selector de elementos secundarios en CSS), pude colocar la división interna dentro de la división externa. Luego utilicé otro símbolo secundario seguido del símbolo de hermano para colocar tanto el h2 como el párrafo en el mismo nivel dentro del div interior.
Escalando
Ahora avancemos y veamos subir el árbol. Esta es un poco más complicada de comprender, pero es una nueva característica de Emmet que no teníamos en Zen Coding. Básicamente, usando el? Subir? símbolo, podemos salir de una rama en la que hemos empezado a sumergirnos. Esto es lo que quiero decir:
Como puede ver aquí, cavamos en el primer párrafo y lanzamos una etiqueta de anclaje, pero luego necesitamos volver a subir y agregar otro párrafo en el mismo nivel que el anterior. El? ^? El símbolo nos permitió lograr esto.
Para hacer que esta característica sea aún más útil, puede encadenar estos símbolos para subir varios niveles. Por ejemplo, si agregamos un elemento em a nuestra abreviatura anterior, tendríamos que subir dos niveles para colocar nuestro próximo párrafo en el mismo nivel que el primero.
3. Utilice la agrupación para simplificar su estructura
A veces, encontrarás que has cavado tan profundamente en una rama particular que se convierte en un lío confuso para encadenar suficientes símbolos para obtener lo que deseas. En este caso, podría simplificar un poco las cosas si, en su lugar, recurre a la agrupación. Esto se logra implementando paréntesis alrededor de diferentes secciones de código.
Esto realmente se siente más natural y lógico que usar el símbolo de ascenso, y realmente estamos logrando lo mismo. Puede ver que esto realmente comienza a dar sus frutos cuando está delineando una parte más grande de su página.
4. Insertar texto y atributos
A medida que marca su página, el texto y los atributos son dos cosas que podría esperar que no pueda realizar con Emmet. Muchos usuarios simplemente delinean un documento con esta herramienta y luego completan los vacíos de contenido después de la expansión. Esta es una excelente manera de trabajar, pero si está interesado, puede insertar texto y atributos utilizando la sintaxis que se muestra a continuación.
Como he mostrado anteriormente, el texto se inserta a través de {corchetes} y los atributos utilizan [corchetes]. Tenga en cuenta que los anclajes en realidad insertan automáticamente un? Href? pero el valor se deja vacío por defecto, esta técnica le permite llenarlo. Además, recuerde que puede usar llaves para crear cualquier atributo que desee, no solo el que se muestra aquí.
5. Múltiples nombres de clase en un solo artículo
Este es super simple, pero cuando comencé a usar esta herramienta, no estaba claro cómo agregar varios nombres de clase a un solo elemento. Resulta que todo lo que tienes que hacer es escribir todos los nombres de clase en una fila separados por puntos.
6. Multiplicación
Este es otro de mis favoritos. Puede ahorrarse toneladas de escritura al insertar múltiples elementos del mismo tipo. Simplemente use la siguiente sintaxis:
Esto funciona en casi cualquier cosa que lo necesites, sin importar lo complicado que sea. Intente asociarlo con la función de agrupación que vimos antes para obtener algunos resultados interesantes.
7. Numeración automática
Nuestra séptima y última sugerencia es que puede insertar números que se incrementan automáticamente en sus fragmentos a través del signo de dólar. Esto funciona en cualquier lugar: clases, ID, texto, atributos, etc. Aquí hay un ejemplo en acción:
Tenga en cuenta que, cuantos más signos de dólar use, más dígitos tendrá el número. Entonces, en primera instancia, usé $, que se expandió a 1, 2 y 3.Luego, en la segunda instancia, usé $$, que se expandió a 01, 02 y 03.
¡Pruébalos!
Ahora que conoces un montón de trucos realmente increíbles para probar con Emmet, es hora de darles una oportunidad. Acceda a nuestra página de demostración de Emmet y pruebe algunas de las abreviaturas que mencionamos anteriormente. Aquí hay una lista de cada abreviatura en este artículo en texto sin formato para que pueda copiar y pegar su comodidad.
También asegúrese de ir a la página de inicio de Emmet, donde puede aprender más y probarlo por sí mismo de inmediato.
¿Cómo amplío las abreviaturas?
La expansión puede ser diferente en cada editor y normalmente requiere un complemento. En Sublime Text 2, abra Package Manager, busque Emmet, instálelo y luego reinicie la aplicación. Para desencadenar una expansión, simplemente pulsa lengüeta después de escribir en una abreviatura.
¿Cuáles son tus consejos favoritos?
Emmet es indiscutiblemente una de mis herramientas de codificación favoritas absolutas. Confía en mí, úsalo durante unas semanas y nunca más querrás codificar sin él. Ahorra mucho trabajo y es mucho más inteligente que la funcionalidad típica de los fragmentos de un editor de código.
Ahora que has visto mis consejos, ¡deja algunos de los tuyos! Escriba un comentario a continuación que me diga cómo usa Emmet o Zen Coding y qué funciones son sus favoritas.