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.
Actualización: Cómo configurar ESLint v9 + Prettier en la actualidad
El tutorial utiliza el sistema antiguo (.eslintrc). A partir de ESLint v9, la configuración cambió al formato "Flat Config", el cual es mucho más directo. Aquí tienen el paso a paso moderno:
1.Instalar las dependencias
En tu terminal, ejecuta la instalación de las herramientas y sus conectores:
npm i -D eslint prettier globals neostandard eslint-config-prettier eslint-plugin-prettier
2.** Crear el archivo de configuración de ESLint**
En la raíz de tu proyecto, crea un archivo llamado eslint.config.mjs (usar la extensión .mjs asegura que los import funcionen correctamente sin importar la configuración de tu proyecto).
3.** Agregar el Flat Config**
Pega el siguiente código en tu eslint.config.mjs. El orden es estricto: la configuración de Prettier debe ir al final del array para que tenga la última palabra y sobrescriba cualquier regla visual de Neostandard.
import neostandard from 'neostandard';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
export default [
...neostandard(),
eslintPluginPrettierRecommended,
];
4.** Crear las reglas de Prettier**
Crea un archivo .prettierrc en la raíz de tu proyecto para definir tus gustos visuales. Por ejemplo, para usar comillas simples y quitar los puntos y coma:
{
"semi": false,
"singleQuote": true
}
En vsCode utilizar el nuevo formato Flat Config (eslint.config.mjs) con neostandard es exactamente lo que dicta el estándar moderno para ESLint v9.
Guía paso a paso:
1.Instalar dependencias: Ejecuta en la terminal del proyecto para instalar ESLint v9 y el adaptador moderno de Standard:
npm install --save-dev eslint@^9.0.0 neostandard
2.Configurar ESLint:
Abre (o crea) el archivo eslint.config.mjs en la raíz del proyecto y coloca únicamente esto:
import neostandard from 'neostandard'
export default neostandard()
3.Agregar el script (Opcional pero recomendado):
En tu archivo package.json, añade el comando de linting dentro de "scripts":
"scripts": {
"lint": "eslint ."
}
4.Configurar VS Code (Solo para este proyecto):
Crea una carpeta .vscode en la raíz de tu proyecto. Dentro, crea el archivo settings.json con esta configuración para auto-formatear al guardar y evitar conflictos con Prettier:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.validate": ["javascript"],
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": false
}
}
5.Reiniciar y probar:
Cierra y vuelve a abrir VS Code. Guarda un archivo .js con errores de formato para comprobar que se corrige automáticamente.
En Windows, otra forma de acceder a la terminal que se muestra en el video es usando el mismo cliente pgAdmin4: