0Pricing
JavaScript Academy · Lección

Linting con ESLint y formato con Prettier

Detecte problemas habituales con ESLint y aplique formato automático con Prettier. Mantenga configuraciones pequeñas y ejecútelas mediante scripts de npm.

Linting con ESLint y formato con Prettier es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 3. 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Por qué usar lint y format?

Objetivo: Mantener el código limpio y coherente.

  • ESLint → detecta problemas
  • Prettier → formatea el código
  • Configuraciones mínimas; ejecútelas mediante scripts de npm
  • Valores predeterminados adecuados para principiantes
Linting con ESLint y formato con Prettier — ilustración 1

ESLint: detectar problemas

ESLint aplica reglas para detectar errores y mejorar el estilo; aquí simularemos algunas comprobaciones sencillas.

// Tiny "lint" demo: simple checks on a string of code
const sample = "const x=1; console.log(x)";

function lint(code) {
  const issues = [];
  if (code.includes("console.log")) {
    issues.push("no-console: avoid console.log in production code");
  }
  if (code.includes("=1;")) {
    issues.push("spacing: add spaces around = for readability");
  }
  if (!code.trim().endsWith(";")) {
    issues.push("semi: missing semicolon");
  }
  return issues;
}

console.log("lint issues:", lint(sample));
Linting con ESLint y formato con Prettier — ilustración 2

Prettier: diseño coherente

Prettier se centra en el formateo automático, para que todos compartan el mismo diseño sin tener que debatirlo.

// Tiny "format" demo: normalize spaces and add semicolon
function format(code) {
  // Very naive formatting just for demo
  const spaced = code.replaceAll("=1;", " = 1;");
  const withSemi = spaced.trim().endsWith(";") ? spaced.trim() : spaced.trim() + ";";
  return withSemi;
}

const ugly = "const x=1\nconsole.log( x )";
console.log("formatted:", format(ugly));
Linting con ESLint y formato con Prettier — ilustración 3

Configuración mínima de ESLint

Empiece con eslint:recommended y después añada una o dos reglas. Manténgala pequeña para principiantes.

// Example .eslintrc.json (printed lines)
const eslintrc = [
  "{",
  "  \"env\": { \"es2022\": true, \"node\": true },",
  "  \"extends\": [\"eslint:recommended\"],",
  "  \"rules\": {",
  "    \"no-console\": \"warn\",",
  "    \"semi\": [\"error\", \"always\"]",
  "  }",
  "}"
];

for (const l of eslintrc) console.log(l);
Linting con ESLint y formato con Prettier — ilustración 4

Prettier mínimo + scripts

Añada scripts sencillos de format y lint para que el equipo pueda ejecutarlos fácilmente.

// Example .prettierrc (printed lines)
const prettierrc = [
  "{",
  "  \"semi\": true,",
  "  \"singleQuote\": true,",
  "  \"tabWidth\": 2",
  "}"
];

for (const l of prettierrc) console.log(l);

// Example npm scripts (printed)
const scripts = [
  "\"scripts\": {",
  "  \"lint\": \"eslint .\",",
  "  \"format\": \"prettier --write .\"",
  "}"
];

for (const l of scripts) console.log(l);
Linting con ESLint y formato con Prettier — ilustración 5

Flujo de trabajo diario

Consejos:

  • Ejecute format antes de confirmar cambios.
  • Mantenga las reglas de ESLint claras y en número reducido.
  • Use eslint:recommended y un archivo .prettierrc pequeño.
  • Añada un script de acceso rápido como npm run fix para aplicar correcciones automáticas.
Linting con ESLint y formato con Prettier — ilustración 6

Cuestionario sobre Prettier frente a ESLint

Comprobación rápida: Herramienta de formateo.

Linting con ESLint y formato con Prettier — ilustración 7

Resumen

Resumen: Use ESLint para detectar problemas y Prettier para formatear el código. Mantenga las configuraciones mínimas y ejecute ambas herramientas mediante scripts de npm para conseguir un flujo de trabajo fluido en el equipo.

Linting con ESLint y formato con Prettier — ilustración 8

Preguntas frecuentes

¿La lección «Linting con ESLint y formato con Prettier» es gratis?

Sí — el texto completo de «Linting con ESLint y formato con Prettier» 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Linting con ESLint y formato con Prettier»?

Detecte problemas habituales con ESLint y aplique formato automático con Prettier. Mantenga configuraciones pequeñas y ejecútelas mediante scripts de npm. Practicas JavaScript 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 JavaScript Academy?

No se requiere experiencia previa. JavaScript 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 2 de 3.

¿Cuánto tiempo toma la lección «Linting con ESLint y formato con Prettier»?

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 JavaScript Academy?

Sí. Cada lección de JavaScript 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. Mentalidad de testing: aserciones pequeñas, AAA y rojo→verde→refactor
  2. Linting con ESLint y formato con Prettier
  3. Fundamentos de CI: ejecutar lint y test en cada push
← Volver a JavaScript Academy