Cómo formatear código con Prettier en Visual Studio Code

Al escribir código, a menudo es difícil concentrarse en mantenerlo visualmente ordenado. La indentación, las comillas simples o dobles y los puntos y comas pueden parecer detalles insignificantes cuando uno está inmerso en la lógica compleja de las aplicaciones web modernas.

Aquí es donde entra en juego el formateador de código Prettier. Prettier es un formateador de código personalizable que admite múltiples lenguajes y se integra con la mayoría de los editores de código. En este artículo, veremos cómo usar Prettier en Visual Studio Code.

Configuración del entorno de trabajo

Supondremos que ya tienes Visual Studio Code instalado y un archivo de código que necesita ser formateado. Aquí tienes un ejemplo:

const name = "Hostman";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Hostman');

Este código presenta algunos problemas comunes:

1. Uso inconsistente de comillas.
2. Falta de indentación.
3. Saltos de línea mal colocados.

Si lo ejecutas, funcionará correctamente, ya que JavaScript no depende de estos detalles. Sin embargo, para un lector humano, el código resulta difícil de seguir.

Necesitamos instalar una extensión que agregue automáticamente la indentación, los puntos y comas y otros elementos que hagan el código más legible.

1. Abre la pestaña Extensiones en el menú de VS Code (o presiona Ctrl + Shift + X en Windows).
2. Busca Prettier — esta extensión tiene más de 20 millones de instalaciones.
3. Haz clic en Instalar para agregarla a tu editor.

También hay un método alternativo: presiona Ctrl + P para abrir el panel de ejecución rápida y ejecuta el siguiente comando:

ext install esbenp.prettier-vscode

Este comando instalará directamente la extensión Prettier.

Ahora puedes usar la herramienta para formatear el código rápidamente en VS Code.

Formateo automático

Imagina que tu jefe de proyecto te envía un mensaje por Slack: la página actualizada de Hostman Cloud Server debe estar lista para producción de inmediato. Todo funciona perfectamente, pero el código no está formateado correctamente. Por suerte, ya tienes la extensión Prettier, que puede resolver esto de forma rápida y sencilla.

1. Presiona Ctrl + Shift + P para abrir la paleta de comandos.

    

2. Busca y ejecuta el comando Format Document With.

3. Selecciona Prettier en la lista desplegable.

Tu código será formateado automáticamente con los espacios, indentaciones, saltos de línea y comillas consistentes. Aquí tienes un ejemplo del resultado:

const name = "Hostman";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Hostman");

Esta herramienta es muy práctica y permite una configuración rápida para diferentes lenguajes. Por ejemplo, si ejecutas el formateo automático en un archivo Python, se te sugerirá instalar autopep8. Este programa formatea el código Python automáticamente de acuerdo con la guía de estilo oficial PEP 8, utilizando pycodestyle para identificar áreas que necesitan ajuste. Autopep8 puede corregir la mayoría de los problemas detectados por pycodestyle.

Para evitar tener que formatear manualmente cada vez, activa el formateo automático al guardar:

1. Abre la Configuración (Ctrl + , en Windows).
2. Busca Editor: Format On Save.
3. Marca la casilla para habilitar el formateo al guardar.

¡Y listo! A partir de ahora, el código se formateará automáticamente al guardar los cambios.

Configuración de reglas de formateo personalizadas

Los desarrolladores pueden personalizar sus reglas de formateo de dos maneras:

1. Modificando la configuración directamente en los ajustes de la extensión.
2. Creando un archivo de configuración independiente.

En los ajustes de la extensión, puedes cambiar parámetros comunes como:
el número de espacios por indentación,o si agregar o no un punto y coma al final de cada línea. Este método es rápido, pero la configuración solo se aplicará a tu entorno local. Para compartir las mismas reglas de formateo con todo el equipo, es mejor crear un archivo de configuración compartido. Así, todos los desarrolladores tendrán las mismas reglas en Visual Studio Code.

El archivo .prettierrc puede usar distintas extensiones: .yml, .yaml, .json, .js o .toml. Aquí tienes un ejemplo en formato JSON:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

Conclusión

Prettier es una herramienta que acelera considerablemente el desarrollo aplicando automáticamente las reglas de formato, ya sean predeterminadas o personalizadas.
Después de crear un archivo de configuración, tu equipo tendrá un conjunto unificado de reglas de estilo. Esto permite centrarse en el desarrollo sin preocuparse por la estética del código. Gracias a Prettier, todas esas comas e indentaciones pueden corregirse con unos pocos clics durante la fase de refactorización, lo que te permite concentrarte en lo importante: programar con tranquilidad.