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 de Visual Studio 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 para formatear en Visual Studio Code, sea el que sea, al usar usar Prettier VSCode nos ayudamos 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 al formatear en Visual Studio Code.
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 al usar Prettier VSCode, podremos definir claramente en qué línea de código crear un breakpoint, al formatear en Visual Studio Code.
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 y usar Prettier VSCode para tu provecho.
¿Cómo utilizar Prettier en Visual Studio Code?
Ahora que sabes en qué consiste la herramienta, hablemos cómo usar Prettier. 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 VSCode- 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 y seguir aprendiendo cómo usar Prettier.
Una vez tengas instalada la extensión y esté habilitada globalmente, podrás utilizar y aprender cómo usar 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 VSCode 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!
