Integración con Prettier y conflictos entre reglas
Integre Prettier con ESLint, evite reglas duplicadas y gestione los conflictos entre reglas de estilo y de lógica.
Integración con Prettier y conflictos entre reglas es una lección gratuita de TypeScript 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 TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 3 lecciones en total.
Introducción
Objetivo: Combinar Prettier (formato) con ESLint (lógica y estilo) sin conflictos.
Instalación
Instale Prettier y los plugins y configuraciones de ESLint necesarios para integrarlos correctamente.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettierConfiguración de Prettier
Prettier tiene su propio archivo de configuración. Úselo para las opciones relacionadas exclusivamente con el formato, como comillas, puntos y coma y longitud de línea.
// .prettierrc.json
{
"semi": false,
"singleQuote": true
}Integrar la configuración
Añada plugin:prettier/recommended para ampliar ESLint. Incluye eslint-config-prettier y eslint-plugin-prettier.
// .eslintrc.js
module.exports = {
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}Ejemplo de conflicto
Sin configuración, ESLint y Prettier pueden discrepar, por ejemplo, sobre los puntos y coma. La configuración desactiva las reglas de ESLint que entran en conflicto.
// demo.ts
const msg = "hi"
console.log(msg)
// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettierEjecutar comprobaciones
Ejecute ESLint para la lógica y el estilo, y Prettier para el formato. También puede integrar ambas herramientas en su editor.
npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"Pregunta
Comprobación rápida: ¿Qué hace eslint-config-prettier?
Resumen
Resumen: instale Prettier y sus configuraciones, añádalo a la lista extends de ESLint, desactive las reglas que entren en conflicto y ejecute ambas herramientas para mantener la coherencia.
Preguntas frecuentes
¿La lección «Integración con Prettier y conflictos entre reglas» es gratis?
Sí — el texto completo de «Integración con Prettier y conflictos entre reglas» 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 TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Integración con Prettier y conflictos entre reglas»?
Integre Prettier con ESLint, evite reglas duplicadas y gestione los conflictos entre reglas de estilo y de lógica. Practicas TypeScript 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 TypeScript Academy?
No se requiere experiencia previa. TypeScript 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 «Integración con Prettier y conflictos entre reglas»?
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 TypeScript Academy?
Sí. Cada lección de TypeScript 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
- ESLint + @typescript-eslint
- Integración con Prettier y conflictos entre reglas
- Conjuntos de reglas habituales en proyectos reales