TheLazy.Dev
Portfolio GitHub

Blog

html |tutorial |vscode |spanish

Shortcuts HTML en Visual Studio Code

asjordi

Jordi Ayala

Posted on February 1, 2023

Shortcuts HTML en Visual Studio Code

¿Qué son los Shortcuts?

Los Shortcuts son atajos de teclado que nos permiten realizar acciones de forma más rápida y eficiente. En Visual Studio Code podemos encontrar una gran cantidad de Shortcuts que nos ayudarán a mejorar nuestra productividad.

Dentro de Visual Studio Code, Emmet proporciona abreviaciones para muchos lenguajes de programación, incluyendo HTML y CSS.

HTML Boilerplate

Al escribir el simbolo de exclamación ! y presionar la tecla TAB dentro de un archivo .html se generará un HTML Boilerplate con la estructura básica de un documento HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

La estructura del HTML Boilerplate por defecto no contiene la mayoria de etiquetas que utilizamos en nuestros proyectos, por lo que podemos modificarla a nuestro gusto. Para ello, se debe ir a File > Preferences > Configure User Snippets. A continuación, seleccionar New Global Snippets File e ingresar la combinación de teclas necesarias para ejecutar el boilerplate, en este caso doble signo de exclamación !!.

En el archivo .json generado se debe agregar la siguiente estructura:

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"main.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with meta tags and links to css and js files"
  }
}
Enter fullscreen mode Exit fullscreen mode

Se puede modificar la estructura del HTML Boilerplate a gusto propio, solo considerando que se debe mantener la estructura de un documento HTML y posteriormente se debe guardar el archivo en formato JSON string, por ejemplo, primero se escribe la estructura en HTML, luego utilizando una herramienta como esta se puede convertir a JSON string.

HTML Shortcuts

Al momento de escribir código HTML, es común que se repitan ciertas estructuras, por ejemplo, un elemento <div> con una clase y un <p> con un texto. Para evitar escribir todo el código, podemos utilizar los Shortcuts de Emmet para generar la estructura de forma rápida. A continuación, se muestran algunos de los Shortcuts más utilizados.

  • Elementos anidados: nav>ul>li genera la siguiente estructura: 
<nav>
  <ul>
    <li></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode
  • Múltiples elementos: li*5 genera la siguiente estructura: 
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Enter fullscreen mode Exit fullscreen mode
  • Etiquetas con texto: a{Click Me} genera la siguiente estructura: 
<a href="">Click Me</a>
Enter fullscreen mode Exit fullscreen mode
  • Elementos con varias clases: div.first-class.second-class genera la siguiente estructura: 
<div class="first-class second-class"></div>
Enter fullscreen mode Exit fullscreen mode
  • Elementos con ID: div#main genera la siguiente estructura: 
<div id="main"></div>
Enter fullscreen mode Exit fullscreen mode
  • Elementos con atributos: a[href="https://www.google.com"] genera la siguiente estructura: 
<a href="https://www.google.com"></a>
Enter fullscreen mode Exit fullscreen mode
  • Elementos con atributos y texto: a[href="https://www.google.com"]{Google} genera la siguiente estructura: 
<a href="https://www.google.com">Google</a>
Enter fullscreen mode Exit fullscreen mode

Algunos de los Shortcuts de Emmet pueden ser combinados en combinaciones más complejas, por ejemplo:

  • div>(header>ul>li*2>a)+footer>p 
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>
Enter fullscreen mode Exit fullscreen mode
  • (section>div>(p+span)*3)+footer>p 
<section>
  <div>
    <p></p>
    <span></span>
    <p></p>
    <span></span>
    <p></p>
    <span></span></div>
</section>
<footer>
  <p></p>
</footer>
Enter fullscreen mode Exit fullscreen mode
  • p>{Click }+a{here}+{ to continue} 
<p>Click <a href="">here</a> to continue</p>
Enter fullscreen mode Exit fullscreen mode
  • ul>li[id=item$]{Título $}*3 
<ul>
  <li id="item1">Título 1</li>
  <li id="item2">Título 2</li>
  <li id="item3">Título 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Estos son algunos de los Shortcuts más utilizados, pero existen muchos más. Para conocerlos todos, se puede consultar la documentación oficial de Emmet.

💖 💪 🙅 🚩
asjordi
Jordi Ayala

Posted on February 1, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Shortcuts HTML en Visual Studio Code
html Shortcuts HTML en Visual Studio Code

February 1, 2023