Cómo Formatear Código con Prettier en Visual Studio Code

Introducción

El formateo del código de manera consistente es un desafío, pero las herramientas modernas para desarrolladores facilitan mantener la consistencia en la base de código de tu equipo de forma automática.

En este artículo, configurarás Prettier para formatear automáticamente tu código en Visual Studio Code, también conocido como VS Code.

A modo de demostración, aquí tienes el código de muestra que estarás formateando:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Si estás familiarizado con el formateo de código, podrías notar algunos errores:

• A mix of single and double quotes.
• La primera propiedad del objeto person debería estar en su propia línea.
• La declaración de consola dentro de la función debería estar sangrada.
• Puede que te guste o no las paréntesis opcionales que rodean el parámetro de la función de flecha.

Tabla de Contenidos

• Usando el comando de formato de documento
• Formateando código al guardar
• Cambiando la configuración de Prettier
• Creando un archivo de configuración de Prettier

Requisitos previos

Para seguir este tutorial, necesitarás:

• Descargar e instalar Visual Studio Code.
• Para trabajar con Prettier en Visual Studio Code, necesitarás instalar la extensión. Para hacer esto, busca Prettier - Code Formatter en el panel de extensiones de VS Code. Si lo estás instalando por primera vez, verás un botón instalar en lugar del botón desinstalar que se muestra aquí:

Paso 1: Usar el comando Formatear Documento

Con la extensión de Prettier instalada, ahora puedes aprovecharla para formatear tu código. Para empezar, exploremos el uso del comando Formatear Documento. Este comando hará que tu código sea más consistente con espacios formateados, ajuste de líneas y comillas.

Para abrir el palet de comandos, puedes usar COMMAND + SHIFT + P en macOS o CTRL + SHIFT + P en Windows.

En el palet de comandos, busca format y luego elige Formatear Documento.

Es posible que luego te pidan que elijas qué formato utilizar. Para hacerlo, haz clic en el botón Configurar:

Luego elige Prettier – Formateador de Código.

Tu código ahora está formateado con espacios, saltos de línea y comillas consistentes:

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

Esto también funciona en archivos CSS. Puedes convertir algo con sangría inconsistente, llaves, nuevas líneas y puntos y coma en código bien formateado. Por ejemplo:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Se reformateará como:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Ahora que hemos explorado este comando, veamos cómo se puede implementar para que se ejecute automáticamente.

Paso 2 — Formatear Código al Guardar

Hasta ahora, has tenido que ejecutar un comando para formatear tu código manualmente. Para automatizar este proceso, puedes elegir una configuración en VS Code para que tus archivos se formateen automáticamente cuando guardes. Esto también garantiza que el código no se verifique en el control de versiones que no esté formateado.

Para cambiar esta configuración, presiona COMMAND + , en macOS, o CTRL + , en Windows para abrir el menú Ajustes. Una vez que el menú esté abierto, busca Editor: Format On Save y asegúrate de que esa opción esté marcada:

Una vez que se establece esto, puedes escribir tu código como de costumbre y se formateará automáticamente cuando guardes el archivo.

Paso 3: Cambiar la configuración de Prettier

Prettier hace muchas cosas por ti por defecto, pero también puedes personalizar la configuración.

Abre el menú Ajustes. Luego, busca Prettier. Esto traerá todas las configuraciones que puedes cambiar:

Aquí hay algunas de las configuraciones más comunes:

• Comillas simples – Elije entre comillas simples y dobles.
• Punto y coma – Elije si deseas incluir o no puntos y comas al final de las líneas.
• Ancho de tabulación – Especifica cuántos espacios deseas que inserte una tabulación.

El inconveniente de utilizar el menú de configuración incorporado en VS Code es que no garantiza la consistencia entre los desarrolladores de tu equipo.

Paso 4 — Creación de un archivo de configuración de Prettier

Si cambias las configuraciones en tu VS Code, alguien más podría tener una configuración completamente diferente en su máquina. Puedes establecer una formatoación consistente en tu equipo creando un archivo de configuración para tu proyecto.

Crea un nuevo archivo llamado .prettierrc.extensión con una de las siguientes extensiones:

• yml
• yaml
• json
• js
• toml

Aquí tienes un ejemplo de un archivo de configuración simple utilizando JSON:

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

Para más detalles sobre los archivos de configuración, consulta la Documentación de Prettier. Después de crear uno de estos y guardarlo en tu proyecto, puedes asegurarte de que todos los miembros del equipo sigan las mismas reglas de formato.

Conclusión

Tener un código consistente es una buena práctica. Es especialmente beneficioso cuando se trabaja en un proyecto con múltiples colaboradores. Llegar a un acuerdo sobre un conjunto de configuraciones ayuda con la legibilidad y comprensión del código. Se puede dedicar más tiempo a resolver problemas técnicos desafiantes en lugar de luchar con problemas resueltos como la indentación del código.

Prettier asegura la consistencia en el formato de tu código y hace que el proceso sea automático.