Pequeña colección de atajos que utilizo frecuentemente.
Todos estos atajos están dirigidos al sistema operativo de Windows, junto al teclado latinoaméricano.
Algunos podrían ser bastante similares o idénticos en otros idiomas/teclados/sistemas operativos.
| Acción | Atajo |
|---|---|
| Ir al principio o final de una línea | Inicio o Fin |
| Seleccionar línea completa | Shift + Inicio o Fin |
| Ir al principio o final de una archivo | Ctrl + Inicio o Fin |
| Ir al principio o final de una palabra | Ctrl + ➡ o ⬅ |
| Seleccionar palabra (o el restante desde el punto activo) | Shift + Ctrl + ➡ o ⬅ |
| Borrar (cortar) línea activa | Ctrl + X |
| Mover código seleccionado (en su defecto, la línea activa) | Alt + ⬆ o ⬇ |
| Duplicar código seleccionado (en su defecto, la línea activa) | Alt + Shift + ⬆ o ⬇ |
| Identar el código | Alt + Shift + F |
| Comentar código seleccionado (en su defecto, la línea activa) | Ctrl + } |
| Deshacer el último cambio | Ctrl + Z |
| Rehacer el último cambio (el antagonista al atajo anterior) | Ctrl + Y |
| Cambiar entre pestañas abiertas | Alt + ➡ o ⬅ |
| Buscar archivos de la carpeta | Ctrl + P |
En esta práctica/ejemplo aprenderemos lo más rápido posible, cómo se traducirá el siguiente texto a HTML con el plugin de Emmet (dicho plugin, ya viene por defecto en VSCode, asi que no te preocupes en descargarlo)
nav.navBar#navBar>ul.list-items>li*5.item>a[href='#' role='button' id='button-$']{Text $}-
El punto
.se utiliza para ponerle clase al elemento que le precede. En caso que no exista dicho elemento, se interpretará como un<div>
-
El numeral/almohadilla/gato
#se utiliza para añadir un ID (identificador único) al elemento que le precede.
-
El símbolo de mayor que
>se utiliza para anidar elementos. Incorporarles hijos
-
El símbolo de la multiplicación
*se utiliza para multiplicar por la cantidad que se indique, el elemento que le precede.
-
Los corchetes
[ ]se utilizan para añadir atributos con valores a un elemento.
-
El símbolo de dólar/peso
$se utiliza para enumerar valores que se hayan repetido.
-
Las llaves
{ }se utilizan para ingresarle texto al elemento que le precede.
⚠ Cabe mencionar, que para utilizar Emmet, solo debemos presionar la tecla [Enter] o [Tab], justo cuando el plugin de Emmet esté activo, como se muestra en la imagen:
Para elementos compuestos de varias partes del mismo nivel, podemos utilizar los paréntesis () y el signo de suma +.
Todo se entiende mejor en imágenes así que veamos:
-
Con el signo de suma
+agregamos hermanos (elementos al mismo nivel)
-
Con los paréntesis, agregamos grupos al mismo nivel
Como podemos ver, son dos características que van muy de la mano. Se complementan a un 100%
Para crear textos predeterminados (que sirva para rellenar espacios, como si de un borrador se tratase) con solo escribir lorem, obtendremos lo siguiente:
Una de las caracteristicas de este texto, es que su longitud de palabras y/o caracteres es al azar.
¿Cómo podríamos determinar la longitud de la cadena de texto en caso de necesitar un texto predeterminado para un título? ¿o simplemento un texto muy corto?
Muy fácil, de la siguiente manera: lorem5
Determinando con el número de la longitud que queremos después de la palabra lorem podemos establecer nuestra longitud.
De esta manera, es como podemos construir componentes de HTML en una sola línea de código.
Este fue un muy pequeño ejemplo de lo que se puede llegar a hacer con el plugin de Emmet.
También existen atajos para CSS, si te interesa seguir aprendiendo más atajos, te invito a que visites la CheatSheet (hoja de trucos) de Emmet.