Prettier No Formatea al Guardar en VS Code: Guía Definitiva Paso a Paso

Instalas Prettier. Configuras un .prettierrc. Pulsas Ctrl+S para guardar y… nada. El archivo se guarda pero no se formatea.

Abres otro proyecto, funciona perfecto. Vuelves al tuyo, nada. Llevas 20 minutos tocando configuraciones y sigue sin funcionar.

Es el problema más común de VS Code y tiene una solución sistemática.

TL;DR — Checklist rápido

Si tienes prisa, revisa esto en orden:

1. ¿Extensión de Prettier instalada y habilitada? (esbenp.prettier-vscode)
2. ¿formatOnSave activado en settings.json?
3. ¿Prettier es el formateador por defecto?
4. ¿Tienes un .prettierrc en la raíz del proyecto?
5. ¿Hay conflicto con otra extensión (Beautify, ESLint)?
6. ¿El archivo está en .prettierignore?

Si checaste todo y sigue sin funcionar, sigue leyendo — hay causas más ocultas.

Paso 1: Verifica la extensión

Abre VS Code → Extensions (Ctrl+Shift+X) → busca “Prettier”:

• La extensión correcta es “Prettier - Code formatter” de Prettier (ID: esbenp.prettier-vscode)
• Verifica que dice “Enabled”, no “Disabled” ni “Enable (Workspace)”
• Si dice “Disabled”, haz clic en “Enable”

Hay extensiones falsas/antiguas como “Prettier+” o “JS Beautify Prettier”. Desinstálalas si las tienes.

Paso 2: Activa formatOnSave

Abre tu settings.json (Ctrl+Shift+P → “Preferences: Open User Settings (JSON)”):

{
  "editor.formatOnSave": true
}

Atención: Hay DOS archivos settings.json:

• User settings (global): aplica a todos los proyectos
• Workspace settings (.vscode/settings.json): aplica solo a este proyecto

Si el workspace settings tiene "editor.formatOnSave": false, anula el user settings. Verifica ambos:

# User settings (global)
# Windows: %APPDATA%\Code\User\settings.json
# Mac: ~/Library/Application Support/Code/User/settings.json
# Linux: ~/.config/Code/User/settings.json

# Workspace settings (local)
# .vscode/settings.json en la raíz del proyecto

Paso 3: Configura Prettier como formateador por defecto

Este es el paso que más gente olvida. VS Code puede tener varios formateadores instalados y no sabe cuál usar.

Opción A: Desde la interfaz

1. Abre cualquier archivo .js, .ts, .css o .html
2. Ctrl+Shift+P → “Format Document With…”
3. Selecciona “Configure Default Formatter…”
4. Elige “Prettier - Code formatter”

Opción B: En settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Opción C: Por lenguaje (recomendado)

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Paso 4: Crea un .prettierrc

Sin un archivo de configuración, Prettier a veces se niega a formatear porque no sabe qué reglas aplicar.

Crea .prettierrc en la raíz del proyecto:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Si trabajas en un proyecto con más gente, acuerda las reglas primero. Un .prettierrc cambiado genera cientos de cambios en un solo commit.

Paso 5: Resuelve conflictos con ESLint

El conflicto Prettier + ESLint es el problema más sutil. ESLint formatea el archivo, luego Prettier intenta reformatear, detecta un conflicto y no hace nada.

Síntomas

• Prettier funciona en archivos .css o .json pero NO en .js/.ts
• Ves warnings de ESLint sobre formato (comillas, punto y coma)
• El archivo “parpadea” al guardar (se formatea y se vuelve a cambiar)

Solución

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

En tu eslint.config.js o .eslintrc:

// eslint.config.js (flat config)
import eslintConfigPrettier from 'eslint-config-prettier';

export default [
  // ... tus reglas de ESLint
  eslintConfigPrettier,  // SIEMPRE al final — desactiva reglas conflictivas
];

// .eslintrc.json (formato legacy)
{
  "extends": [
    "eslint:recommended",
    "prettier"  // Siempre al final
  ]
}

Esto desactiva todas las reglas de ESLint que entran en conflicto con Prettier. Ahora ESLint detecta errores de lógica y Prettier se encarga del formato.

Paso 6: Verifica que no está en .prettierignore

Si tienes un .prettierignore en la raíz del proyecto, verifica que tu archivo no está excluido:

# .prettierignore
dist/
node_modules/
*.min.js
# ¿Tienes algo como src/** o *.ts aquí por error?

Paso 7: Output panel — El log que nadie mira

Si todo lo anterior está bien y sigue sin funcionar, VS Code tiene un log de Prettier:

1. Ctrl+Shift+P → “Output: Show Output Channel”
2. En el desplegable, selecciona “Prettier”
3. Guarda un archivo y mira qué dice

Errores comunes en el log:

Error en Output	Causa	Solución
Cannot find module 'prettier'	Prettier no está instalado en el proyecto	npm install --save-dev prettier
Invalid configuration	.prettierrc tiene syntax error	Valida el JSON
File is ignored	Archivo excluido por .prettierignore	Edita .prettierignore
Multiple formatters	Dos extensiones compiten	Desinstala la otra

Paso 8: Prettier como dependencia del proyecto

La extensión de VS Code puede usar su propio Prettier interno o el del proyecto. Para evitar inconsistencias:

npm install --save-dev prettier

Y en .vscode/settings.json:

{
  "prettier.requireConfig": true
}

Esto obliga a la extensión a usar el Prettier instalado en node_modules y a requerir un .prettierrc — si falta, no formatea (y te avisa en el Output).

Settings.json final (copia y pega)

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Resumen

Problema	Solución
Extensión no instalada	Instalar esbenp.prettier-vscode
formatOnSave desactivado	Activar en settings.json
No es el formateador por defecto	editor.defaultFormatter: esbenp.prettier-vscode
Conflicto con ESLint	Instalar eslint-config-prettier
Sin .prettierrc	Crear en la raíz del proyecto
Archivo ignorado	Revisar .prettierignore
Error invisible	Revisar Output panel → Prettier
Prettier global vs local	npm install --save-dev prettier

Artículos relacionados

• Errores comunes al configurar IA en VS Code — problemas similares con extensiones de IA
• Comandos Git esenciales — si Prettier formatea un archivo entero y genera un diff enorme
• Cursor vs Copilot vs Windsurf — editores que incluyen formato integrado