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

Introducción

Formatear código de forma consistente puede ser un desafío, pero las herramientas modernas para el desarrollador hacen que sea posible mantener automáticamente la consistencia en toda la base de código de su equipo.

En este artículo, configurará Prettier para que formatee de forma automática su código en Visual Studio Code, también conocido como VS Code.

A efectos de demostración, aquí tiene el código de muestra que formateará:

const name = "James";

const person ={first: name
}

console.log(person);

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

sayHelloLinting('James');

Si está familiarizado con el formateo de código, es posible que observe pasos erróneos:

• Una mezcla de comillas simples y dobles.
• La primera propiedad del objeto person debería estar en su propia línea.
• La instrucción de la consola dentro de la función debería estar con sangría.
• Es posible que no le gusten los paréntesis opcionales que rodean el parámetro de la función de flecha.

Requisitos previos

Para seguir este tutorial, necesitará descargar e instalar Visual Studio Code.

Para trabajar con Prettier en Visual Studio Code, deberá instalar la extensión. Para hacer esto, busque Prettier - Code Formatter en el panel de extensión de VS Code. Si lo está instalando por primera vez, verá un botón install en vez del botón uninstall mostrado aquí:

Paso 1: Usar el comando Format Document

Con la extensión Prettier instalada, ahora puede usarla para formatear su código. Para comenzar, vamos a explorar el uso del comando Format Document. Este comando hará que su código sea más consistente con el espaciado formateado, el ajuste de líneas y las comillas.

Para abrir la paleta de comandos, puede usar COMMAND + SHIFT + P en macOS o CTRL + SHIFT + P en Windows.

En la paleta de comandos, busque format y seleccione Format Document.

Quizá se le pida elegir qué formato usar. Para hacerlo, haga clic en el botón Configure:

Seleccione Prettier - Code Formatter.

Su código ahora está formateado con espacios, ajuste de líneas 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. Puede convertir algo con sangría inconsistente, corchetes, nuevas líneas y puntos y comas en código con un buen formato. Por ejemplo:

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

Se formateará a:

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

Ahora que hemos explorado este comando, vamos a ver cómo esto puede implementarse para que se ejecute automáticamente.

Paso 2: Formatear código en Save

Hasta ahora, ha tenido que ejecutar manualmente un comando para formatear su código. Para automatizar este proceso, puede elegir un ajuste en VS Code para que sus archivos se formateen automáticamente cuando guarde. Esto también garantiza que el código no se comprueba a un control de la versión que no esté formateado.

Para cambiar este ajuste, pulse COMMAND + en macOS o CTRL + ,en Windows para abrir el menú Settings. Una vez abierto el menú, busque Editor: Format On Save y asegúrese de que la opción está seleccionada:

Una vez configurado esto, puede escribir su código de la forma habitual y se formateará automáticamente cuando guarde el archivo.

Paso 3: Cambiar los ajustes de configuración de Prettier

Prettier hace muchas cosas por usted de forma predeterminada, pero también puede personalizar la configuración.

Abra el menú Settings. A continuación busque Prettier. Esto abrirá todos los ajustes que puede cambiar:

Aquí tiene algunos de los ajustes más comunes:

• Single Quote - Elija entre comillas sencillas y dobles
• Semi - Elija si desea incluir o no puntos y comas al final de las líneas.
• Tab Width - Especifique cuántos espacios desea que inserte el tabulador.

La desventaja de usar el menú de ajustes integrados en VS Code es que no garantiza la consistencia entre los desarrolladores de su equipo.

Paso 4: Crear un archivo de configuración de Prettier

Si cambia los ajustes en VS Code, otra persona podría tener una configuración completamente diferente en su equipo. Puede establecer un formato consistente entre todo su equipo creando un archivo de configuración para su proyecto.

Cree un nuevo archivo llamado .prettierrc.extension con una de las siguientes extensiones:

• yml
• yaml
• json
• js
• toml

Aquí tiene un ejemplo de un archivo de configuración sencillo usando JSON:

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

Para obtener más información sobre los archivos de configuración, eche un vistazo a la documentación de Prettier. Tras crear uno de estos archivos e introducirlo en su proyecto, puede garantizar que todos los miembros de su equipo siguen las mismas reglas de formato.

Conclusión

Tener un código consistente es una buena práctica. Es particularmente beneficioso cuando se trabaja en un proyecto con múltiples colaboradores. Acordar un conjunto de configuraciones ayuda en la legibilidad y comprensión del código. Puede dedicarse más tiempo a resolver problemas técnicos difíciles en vez de luchar contra problemas resueltos como la sangría del código.

Prettier garantiza consistencia en el formato de su código y hace que el proceso sea automático.