¿Cómo utilizar Prettier en Visual Studio Code?

Autor: | Última modificación: 28 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Un proyecto de programación no es solo líneas de código una tras de otra. Como todo archivo, los documentos de JavaScript y otros lenguajes de programación tienen un orden, jerarquía y estética. Para ayudarnos a mantener este orden, existen los code formatter o diseñadores de formato de código. En este post, te enseñaremos cómo utilizar Prettier en Visual Studio Code, uno de los code formatter más conocidos.

¿Qué es Prettier en Visual Studio Code?

Prettier es una herramienta que nos permite diseñar el formato del código que estamos escribiendo. En inglés, este tipo de herramientas se conocen como code formatter. Aunque en este post hablaremos de utilizar Prettier en Visual Studio Code, esta es una herramienta indiferente al lenguaje de programación con el que estemos desarrollando e incluso al soporte de edición o software que estemos utilizando.

Entonces, ¿exactamente en qué nos beneficia utilizar Prettier en Visual Studio Code? Utilizar un code formatter, sea el que sea, nos ayuda a ordenar nuestro código para que sea más fácil de leer. De esta manera, nos ahorran tiempo y energía al automatizar una de las partes de la escritura de código. Además, nos permiten evitar disputas sobre el formato del código cuando estamos trabajando en grandes equipos, pues mantienen un único estilo a lo largo del proyecto.

Una de tantas funciones de un code formatter, por ejemplo, es indentar las líneas de código para que podamos ver claramente la jerarquía de nuestros elementos. Con esto nos referimos a la posición de izquierda a derecha en la que empieza cada línea de código. Los objetos padre deberán estar más cerca al inicio de la línea, mientras que sus hijos deberán tener una pequeña sangría que represente su jerarquía.

Indentar líneas de código es muy útil cuando utilizamos herramientas como el debugger de JavaScript, con el que es recomendable pausar el código en la línea que esté más a la derecha o, lo que es lo mismo, más indentada. Entonces, gracias al code formatter, podremos definir claramente en qué línea de código crear un breakpoint.

Ten presente que al utilizar Prettier en Visual Studio Code basta con que guardes tu archivo para que el código se organice automáticamente en el formato. Si todavía tienes dudas sobre cómo funciona, te invitamos a probarlo por ti mismo en el test online de Prettier.

¿Cómo utilizar Prettier en Visual Studio Code?

Antes de utilizar Prettier en Visual Studio Code, deberás ir al panel de extensiones en el lado izquierdo del software. Allí, podrás buscar la extensión Prettier y te saldrá una opción llamada Prettier – Code formatter, en la que tendrás que clicar. Una vez entres, te deberá aparecer la opción de instalar esta extensión en uno de los botones azules. En el otro botón, podrás controlar el rango de acción de la extensión. Te recomendamos que le des permiso para estar habilitada globalmente.

Una vez tengas instalada la extensión y esté habilitada globalmente, podrás utilizar Prettier en Visual Studio Code con COMMAND + SHIFT + P en macOS o con CTRL + SHIFT + P en Windows. Esta acción te abrirá una barra de navegación en la que puedes buscar >Format Document y pinchar en esta opción. Con ello, estarás haciendo que Prettier ajuste los espacios, indentados y demás.

¿Qué sigue?

Ahora que ya sabes cómo funciona la extensión Prettier en Visual Studio Code, es el momento de dar un paso más en tu formación. Primero, te invitamos a que lo instales y lo pruebes en tus propios proyectos de programación, ya que la práctica es la mejor forma de aprender. Después, para seguir conociendo el mundo de la programación para la web, con sus lenguajes y softwares, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp.

Gracias a esta formación íntegra e intensiva, en pocos meses y con una metodología que combina la teoría y la práctica, te convertirás en un experto del desarrollo web. ¡Anímate a matricularte ya y destaca en el sector IT!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!