El EMMET es un conjunto de abreviaturas que permite realizar de manera automática la parte mecánica del código HTML entre otros lenguajes, y que por tanto nos ahorra mucho tiempo. Es soportado por varios entornos, el Visual Studio Code ya lo trae integrado, pero estas abreviaturas podemos personalizarlas y añadir nuevas.
Operadores
Estos operadores los hemos estado utilizando y nos permiten generar código de forma mucho más rápida y eficaz. Existen muchos operadores que vienen por defecto y que nos permiten hacer gran cantidad de atajos:
LISTA OFICIAL DE OPERADORES Y ABREVIATURAS
SNIPPETS
La siguiente web nos ayudará a generar los snippets del lenguaje que queramos de forma mucho más sencilla:
El cuadro description es para poner una descripción de nuestro código. En la parte Tab trigger escribiremos la palabra con la que queremos invocar al código. Y por último en Your snippet escribiremos el código del que queremos hacer el emmet tal cual esta.
El código generado se pegará en el json del lenguaje correspondiente. Para acceder al json iremos al VS code y pinchamos en Archivo>Preferencias>Fragmentos de código del usuario, y escribimos el nombre del lenguaje:
y dentro del archivo pegamos el código generado de la página.
Por Ejemplo:
Copiamos el snippet generado y lo pegamos en el archivo html.json. Ya tendríamos el snippet de nuestro código:
EXTENSIÓN VS CODE
Existe una extensión que nos permite crear los snippets con todas las abreviaturas que queramos sin necesidad de tener muchos conocimientos sobre estos. Con dicha extensión podremos generar los snippets con abreviaturas de cualquier lenguaje (SQL, java, …). Nos permite hacer lo mismo que antes pero de forma mucho más eficaz, escribiendo el código del que queremos hacer el snippet, lo seleccionamos y abrimos la paleta de comandos, y en ella escribimos snippet para acceder a la extensión como se muestra en la siguiente imagen.
PÁGINAS WEB
WEB OFICIAL: EMMET.IO
CHEAT SHEET: EMMET CHEAT SHEET