Un proyecto de programación no es solo líneas de código una tras 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é encontrarás en este post?

¿Qué es Prettier en Visual Studio Code?

Prettier en Visual Studio Code es una herramienta que nos permite diseñar el formato del código que estamos escribiendo. En inglés, este tipo de herramientas de VS code 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. Prettier es compatible con una amplia variedad de lenguajes, incluyendo JavaScript, TypeScript, HTML, CSS, y más.

Beneficios de utilizar Prettier en Visual Studio Code

Utilizar un code formatter para formatear en Visual Studio Code, sea el que sea, nos ayuda a ordenar nuestro código para que sea más fácil de leer. De esta manera, nos ahorra tiempo y energía al automatizar una de las partes de la escritura de código. Además, nos permite evitar disputas sobre el formato del código cuando estamos trabajando en grandes equipos, pues mantiene un único estilo a lo largo del proyecto al formatear en Visual Studio Code.

Ventajas adicionales:

Consistencia del código: Mantiene un estilo uniforme de código en todo el proyecto.
Ahorro de tiempo: Automatiza la tarea de formatear el código, permitiendo a los desarrolladores centrarse en la lógica y funcionalidad.
Mejor colaboración: Facilita la colaboración en equipos grandes al reducir las diferencias de estilo de código.

Una de tantas funciones de un code formatter como Prettier en Visual Studio Code, 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 en Visual Studio Code, 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 de 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.

Configuraciones avanzadas de Prettier

Prettier permite una amplia variedad de configuraciones que pueden ser ajustadas según las necesidades del proyecto. Algunas de estas configuraciones incluyen:

Ancho de línea: Define el ancho máximo de las líneas de código.
Uso de comillas simples o dobles: Puedes configurar Prettier para que utilice comillas simples o dobles de acuerdo a tus preferencias.
Colocación de comas finales: Decide si quieres que Prettier coloque comas al final de los elementos en arrays y objetos.
Uso de punto y coma: Configura si deseas que Prettier use punto y coma al final de las declaraciones.

Estas configuraciones pueden ser establecidas en un archivo .prettierrc en la raíz del proyecto, permitiendo una personalización detallada del estilo de código.

Beneficios para equipos de desarrollo: Prettier es especialmente beneficioso para equipos de desarrollo. Mantiene un estilo de código consistente, lo que facilita la colaboración y reduce los conflictos durante el desarrollo. Al automatizar el formateo del código, se minimiza el tiempo dedicado a debates sobre el estilo de codificación y se maximiza la productividad del equipo.

Comparación con otros code formatters

Aunque Prettier es una de las herramientas de formateo de código más populares, existen otras opciones como ESLint, Tidy y JSBeautify. Comparar estas herramientas puede ayudar a determinar cuál es la mejor para tus necesidades específicas. Prettier se destaca por su simplicidad y enfoque en la consistencia, mientras que otras herramientas pueden ofrecer configuraciones más detalladas y específicas.

Impacto en el rendimiento del editor

Prettier es una herramienta eficiente, pero es importante considerar su impacto en el rendimiento del editor, especialmente en proyectos grandes. Configurar Prettier para que solo formatee ciertos archivos o carpetas puede ayudar a mantener el rendimiento de Visual Studio Code.

Mejores prácticas para utilizar Prettier en proyectos grandes

Configura un archivo .prettierrc: Define las configuraciones de Prettier en un archivo .prettierrc en la raíz del proyecto para asegurar la consistencia.
Integra con ESLint: Utiliza Prettier junto con ESLint para mantener el código limpio y libre de errores.
Automatiza con scripts de npm: Configura scripts de npm para formatear el código automáticamente durante las fases de desarrollo y despliegue.
Capacita a tu equipo: Asegúrate de que todos los miembros del equipo estén familiarizados con el uso de Prettier y entiendan sus beneficios.

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!