¿Puede VS Code hacer Emmet? | Programar Plus

Como en, ¿Visual Studio Code, el editor de código gratuito de Microsoft, funciona con Emmet, la herramienta de expansión de código fuente abierta y gratuita? ¡La respuesta es por supuesto! De hecho, no tienes que hacer nada en absoluto para que funcione. Emmet está integrado en VS Code.

Echemos un vistazo a lo que Emmet puede hacer y algunas cosas específicas de VS Code para aprovecharlo al máximo.

En este artículo, usaré ⌘ para indicar la tecla de comando en Apple y la tecla de control en Windows. También usaré ⇧ para la tecla shift.

¿Qué es Emmet?

Emmet es una herramienta de expansión de código que está diseñada para acelerar drásticamente la creación de HTML y CSS.

Funciona así. Digamos que quería crear un div. Normalmente, escribiría cada carácter:

<... d... yo... v... >

Tu editor de texto podría incluso ayudar a autocompletar ese nombre de etiqueta por ti. Luego, para cerrarlo, es posible que solo tenga que escribir un nuevo paréntesis angular (

Esta no es una mala manera de componer HTML, pero cuando trabajas en HTML, probablemente estás escribiendo muchas más etiquetas, lo que significa que estás abriendo y cerrando muchos corchetes angulares. Esos paréntesis angulares realmente pueden ralentizarlo y hacer que la creación de HTML sea tediosa.

Aquí es donde entra Emmet.

Emmet te permite simplemente escribir div y presione la tecla de tabulación. Se expande automáticamente en una etiqueta div HTML completa.

Esto funciona para cualquier etiqueta HTML. Puede agregar una identificación con un #, una clase con un .y atributos con [foo]. ¡Es feliz hacer múltiplos de cada uno!

De hecho, si está trabajando con un div, ni siquiera necesita especificar la etiqueta div. Simplemente puede comenzar con la identificación o la clase y obtendrá un div de forma predeterminada. Emmet es incluso lo suficientemente inteligente como para cambiar eso a un <span> si está dentro de otro elemento en línea por defecto.

Se puede componer un marcado bastante complejo de esta manera. Puedes usar > para especificar bajar un nivel y + para especificar elementos en el mismo nivel. Tomemos, por ejemplo, una barra de navegación Bootstrap. El marcado de una barra de navegación podría verse así:

<nav class="navbar">
  <a class="navbar-brand" href="https://css-tricks.com/can-vs-code-emmet/#">Navbar</a>
  <div class="navbar-nav">
    <a class="nav-item nav-link" href="https://css-tricks.com/can-vs-code-emmet/#">Home</a>
    <a class="nav-item nav-link" href="https://css-tricks.com/can-vs-code-emmet/#">Features</a>
    <a class="nav-item nav-link" href="https://css-tricks.com/can-vs-code-emmet/#">Pricing</a>
  </div>
</nav>

Podemos generar todo este bloque con Emmet así:

Están sucediendo muchas cosas en términos de sintaxis de Emmet. La mejor manera de aprenderlo es tomar la hoja de trucos de sintaxis de Emmet.

También puede incorporar Lorem Ipsum en el marcado generado según sea necesario.

Probablemente notó que pude generar automáticamente 3 etiquetas de anclaje y que cuando expandí todo en HTML, obtuve tabulaciones en todas mis etiquetas de anclaje y href atributos Esto le permite crear rápidamente un bloque de HTML y luego ir y agregar detalles a cada elemento.

Sin embargo, hay otra forma (me atrevo a decir más genial) de hacer esto 😎. Se llama “Envolver líneas individuales”.

Envolver líneas individuales con abreviatura

Si volvemos al ejemplo anterior, lo que realmente queremos es una barra de navegación con enlaces Inicio, Características y Precios. Podemos agregar ese texto después de generar el marcado con Emmet, o podemos hacerlo antes de usar el comando “Envolver líneas individuales con abreviatura”.

Invoque la paleta de comandos (⌘ + ⇧ + P) y seleccione “Envolver líneas individuales”. Ingresamos exactamente la misma sintaxis de Emmet que teníamos antes, pero esta vez nos detenemos en el * ya que aquí es donde Emmet insertará nuestras líneas.

También hay un “Ajuste con abreviatura” que ajustará una sola línea sin tener que seleccionar nada. Esto es particularmente útil cuando se envuelven enlaces. Simplemente pegue una URL, invoque el comando, presione “a” y luego presione enter.

🔥 Punta caliente

Asigne un atajo de teclado al comando “Ajustar con abreviatura”. Esto hace que sea súper rápido crear cosas como anclas.

Emmet en otros tipos de archivos

De forma predeterminada, Emmet funciona en HTML y CSS, y eso incluye preprocesadores/lenguajes de plantilla. Fuera de la caja, obtiene soporte en html, haml, jade, delgado, jsx, xml, xsl, css, scss, hablar con descaro a, menos y aguja. Los documentos también mencionan que lo obtiene en cualquier tipo de archivo que herede de los tipos de archivos anteriores, como php.

CSS

Emmet también trabaja en CSS. Funciona con una técnica de búsqueda llamada Fuzzy search que coincide con lo que intenta expresar con pocos caracteres. Por ejemplo df se expande en display: flex; y w100p se expande en width: 100%;.

Estos funcionan en diferentes tipos de archivos CSS, como Sass, donde sabe que no debe insertar punto y coma en la sintaxis `.sass`.

Herencia de tipo de archivo

Desafortunadamente, no hay forma de saber qué archivos heredan de un tipo de idioma existente. Por ejemplo, Emmet no funciona en archivos Markdown porque Markdown no hereda de ninguno de los tipos conocidos. Aunque HTML es perfectamente válido en archivos Markdown.

Para solucionar esto, podemos agregar una asignación de idioma para que Emmet sepa comportarse correctamente en los archivos de Markdown. Agregue la siguiente línea al archivo de configuración de usuario.

Para saltar rápidamente a Configuración de usuario, presione ⌘, (comando coma).

"emmet.includeLanguages": {  
    "markdown": "html"
}

Ahora hemos asignado Markdown a HTML para que Emmet sepa cómo tratar el archivo. Bueno, casi. Si abrimos un archivo Markdown, notará que Emmet está funcionando, pero no como esperábamos. si escribo div y presiona tabulador, no pasa nada. si escribo div y luego un *, Emmet intenta ingresar a través del menú de sugerencias.

Eso no es bueno porque Markdown usa asteriscos para los encabezados. Emmet los va a interceptar cada vez. La razón por la que esto sucede es que VS Code está tratando de evitar que la tecla de tabulación golpee alguna otra función que la tecla de tabulación podría cumplir en un documento de este tipo.

Para evitar esto, podemos agregar la siguiente línea a nuestra Configuración de usuario:

"emmet.triggerExpansionOnTab": true

Ahora la expansión div funcionará en la pestaña, pero los asteriscos aún activan la ventana de sugerencias de Emmet. Mi sugerencia es desactivar esa ventana por completo con la siguiente línea en Configuración de usuario:

"emmet.showExpandedAbbreviation": "never"

Esto también funciona para lenguajes como React y Vue. Si bien Emmet funciona de forma predeterminada en archivos JSX, también podemos hacer que funcione en JSX en JavaScript normal. Agregue esta asignación a su configuración de usuario:

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

Creación de sus propios fragmentos

También puede crear sus propios fragmentos de Emmet.

Por ejemplo, podría expandir la capacidad SVG de Emmet creando un fragmento personalizado como rect que se asigna a rect[x][y][width][height] y así expandirse en:

<rect x="" y="" width="" height=""></rect>

Puede encontrar más información al respecto en la documentación oficial de VS Code. ¡Así es como los fragmentos personalizados de CodePen también funcionan bajo el capó!

Más recursos de Emmet

Si desea obtener más información sobre Emmet, aquí hay algunos otros recursos para comenzar:

• Hoja de referencia de fragmentos de Emmet
• Documentación Emmet
• Código VS y Emmet