Prettier: simplificando el formateo de código en VS Code
Prettier es una herramienta brillante que hace que mi código sea más consistente y legible. Lo hace automáticamente agregando una guía de estilo a mi proyecto. Además, se integra con mi editor para limpiar mi trabajo cada vez que lo guardo. Tener una herramienta de formato estándar en mi editor de código es útil, ya que me asegura que no perderé tiempo formateando mi trabajo. Esto me da más tiempo para concentrarme en los aspectos esenciales del proyecto y evito atascarme en interminables líneas de código. Prettier también me ayuda a evitar errores en mi código al facilitar la identificación de dónde comienzan y terminan los bloques.
Si estás pensando en usar Prettier en Visual Studio Code (VS Code), has venido al lugar correcto. Aquí, te explicaré todo lo que necesitas saber sobre esta herramienta de formato predeterminada.
Instalación de Prettier en VS Code
Para usar Prettier en VS Code, debes instalar la extensión siguiendo estos pasos:
- Abre VS Code y haz clic en el ícono de Extensiones.
- Escribe “Prettier” en la barra de búsqueda y haz clic en el ícono de la lupa.
- Selecciona la extensión oficial de Prettier de la lista.
- Presiona el botón “Instalar”.
- Una vez instalado, presiona el botón Recargar para completar el proceso.
Ahora la extensión de Prettier está instalada en VS Code.
Formateo de un documento
Con Prettier instalado, ya puedes usarlo para formatear tu código. Puedes hacerlo manualmente para cada documento o configurarlo para que el código se formatee automáticamente al guardarlo. Exploraremos ambos métodos.
Formateo manual del documento en VS Code usando Prettier
- Abre el centro de comando presionando Comando + Shift + P en Mac, o Control + Shift + P en Windows.
- Busca “Formato” en la barra de búsqueda y elige “Formatear documento”.
- Selecciona tu formato preferido de las opciones disponibles y haz clic en “Configurar”.
- Haz clic en “Prettier – Code Formatter” para formatear el código.
Tu documento ahora tendrá los saltos de línea, comillas simples y espacios apropiados. Este proceso también funciona para archivos CSS.
Formateo automático del documento en VS Code usando Prettier
- Abre el menú de configuración de VS Code tocando Comando +, (coma) en Mac, o Control +, (coma) en Windows.
- Ve a la barra de búsqueda y escribe “Editor: Formatear al guardar”.
- Asegúrate de que esté marcado.
Ahora Prettier se configurará automáticamente y formateará tu código cuando lo guardes. Esto asegurará que se utilicen comillas simples y que la longitud de línea se ajuste correctamente. Estos cambios se aplicarán a todos tus proyectos, lo cual puede no ser ideal si trabajas en equipo. En ese caso, puedes instalar el conmutador de formato de Prettier para activar y desactivar la herramienta según sea necesario.
Configuración de Prettier en VS Code
Prettier ofrece varias opciones de formato por defecto, pero también puedes configurar los ajustes según tus preferencias. Por ejemplo, puedes elegir entre comillas simples y dobles, o incluir o no un punto y coma. Aquí te explico cómo configurar los ajustes de Prettier en VS Code:
- Ve a Configuración haciendo clic en Comando +, (coma) en Mac, o Control +, (coma) en Windows.
- Busca “Prettier” para ver una lista de las configuraciones mostradas.
- Haz los cambios deseados en el editor y haz clic en “Guardar”.
Ahora tu configuración de Prettier estará ajustada a tus preferencias.
Formatea el documento en VS Code usando Prettier CLI
La interfaz de línea de comandos (CLI) de Prettier te permite formatear todo tu proyecto de una vez. Para instalarlo desde el mercado de VS Code, utiliza el siguiente comando:
npm install prettier --global
Luego, actualiza tu código usando este comando:
prettier “*/.ts” --write
¡Eso es todo! Tu proyecto ahora estará formateado utilizando Prettier CLI. Sin embargo, ten en cuenta que aunque es conveniente de usar, la CLI puede dificultar el uso de algunos archivos, como los archivos afectados por git que Prettier ya haya modificado.
Más belleza con un solo clic
Con Prettier, puedes crear de manera fácil y efectiva un método sencillo para formatear manualmente tu código. También puedes simplificar automáticamente tu trabajo al guardarlo. Esta herramienta que ahorra tiempo es fácil de configurar en VS Code y te permite enfocarte en lo esencial.
¿Has utilizado Prettier en VS Code? ¿Cuál ha sido tu experiencia? Cuéntanos en los comentarios a continuación.
Contenido