0Pricing
Frontend Academy · Lección

Configuración de Prettier y ESLint

Añada Prettier para formatear automáticamente y ESLint para detectar errores, configure ambas herramientas e intégralas en un flujo de formato al guardar.

Configuración de Prettier y ESLint es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué automatizar el estilo del código?

Los debates manuales sobre el formateo del código hacen perder tiempo al equipo. Prettier formatea el código automáticamente con un estilo coherente. ESLint detecta errores y aplica buenas prácticas. Juntos eliminan categorías completas de comentarios en las revisiones de código.

Instalar Prettier

Instale Prettier como dependencia de desarrollo, cree un archivo de configuración y añada un script de formateo a package.json. Prettier no necesita configuración para funcionar: sus valores predeterminados son adecuados, aunque puede personalizarlos.

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Integración de Prettier con VSCode

Instale la extensión Prettier - Code Formatter. Después, configúrela como formateador predeterminado y active formatOnSave en la configuración. A partir de ese momento, Prettier se ejecutará cada vez que guarde un archivo.

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

Instalar ESLint

Instale ESLint e inicialícelo con npm init @eslint/config. Este asistente le ayuda a elegir el entorno (navegador/node), el sistema de módulos y la compatibilidad con TypeScript. Genera un archivo eslint.config.js.

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

Ejemplo de configuración de ESLint

Una configuración plana sencilla de ESLint para un proyecto de JavaScript en el navegador. Las reglas pueden ser 'error', 'warn' u 'off'. Amplíe configuraciones compartidas como la recomendada de @eslint/js para contar con una base sólida.

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

TypeScript ESLint

En proyectos de TypeScript, añada typescript-eslint para detectar problemas específicos de TypeScript: uso inseguro de any, tipos de retorno ausentes y uso incorrecto de Promises.

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Prettier y ESLint juntos

ESLint incluye algunas reglas de formateo que entran en conflicto con Prettier. Utilice eslint-config-prettier para desactivarlas y permitir que Prettier se encargue de todo el formateo, mientras ESLint se ocupa únicamente de la calidad del código.

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

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore y .prettierignore

Indique a las herramientas qué archivos deben omitir. El archivo .eslintignore utiliza la sintaxis de gitignore. Normalmente querrá ignorar node_modules, dist y los archivos generados.

# .eslintignore
node_modules
dist
.next
coverage

Scripts de npm para el linting

Añada scripts de lint y format a package.json para que CI y los miembros del equipo puedan ejecutarlos de forma coherente.

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

lint-staged y husky para hooks de precommit

Utilice husky y lint-staged para analizar y formatear automáticamente solo los archivos preparados antes de cada confirmación con git. Esto evita que el código sin formatear o defectuoso llegue al repositorio.

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

EditorConfig para una coherencia básica

Un archivo .editorconfig aplica configuraciones básicas del editor (estilo de sangría y finales de línea) en todos los editores e IDE, independientemente de los plugins. Añádalo junto con Prettier.

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Comprobación rápida

¿Por qué debería añadirse eslint-config-prettier a una configuración de ESLint que también utiliza Prettier?

Resumen: Prettier y ESLint

Prettier formatea automáticamente el código al guardar mediante la extensión de VSCode. ESLint detecta errores y vulneraciones de estilo. Utilice eslint-config-prettier para evitar conflictos. Añada lint-staged y husky para aplicar comprobaciones antes del commit. Las herramientas coherentes eliminan los debates sobre el formateo y detectan errores antes de publicar el código.

Preguntas frecuentes

¿La lección «Configuración de Prettier y ESLint» es gratis?

Sí — el texto completo de «Configuración de Prettier y ESLint» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configuración de Prettier y ESLint»?

Añada Prettier para formatear automáticamente y ESLint para detectar errores, configure ambas herramientas e intégralas en un flujo de formato al guardar. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Configuración de Prettier y ESLint»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Chrome DevTools: Elements, Console y Network
  2. VSCode: extensiones, Emmet y atajos
  3. Configuración de Prettier y ESLint
  4. Compatibilidad de navegadores y caniuse.com
← Volver a Frontend Academy