Formatea tu código con Prettier

Antiguamente, al escribir código mediante el editor de texto era por acción propia del programador (aplicando alguna lógica establecida) hacer que la identación en el código se realizara con el tabulador o con los espacios y cúantos de estos, también poner las cadenas de caracteres (strings) con doble comillas («) o comilla simple (‘) o tal vez donde poner las llaves ({}) para especificar un bloque de código entre otras reglas de formato de código.

Naturalmente, quizás cuando ese código llega a otro desarrollador, al guardar ese archivo a través un editor con otra configuración transforme los tabuladores en espacios (o al revés) o modifique la identación, e incluso el salto de línea lo transforme de CRLF de Windows a LF de sistemas Unix entre muchas otras modificaciones.

Para solucionar este problema se pueden crear reglas específicas para esta tarea que sean comunes para cualquier persona que obtenga ese código guardándonse en un archivo de configuración.

Hasta no hace mucho, algunas de estas reglas estaban dentro del mundo del linting pudiendo corregir los errores de formato. Conforme ha ido pasando el tiempo, estas reglas se han ido deprecando o eliminando en favor de los formateadores tales como Prettier.

Prettier

Prettier no es ni más ni menos que un formateador que ayudará a tener el código bien formateado mediante unas reglas escritas en un archivo de configuración que en nuestro caso hemos elegido que sea «.prettierrc» con formato JSON. También puede existir un archivo para ignorar que se apliquen las reglas en según que sitios con el archivo «.prettierignore».

Instalación

Ejecutamos el comando de instalación de npm para añadirlo en el apartado de dependencias de desarrollo:

npm install --save-dev prettier

Si estás en un monorepo Nx, ya tendrás esta dependencia en tu package.json. Es más, dentro de Nx, ya puedes ejecutar el chequeo con el comando nx format:check y formateo con nx format:write

En el artículo Asegura la calidad de los commits en Nx, tienes un ejemplo de formateo de código en el archivo de configuración de Lint-Staged mediante el comando nx format:write --uncommitted --libs-and-apps

Configuración

Generaremos el archivo de configuración vacío de reglas en la raíz de nuestro proyecto mediante el comando:

echo '{}' > .prettierrc

A partir de aquí hay que pensar qué reglas queremos aplicar en el formateo del código. Te propongo el siguiente ejemplo que analizaremos a continuación:

