ESLint y Prettier: Mantén tu código limpio y ordenado

En el desarrollo moderno con JavaScript (y especialmente con frameworks como React, Vue o Node.js), mantener un código limpio, coherente y libre de errores es fundamental. Dos herramientas que se han vuelto indispensables para lograrlo son ESLint y Prettier. Aunque a veces se confunden, tienen propósitos distintos pero complementarios.

¿Qué es ESLint?

ESLint es una herramienta de análisis estático que revisa tu código en busca de errores, malas prácticas y violaciones de estilo según reglas configurables.

Características principales:

• Detecta errores de sintaxis y lógica.

• Aplica reglas de estilo y buenas prácticas.

• Permite personalizar reglas o usar configuraciones predefinidas (configs Airbnb, Google, etc.).

• Se integra fácilmente con editores como VS Code.

• Puede corregir automáticamente algunos errores con --fix.

¿Para qué se usa?

• Evitar bugs antes de que lleguen a producción.

• Mantener un estilo de código coherente en equipos grandes.

• Aplicar convenciones de desarrollo.

¿Qué es Prettier?

Prettier es un formateador de código. Su objetivo es aplicar un estilo consistente al código fuente, sin preocuparse por reglas lógicas o errores.

Características principales:

• Formatea automáticamente el código (indentación, comillas, punto y coma, etc.).

• No analiza errores ni aplica buenas prácticas.

• Compatible con múltiples lenguajes: JavaScript, TypeScript, HTML, CSS, Markdown, etc.

• Muy rápido y fácil de usar.

• Se puede integrar con ESLint para evitar conflictos.

¿Para qué se usa?

• Evitar discusiones sobre estilo de código.

• Asegurar que todo el código tenga el mismo formato.

• Mejorar la legibilidad y mantenibilidad.

Guía rápida de instalación y uso

1. Instalación con npm

npm install --save-dev eslint prettier

2. Configurar ESLint

npx eslint --init

Esto te guiará por una serie de preguntas para generar un archivo .eslintrc.

3. Configurar Prettier

Crea un archivo de configuración .prettierrc:

{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80
}

4. Integrar ESLint con Prettier

Instala los plugins necesarios:

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

Y actualiza tu .eslintrc:

{
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

5. Ejecutar análisis y formateo

• Para analizar con ESLint:

npx eslint src/**/*.js

• Para corregir automáticamente:

npx eslint src/**/*.js --fix

• Para formatear con Prettier:

npx prettier --write src/

Conclusión

Usar ESLint y Prettier juntos es una práctica recomendada para cualquier proyecto JavaScript moderno. Mientras ESLint te ayuda a escribir código correcto y seguro, Prettier se encarga de que ese código luzca impecable. ¡Una dupla poderosa para cualquier desarrollador!