Javascript con Vim: Formateando el código

Prettier es una herramienta de formateo de código de gran popularidad en el ecosistema JavaScript. Mediante unas opciones especificadas en su archivo de configuración podemos conseguir que todos los archivos de código formateados con Prettier luzcan idéntico sangrado (indent), tipo de comillas, uso de espacios, ancho de líneas, y demás aspectos de estilo. Para disponer de Prettier únicamente tienes que añadirlo a tu proyecto.

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

Puedes ejecutar Prettier mediante su CLI, o puedes engancharlo para que se ejecute justo antes de una confirmación de cógido de Git, un pre-commit hook, pero la intención de este artículo es usarlo en Vim para que dé formato a tu archivo de código cuando lo guardas.

Si estás usando ESLint del modo que te conté aquí, tienes que saber que algunos métodos de Prettier pueden entrar en conflicto con las capacidades de formateo de ESLint. Para evitar esto es mejor dejar que ESLint cuide de la correción del código mientras que Prettier se encarga únicamente de dar formato al guardar el archivo. Lo puedes conseguir desactivando, mediante eslint-config-prettier, la reglas de ESLint que entra en conflicto con Prettier.

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

También tienes que añadir a ESLint las capacidades de correción de código de Prettier para seguir disponiendo de ellas, y esto lo puedes hacer con eslint-plugin-prettier.

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

La forma más sencilla de configurar los dos dispositivos software que acabas de instalar es mediante el archivo de configuración de ESLint.

{
  "extends": ["plugin:prettier/recommended"]
}

Eso es todo lo que necesitas para integrar Prettier con ESLint, ahora deja que te muestre como configurarlo con Vim para formatear el código de tu archivo JavaScript en el momento de guardarlo. Además de gestionar correctores de errores, como te mostré aquí, Ale tambén ejecuta correctores de formato de código en el buffer de Vim, todo lo que necesitas hacer es especificar en el archivo de configuración de Vim lo siguiente:

let g:ale_fixers['javascript'] = ['eslint']

" Fix files automatically on save
let g:ale_fix_on_save = 1

Con esta configuración será ESLint el encargado de corregir el código y advertir de errores de formato, mientras que Prettier realizará el formateo del código al guardar al archivo.