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.



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>
   <div id="page">
      <p class="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 ==> 

<div class="main">
        <p class="parrafo1"> aquí va el texto </p>
        <!-- /.parrafo1 -->
        <img src="" alt="" class="image"><a href=""></a>
        <p class="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>
    <li id="" 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>
        <h1 class="title1"></h1>
    </header>
    <section>
        <article>
             <h2 class="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>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="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
  
  
• 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.
  
  
• 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
  
  

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.