10Feb

El espaciado, comas, puntos y coma, etc. Algo que intentamos respetar siempre durante la programación, pero que a veces cometemos errores de sintáxis que aunque el transpilador de Javascript ignora puede traernos bastantes dolores de cabeza, en especial en el control de la calidad del código y revisión de los commits de los programadores.

En otros casos no son errores, si no la configuración usada por nuestro editor de código la que provoca esta desinformación dentro de nuestro repositorio de código.

Un ejemplo claro de dolores de cabeza y de desinformación es relativo a proyectos dentro de equipos de programación donde cada uno tiene editor y formato de código diferente. Hay programadores que ya tiene el formato automático dentro de su editor integrado en el guardado del archivo y reconfigurarlo o quitarlo para un proyecto si trabajan en múltiples proyectos también es una inversión de tiempo que puede ser muy grande.

Información de Git

Cuando esto sucede, Git nos da más información de la necesaria en las diferencias de código, y esta información no es útil.

Si la indentación de los bloques difiere entre programadores, el diferencial del archivo mostrará todo el bloque como eliminado y luego añadido, a pesar de que solo hay diferencias de indentación.

Formato de código

Estantería con libros
Algo de orden …

Lo más habitual es acordar para ese proyecto un formato de código, a ser posible, lo más cerca del estándar de ese lenguaje, si existe.

Como ejemplo, vamos a mostrar como añadir formato de Javascript dentro de un proyecto Vue, pero la mecánica con diferentes librerías sería aplicable a cualquier lenguaje.

Ya tratamos anteriormente el formateo automático de PHP en otro artículo.

Añadiendo Prettier

Para añadir Prettier a nuestro proyecto Vue basta con instalarlo con Yarn o NPM

# con npm
npm install --save prettier
# con yarn
yarn add prettier

Luego añadimos la tarea de formato de código a nuestro fichero package.json como sigue (vamos a formatear los archivos vue, js y scss en el ejemplo)

// ...
scripts {
  // ...
  "prettier": "prettier --write src/**/*.js && prettier --write src/**/*.vue && prettier --write src/**/*.scss"
  // ...
}

Las opciones de prettier para la configuración podéis revisarlas en el siguiente enlace: Configuración de Prettier

Una vez acordado con el equipo el formato a usar, crearemos un archivo .prettierrc.toml con la configuración. En el bloque de código que sigue mostramos un ejemplo de configuración

trailingComma = "es5"
tabWidth = 2
semi = false
singleQuote = true
# con npm
npm run-script prettier
# con yarn
yarn prettier
Leave a comment