Añadir Formateo de Código con Prettier a un Proyecto de Next.js

Las herramientas de calidad de código son imprescindibles cuando se busca consistencia en el estilo de código dentro de un equipo. Eslint, Prettier con Husky y lint-staged son la combinación perfecta para aplicaciones Next.js.

Sin embargo, configurarlas en una base de código existente de Next.js sin romper las reglas predeterminadas de eslint a veces puede ser confuso. Pero no te preocupes, es un trabajo sencillo con este tutorial.

Primero, instalemos las dependencias.

npm install -D prettier eslint-plugin-prettier eslint-config-prettier prettier-plugin-tailwindcss

Agrega o editar el archivo de configuración de prettier: .prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "bracketSpacing": true,
  "tabWidth": 2,
  "printWidth": 100,
  "plugins": [
    "prettier-plugin-tailwindcss"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

Actualiza el archivo .eslintrc.json de la siguiente manera:

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

¡Y ya está!

Bonus: Auto linting al hacer commit

Ejecuta lo siguiente para instalar Husky y lint-staged, lo cual añade un gancho de git para ejecutar linting al hacer commit.

npx mrm lint-staged

Bonus: Integración con VSCode

Añade las siguientes configuraciones de espacio de trabajo en .vscode/settings.json para habilitar el formato al guardar:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}