Introducción
Formatear código siempre es un desafío, pero las herramientas modernas para desarrolladores permiten mantener automáticamente la coherencia en el código base de tu equipo. En este artículo, configurarás Prettier para formatear automáticamente tu código en Visual Studio Code, también conocido como VS Code.
Para fines de demostración, aquí hay un ejemplo del código que está formateando:
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 formato de código, es posible que observe algunos pasos incorrectos:
- Una combinación de comillas simples y dobles.
- La primera propiedad del objeto Persona debe estar en su línea.
- La declaración de la consola dentro de la función debe estar sangrada.
- Es posible que le gusten o no los paréntesis opcionales alrededor del parámetro de función de flecha.
Requisitos previos
- Descargue e instale Visual Studio Code.
- Para usar Prettier en Visual Studio Code, necesita instalar el complemento. Para ello, busque Prettier – Code Formatter en el panel de complementos de VS Code. Si es la primera vez que lo instala, verá el botón Instalar en lugar del botón Desinstalar que se muestra aquí:
Paso 1 – Uso del comando Formato de documento
Con el complemento Prettier instalado, ya puedes usarlo para formatear tu código. Para empezar, exploremos el uso del comando "Formatear Documento". Este comando mejora la coherencia del código con el espaciado formateado, el ajuste de línea y las comillas.
Para abrir la paleta de comandos, puede utilizar COMANDO + MAYÚS + P En macOS o CTRL + MAYÚS + P Usar en Windows.
En la paleta de comandos, busque Formato y luego Formato del documento Seleccionar.
Es posible que se le pida que seleccione el formato. Para ello, haga clic en el botón Configurar.
A continuación, seleccione Prettier – Code Formatter.
Su código ahora está formateado con espaciado, ajuste de línea y comillas fijas:
const name = "James";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("James");Esto también funciona con archivos CSS. Puedes convertir texto con sangrías, paréntesis, saltos de línea y punto y coma inconsistentes en código con el formato correcto. Por ejemplo:
body {color: red;
}
h1 {
color: purple;
font-size: 24px
}Tiene el siguiente formato:
body {
color: red;
}
h1 {
color: purple;
font-size: 24px;
}Ahora que hemos revisado este comando, veamos cómo podemos hacer que se ejecute automáticamente.
Paso 2 – Formatear el código al guardar
Hasta ahora, tenías que ejecutar manualmente un comando para formatear tu código. Para automatizar este proceso, puedes configurar VS Code para formatear automáticamente tus archivos al guardar. Esto también garantiza que no se registre código sin formato en el control de versiones.
Para cambiar esta configuración, COMANDO + en macOS o CTRL + Presione en Windows para abrir el menú Configuración. Una vez abierto, Editor: Formatear al guardar Busque y asegúrese de que la opción esté marcada:
Una vez configurado, puedes escribir tu código como de costumbre y se formateará automáticamente cuando guardes el archivo.
Paso 3 – Cambiar la configuración más bonita
Prettier hace gran parte del trabajo por ti de forma predeterminada, pero también puedes personalizar la configuración.
Abre el menú Configuración. Busca "Prettier". Aparecerán todas las opciones que puedes cambiar:
A continuación se muestran algunas de las configuraciones más comunes:
- Comillas simples: elija entre comillas simples y dobles.
- Semi – Elija si debe haber punto y coma al final de las líneas.
- Ancho de tabulación: especifique cuántos espacios desea que se inserten en una tabulación.
La desventaja de usar el menú de configuración integrado en VS Code es que no garantiza la coherencia entre los desarrolladores de su equipo.
Paso 4 – Crear un archivo de configuración más atractivo
Si cambias la configuración en VS Code, otra persona podría tener una configuración completamente diferente en su equipo. Puedes crear un formato uniforme para todo tu equipo creando un archivo de configuración para tu proyecto.
Un nuevo archivo llamado extensión prettierrc Crea con una de las siguientes extensiones:
ymlyamlJSONjsToml
A continuación se muestra un ejemplo de un archivo de configuración simple que utiliza JSON:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}Para más detalles sobre los archivos de configuración, consulta la documentación más completa. Una vez que crees uno y lo uses en tu proyecto, podrás asegurarte de que todos en el equipo sigan las mismas reglas de formato.
Introducción
Tener un código consistente es una buena práctica. Es especialmente útil al trabajar en un proyecto con varios colaboradores. Acordar una configuración facilita la legibilidad y la comprensión del código. Se puede dedicar más tiempo a resolver problemas técnicos complejos, en lugar de lidiar con problemas resueltos como la sangría del código.
