10

Cómo acomodar/ordenar/organizar TODO tú código SOLO con 3 teclas

Leíste bien este NO es un click bait…
En el curso se gasta mucho tiempo acomodando la indentación del código y hay un atajo para hacerlo:
Alt + Shift + F
Este comando lo que hace es que formatea el documento, si tienes la manera predeterminada de VSCode solo acomodará.

Pero existe una extensión llamada Prettier que tiene otras funciones aparte como:

  • Cerrar las etiquetas que falten automáticamente
  • Lo indentará
  • Cerrará las etiquetas únicas con un slash: ejemplo <imh src=“image.jpg” />
    Entre otras cosas con el objetivo de que tu código sea más legible y organizado

¡Pero eso no es todo!

También puedes personalizar Prettier como tú quieras, te dejo un → Video ← para que lo personalices como mejor te guste a tí:

Y por último si no sabes como instalar extensiones en VSCode lo puedes hacer fácilmente así:
instalar.png

Una vez intentes formatear algún documento con (Alt + Shift + f) te aparecerá un recuadro diciendo que hay múltiples formatos, y le das a configurar:
conf.png

Y seleccionamos prettier:
prettier.png

Nota: Si no te salió ese recuadro o te equivocaste y seleccionaste otro lo podemos arreglar, así:
Le damos al engranaje, y después en ajustes:
ajustes.png

Una vez en ajustes de damos a esa hoja que aparece arriba en la derecha:
hoja.png
Y escribimos los lenguajes en los que queremos usar prettier:
lenguajes.png

Te paso la configuración del código por si a caso :

"[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
"[css]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    },

Si llegaste hasta acá y se te hizo interesante este tutorial no olvides darle corazón 💚💚💚😄

Escribe tu comentario
+ 2
3
8Puntos

Excelente herramienta gracias