Prettier es una herramienta brillante que hace que su código sea más consistente y legible. Lo hace agregando automáticamente una guía de estilo a su proyecto. También se integra con su editor para limpiar su trabajo mientras lo guarda. Tener una herramienta de formato predeterminada en su editor de código es útil, ya que le garantiza que no perderá tiempo formateando su trabajo. Esto le da más tiempo para concentrarse en los aspectos esenciales del proyecto y evitar atascarse con interminables líneas de código. Prettier también ayudará a prevenir errores en su código al facilitar la identificación de dónde comienzan y terminan los bloques.

Cómo usar Prettier en VS Code

Si ha estado pensando en usar Prettier en Visual Studio Code (VS Code), ha venido al lugar correcto. Aquí, lo guiaremos a través de todo lo que necesita saber sobre la herramienta de formato predeterminada.

Instalación de Prettier en VS Code

Para usar Prettier en VS Code, deberá instalar la extensión con el método que se describe a continuación. La herramienta de formato está disponible en el mercado de VS Code y, una vez integrada, agilizará automáticamente sus proyectos. Dará formato al código escrito en JavaScript, React, Typescript, Vue y otros lenguajes. Empecemos:

  1. Abre VS Code y presiona el ícono de Extensiones.
  2. Ingrese "Prettier" en la barra de búsqueda y presione el ícono de la lupa.
  3. Seleccione la extensión oficial de Prettier de la lista.
  4. Presiona el botón "Instalar".
  5. Una vez que Prettier esté instalado, presione el botón Recargar para completar el proceso.

La extensión Prettier ahora está instalada en VS Code.

AD

Dar formato a un documento

Con Prettier instalado en la plataforma, ahora puede usarlo para formatear su código. Puede hacer esto manualmente para cada documento o configurarlo para que el código se formatee cuando lo guarde. Exploremos estos dos métodos.

Formatear manualmente el documento en VS Code usando Prettier

  1. Abra el centro de comando presionando Comando + Shift + P "si usa una Mac. Para aquellos en Windows, haga clic en "Control + Shift + P".
  2. Busque "Formato" en la barra de búsqueda, luego elija "Formatear documento".
  3. Seleccione su formato preferido de las opciones disponibles y haga clic en "Configurar".
  4. Haga clic en "Prettier - Code Formatter" para formatear el código.

Su documento tendrá los ajustes de línea, comillas simples y espacios apropiados. Este proceso también funcionará en sus archivos CSS.

Formatee automáticamente el documento en VS Code usando Prettier

  1. Abra el menú de configuración de VS Code tocando "Comando +, (coma)" si usa una Mac. Haga clic en "Control +, (coma)", si es usuario de Windows.
  2. Vaya a la barra de búsqueda e ingrese "Editor: Formatear al guardar".
  3. Asegúrese de que tenga una marca de verificación.

Prettier ahora se configura automáticamente y formateará su código cuando presione "Guardar". Se asegurará de que solo se utilicen comillas simples. La longitud de la línea también se ajustará a un número determinado de caracteres. Estos cambios se aplicarán a todos sus proyectos, lo que podría no ser ideal si trabaja con un equipo. En este caso, puede instalar el conmutador de formato de Prettier, que le permitirá activar y desactivar la herramienta según sea necesario.

Cómo configurar Prettier en VS Code

Hay varias opciones de formato que Prettier hace por defecto. No obstante, también puedes configurar los ajustes a tu gusto. Por ejemplo, puede decidir entre comillas simples y dobles. También puede elegir incluir o no punto y coma. Aquí se explica cómo configurar los ajustes de Prettier en VS Code.

  1. Vaya a Configuración haciendo clic en "Comando +, (coma)" si está usando una Mac o "Control +, (coma)" para Windows.
  2. Busque "Prettier" para ver una lista de las configuraciones que se muestran.
  3. Puede cambiarlos en el editor y luego presionar "Guardar" cuando haya terminado.

Sus ajustes de Prettier ahora se han configurado a su gusto.

Formatee el documento en el código VS usando la línea de comando Prettier

La interfaz de línea de comandos (CLI) de Prettier le permite formatear todo su proyecto de una sola vez. Usando la línea de comando a continuación, puede instalarlo desde el mercado de VS Code.

npm install prettier --global

Luego, actualice el código actual usando el comando que se muestra aquí.

prettier “*/.ts” --write

Eso es todo. Su proyecto ahora ha sido formateado utilizando la CLI de Prettier. Es esencial tener en cuenta que, por conveniente que sea de usar, la CLI puede dificultar el uso de algunos archivos. Por ejemplo, puede ser difícil acceder a los archivos de culpa de git que Prettier ya haya modificado.

Más bonito con el clic de un botón

Con Prettier, puede crear fácilmente una forma simple y efectiva de formatear su código manualmente. También puede optar por optimizar automáticamente su trabajo cuando lo guarde. Esta herramienta de ahorro de tiempo es fácil de configurar en el código VS y le permite concentrarse más en lo esencial.

¿Has usado Prettier en VS Code? ¿Cuál ha sido tu experiencia? Háganos saber en los comentarios a continuación.