Cómo configurar Prettier en VSCode

Si eres un programador o programadora, sabrás lo importante que es mantener un código limpio y organizado. Una herramienta que puede ayudarte en esta tarea es Prettier, un formateador de código que te permite mantener una consistencia en tu trabajo. Si utilizas Visual Studio Code (VSCode) como tu editor de código, estás de suerte, porque es muy fácil de configurar.

En este artículo te vamos a explicar cómo configurar Prettier en VSCode para que puedas mantener tu código siempre ordenado y legible. No te preocupes si eres nuevo en esto, te vamos a guiar paso a paso para que puedas implementar esta herramienta en tu flujo de trabajo. ¡Empecemos!

Configura Prettier en VS Code

Si te gusta programar, probablemente sepas que la indentación y el formato de tu código puede tener un gran impacto en la legibilidad y en la facilidad de mantenimiento del mismo. Aquí es donde entra en juego Prettier.

Prettier es una herramienta de formateo de código para múltiples lenguajes de programación que te ayudará a mantener el estilo y la coherencia de tu código. Si usas Visual Studio Code, configurarlo para usar Prettier es una tarea sencilla.

Aquí te explicamos cómo hacerlo:

1. Primero, debes instalar la extensión de Prettier en VS Code. Para hacerlo, ve a la barra lateral de VS Code y haz clic en el icono de las extensiones (o usa el atajo de teclado Ctrl + Shift + X en Windows o Cmd + Shift + X en Mac). Busca «Prettier – Code formatter» y haz clic en el botón «Instalar».
2. A continuación, debes configurar VS Code para que use Prettier automáticamente en tus archivos. Para ello, abre la paleta de comandos de VS Code (Ctrl + Shift + P en Windows o Cmd + Shift + P en Mac) y escribe «settings.json» en el cuadro de búsqueda. Haz clic en la opción «Preferences: Open Settings (JSON)».
3. En el archivo settings.json, agrega las siguientes líneas:

«editor.formatOnSave»: true,
«editor.defaultFormatter»: «esbenp.prettier-vscode»

4. Guarda los cambios en el archivo settings.json.
5. Listo, ahora VS Code usará automáticamente Prettier para formatear tu código cada vez que guardes un archivo.

Simplemente instala la extensión de Prettier y agrega las líneas necesarias en el archivo settings.json. ¡Y listo! Tu código se verá más limpio y ordenado en poco tiempo.

Formateo de código con Prettier

Prettier es una herramienta que se utiliza para formatear el código de una forma consistente en cualquier proyecto de programación. Si eres de los que le gusta mantener un código limpio, organizado y fácil de leer, entonces Prettier es una excelente opción para ti.

Lo primero que debes hacer si quieres configurar Prettier en VSCode es instalar la extensión de Prettier en el editor. Una vez instalada, puedes configurarla para que se ejecute automáticamente cada vez que guardes un archivo.

Prettier es muy fácil de usar, ya que no requiere de configuraciones complejas. Solo necesitas agregar un archivo de configuración llamado «.prettierrc» en la raíz del proyecto. Este archivo contiene las reglas de formato que se deben aplicar al código.

Prettier puede formatear muchos tipos de archivos de programación como JavaScript, TypeScript, HTML, CSS, JSON y YAML. Además, tiene soporte para muchos frameworks populares como React, Vue y Angular.

Configurarlo en VSCode es muy fácil y no requiere de mucha experiencia en programación. Si aún no lo has probado, ¡te lo recomiendo! Tu código y tus compañeros de equipo te lo agradecerán.
Espero que este tutorial te haya resultado útil para dejar tu VSCode a punto con Prettier. Si te surge alguna duda, ya sabes, ¡pásate por los comentarios! Gracias por seguir el artículo y suerte con tus futuros proyectos de código.