{
  "tabWidth": 2,
  "endOfLine": "crlf",
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "overrides": [
    {
      "files": "*.ts",
      "options": {
        "tabWidth": 4,
        "arrowParens": "always",
        "printWidth": 140,
        "quoteProps": "preserve"
      }
    },
    {
      "files": "*.html",
      "options": {
        "tabWidth": 4,
        "singleQuote": false,
        "bracketSameLine": true
      }
    },
    {
      "files": ["*.less", "*.css", "*.scss"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

Como puedes observar, definimos una reglas para todo tipo de arhivos aunque a posteriori se pueden sobreescribir según el tipo de archivo: html, typescript, …

En este ejemplo, vemos que todos los archivos tendrán una tabulación de 2 espacios, un retorno de carro CrLf (Windows), punto y coma después de las declaraciones (statements), las cadenas de texto estarán entrecomilladas con comita simple, no tendrá la coma en el último campo de estructuras que necesiten el separador de coma (arrays, propiedades de objetos, …) y espacios entre llaves.

No obstante, dispongo de una tabulación de 4 espacios para archivos de typescript, esto es porque personalmente me gusta ver más nítidamente la identación que hay para identificar mejor cuánta anidación existe y en el caso de haber mucha saber que no se va por buen camino (tal vez hay mucha complejidad) además de que así se «come» algo de espacio de línea (si tenemos un maxlength), y obligar así a sintetizar mejor el código mientras se escribe. Además, se establece un máximo de caracteres por línea para que al ver el código no aparezca el scroll horizontal (según claramente qué resolución de pantalla se tenga).

Para archivos html y de estilos (ccss, scss, less) dejaremos que se ponga la comilla doble entre otras opciones.

Hay muchas variantes y te propongo que las experimentes hasta que des con el formato que se adapte mejor a tu estilo.

Ignorar archivos

Generaremos el archivo vacío para que prettier ignore algunos archivos en la raíz de nuestro proyecto mediante el comando:

echo '' > .prettierignore

Y añadimos el siguiente contenido que puedes modificar para añadir más si lo necesitas:

dist
coverage
.nx/cache
.angular

La carpeta «node_modules» y archivos de control de versiones  («.git», «.sl», «.svn» y «.hg»)  ya las ignora por defecto.

Ejemplos de comandos

Prettier se puede usar con su cli, mediante npx prettier. Te doy aquí algunos ejemplos de comandos que puedes utilizar:

Formatea los archivos typescript sin usar un archivo de configuración:

npx prettier --single-quote --trailing-comma none --arrow-parens always --end-of-line crlf --print-width 140 --tab-width 4 --quote-props preserve --write "**/*.ts"

Formatea archivos html de las carpetas apps y libs usando un archivo de configuración:

npx prettier --config .prettierrc --write "apps/**/*html" "libs/**/*.html"

Integración con Eslint

¿Qué tal si te dijera que cuando ejecutas el Eslint también se puede verificar e incluso arreglar el formato del código con Prettier? Pues sí, se puede.

Para ello instalaremos los siguientes packages en nuestro proyecto en la zona de dependencias de desarrollo (suponiendo que ya tienes instalados los packages eslint y prettier):

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Nota: Siempre teniendo cuidado de instalar versiones compatibles (aunque npm ya te avisará).

Ahora tan solo bastará con configurar el archivo de eslint (.eslintrc) para usar nuestra configuración de prettier, que consistirá en extender la configuración de @plugin:prettier/recommended para aquellos tipos de archivos que queremos formatear de la siguiente manera (para html debemos añadir la regla prettier/prettier ya que usaremos el parser de angular):

    {
      "files": ["*.ts", "*.tsx"],
      "extends": [
        /* Otras extensiones*/
        "plugin:prettier/recommended"
      ],
      "rules": {
         /* Otras reglas */
      }
    },
    {
      "files": ["*.html"],
      "extends": [/* Otras extensiones*/ "plugin:prettier/recommended"],
      "parser": "@angular-eslint/template-parser",
      "rules": {
        /* Otras reglas */
        "prettier/prettier": [
          "error",
          {
            "parser": "angular"
          }
        ]
      }
    }

Nota: Para lintear archivos de estilos (*.css, *.scss, *.less,…) hay que usar un linter especial (no eslint) como por ejemplo stylelint.

Integración con Extensión VSCode

Si no tienes instalada la extensión Prettier para VSCode, te recomiendo que la instales y la configures para que use el archivo de configuración (.prettierrc) asociado al proyecto y que se formatee el archivo automáticamente al guardar las modificaciones.

Así también sería recomendable que al bajar el repositorio de código y abrirlo con VSCode, te recomiende instalar dos extensiones: Eslint y Prettier. Para ello editaremos el archivo «extensions.json» de la carpeta «.vscode» con el siguiente contenido:

{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

Arreglar el formato (y otros errores de lint) en todo el código

Si después de hacer todas las instalaciones tienes código que no cumple la regla de formato puedes ejecutar los siguientes comando para arreglarlo (añadiendo el flag –fix)

Para Nx:

npx nx run-many --target lint --parallel --all --fix

Para Angular:

npx ng lint --fix

Arreglar el formato (y otros errores de lint) en el archivo abierto

Si quieres que al guardar el archivo VSCode te arregle los errores de lint (formato, otras reglas fixeables), editaremos el archivo «settings.json» de la carpeta «.vscode» con las siguientes claves:

{
    "eslint.validate": ["html", "javascript", "typescript"]
    "editor.codeActionsOnSave": ["source.fixAll"]
}

Donde:

1. eslint.validate le dice a ESLint que tipo de archivos tiene que validar.
2. editor.codeActionsOnSave sería el evento de VSCode al guardar código.
3. source.fixAll arreglar cualquier tipo de errores del archivo que se está guardando.

Nota: Debes tener instalada la extensión de Eslint.

Resumen

Hemos visto como formatear el código mediante Prettier y usarlo desde Eslint. Finalmente se instalan las extensiones de Prettier y Eslint de VSCode para que se formatee al guardar el archivo en curso así como formatear todo el código.

Espero que con esto el código que se escriba siempre se formatee. Como siempre tienes el ejemplo en el repositorio de github de angularfrontenders.com.