Actualización: Dónde colocar las reglas de Prettier actualmente
En el video, las preferencias de Prettier se declaran directamente dentro de ESLint usando este bloque:
"rules": {
"prettier/prettier": ["error", {
"singleQuote": true,
.........
}]
}
En la actualidad, esto se separa.
Para respetar la "separación de responsabilidades" y permitir que nuestros editores de código (como VS Code) puedan leer el formato directamente, la mejor práctica es sacar estas reglas de ESLint y dárselas exclusivamente a Prettier.
La forma correcta de hacerlo hoy es:
No agregues ningún bloque "rules" en tu eslint.config.mjs para opciones de Prettier. El paquete eslint-plugin-prettier/recommended que importamos ya hace la conexión básica por ti.
Crea un archivo llamado .prettierrc en la raíz de tu proyecto.
Coloca tus preferencias de formato allí :
{
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"semi": false
}
Al hacerlo así, ESLint se queda leyendo tu archivo eslint.config.mjs para evaluar la calidad de la lógica, y Prettier controla el apartado visual leyendo tu .prettierrc.
El truco de la caché de VS Code (¡Muy Importante!) Si notas que ESLint te sigue marcando error al quitar un punto y coma (como si no leyera tu archivo .prettierrc), es porque VS Code tiene el servidor de ESLint en memoria y no detectó tu nuevo archivo.
Para solucionarlo: Abre la paleta de comandos :
(Ctrl + Shift + P en Windows/Linux o Cmd + Shift + P en Mac),
busca ESLint: Restart ESLint Server y ejecútalo.
Con esto limpias la caché, el editor lee tus reglas y todo funcionará a la perfección.