11

Atajos para la escritura de código Frontend

Cuando empezamos nuestro camino de aprendizaje en programación web dedicado al Frontend, en HTML y CSS aprendemos sobre etiquetas, selectores y propiedades, lo que nos toma un buen tiempo ya que no son pocas, esto significa mucho más tiempo para escribir nuestro código, claro que la practica hace al maestro y el tiempo nos dará la agilidad anhelada, sin embargo, existen herramientas y atajos que nos permiten avanzar de manera efectiva y eficiente en la escritura de nuestro código, acortando nuestra curva de aprendizaje y de las cuales vamos a compartir contigo las más conocidas.

Con plugin o extension

La más utilizada es EMMET es una extensión o plugin para editores de código que nos ayuda autocompletando la sintaxis de las etiquetas de HTML y de propiedades en CSS.

Emmet.png

En HTML:

  • Puedes añadir selectores de CSS a etiquetas de HTML así:
p.paragraph ==> <p class="paragraph">

  • Cuando es una etiqueta <div> se puede omitir el nombre de la etiqueta y pasar directamente al selector
.app ==> <div class="app"> </div>

#app ==>  <div id="app">

  • Adicionalmente puedes encapsular o envolver etiquetas de HTML con sus respectivos selectores CSS utilizando el símbolo > o su código ascii Alt + 62
.main>p.parrafo ==>

<div class="main">
    <p class="parrafo">
</div>

  • Puedes incluir múltiples etiquetas dentro de un encapsulador utilizando el símbolo + o su código ascii Alt + 43
section.main>p.parrafo1+img.image+a+p.parrafo2 ==> 

<section class="main">
   <p class="parrafo1">
   <img src="" alt="" class="image">
   <a href=""></a>
   <p class="parrafo2">
</section>

  • Incluso añadir comentarios de CSS según el selector, con | c al final del atajo
div>div#page>p.title+p|c ==>

<div><divid="page"><pclass="title"></p><!-- /.title --><p></p></div><!-- /#page --></div>
  • También digitar textos dentro de las etiquetas HTML con ese propósito por ejemplo <article>, <h1>, <p>, <textarea> y otras por medio de los corchetes { }
.main>p.parrafo1{ aquí va el texto }+img.image+a+p.parrafo2|c ==> 

<divclass="main"><pclass="parrafo1"> aquí va el texto </p><!-- /.parrafo1 --><imgsrc=""alt=""class="image"><ahref=""></a><pclass="parrafo2"></p><!-- /.parrafo2 --></div><!-- /.main -->
  • Puedes darle dos selectores a una misma etiqueta agrupándolas entre llaves [ ] e indicándole el orden de cada una con el símbolo_$_ antes de los corchetes { }
ul>li[id=${1} class=${2}] ==> 
        
<ul><liid=""class=""></li></ul>
  • Se pueden agrupar etiquetas con paréntesis ( )
div>(header>h1.title1)+(section>article>h2.title2+p)+footer>ul>li*3 ==> 
        
<div><header><h1class="title1"></h1></header><section><article><h2class="title2"></h2><p></p></article></section><footer><ul><li></li><li></li><li></li></ul></footer></div>
  • Multiplicar etiquetas HTML con el símbolo * más el número de ítems que se desean
ul>li.item$*5 ==> 
        
<ul>
    <liclass="item1"></li>
    <liclass="item2"></li>
    <liclass="item3"></li>
    <liclass="item4"></li>
    <liclass="item5"></li>
</ul>


En CSS:

  • En los nombres de las propiedades y se les puede incluir el valor

(Con valor fijo)

body {
   m10 ==> margin: 10px; 
}

(Con valor flotante)

body {
   m1.5 ==> margin: 1.5em;
}

• En los colores utilizando hexadecimales

body {
  background-color: #1 ==> #111111;
  border: #e0 ==> #e0e0e0;
  color: #fc0 ==> #ffcc00;
}


En teclado

Dependiendo del editor con el que trabajes existen muchos atajos, a continuación, te dejo los links para tres de los principales editores:

Visual Studio Code:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Sublime Text:https://www.shortcutfoo.com/app/dojos/sublime-text-3-win/cheatsheet

Atom:https://github.com/nwinkler/atom-keyboard-shortcuts

Aquí los más utilizados

  • Selección de una palabra repetida dentro del código, puede ser una etiqueta, un selector o cualquier palabra, con la tecla Ctrl o Cmd + la tecla D
    key1.jpg
  • Seleccionar múltiples líneas para eliminar espacio sin borrarlas, para esto utilizamos el conjunto de teclas Ctrl o Cmd + Alt + flecha arriba o abajo dependiendo desde donde se realice la selección.
    key2.jpg
  • Mover líneas dentro de bloques de código o etiquetas contenedoras, esto lo realizamos con las teclas Alt + la tecla de flecha arriba o abajo
    key3.jpg

Más allá de HTML y CSS

Cuando ya empieces a profundizar en otros lenguajes también encontraras plugins o extensiones para estos, por ejemplo, JavaScript, Php, Java, y sus respectivos frameworks como Angular, React, Laravel, etc. Que te ayudan a autocompletar la sintaxis de los mismos, otras para conectar con servicios como Git, Github, Docker, para medir el tiempo y los lenguajes que utilizas, serán un número inimaginable de herramientas que te ayudarán a escribir código a una buena velocidad y te permitirán aumentar tu productividad.

Te dejo las recomendaconies de Oscar Barajas (gndx), sobre los 10 Plugins o extensiones esenciales para Frontend

No lo olvides…

Sí sabes otros atajos o extensiones que ya uses y quieras compartir con la comunidad, ponla en los comentarios.

Escribe tu comentario
+ 2
Ordenar por:
2
5484Puntos
3 años

Excelente, muchas gracias 😄

2
8374Puntos
3 años

Gracias por este aporte a la comunidad, gran ayuda para quienes empezamos en el ecosistema!

1
7647Puntos
3 años

Aprecio tu esfuerzo, lástima que muchas veces no es recompensado debidamente.