Linting — JS: Configuración del entorno

• ¿Qué es Prettier?
• ¿Qué es ESLint?
• ¿Cómo instalar y configurar ESLint?
• ¿Cómo usar ESLint?
• ¿Y si usamos Prettier y ESLint juntos?

Cuando comenzamos a programar, es normal que el código no se vea tan "bonito" como el de los profesionales. Pero con el tiempo, vamos descubriendo que tener un código bien organizado no es solo para que se vea bien… también ayuda muchísimo a entender lo que estamos haciendo y a trabajar mejor en equipo.

Miremos estos dos fragmentos de código:

// Sin formato claro
const  find_sum = (a,b) =>
{
const  c = a+b; return  c;
}

// Con buen formato
const  findSum = (a, b) => {
const  sum = a + b;
return  sum;
};

La segunda versión es mucho más clara, ¿cierto?

El buen formato no solo hace que el código sea más fácil de leer: también ayuda a que otras personas (¡o incluso tú mismo dentro de unos días!) entiendan rápidamente qué hace cada parte del programa.

Ahora vamos a conocer dos herramientas muy útiles que nos ayudan a mantener nuestro código ordenado y libre de errores:

• Prettier

• ESLint

¿Qué es Prettier?

Prettier toma tu código y lo reescribe con una estructura clara, sin cambiar lo que hace.

// Código sin Prettier
function  saludo(nombre){return  "Hola "+nombre+"!"}

// Código con Prettier
function  saludo(nombre) {
return  "Hola " + nombre + "!";
}

Esto es muy útil, sobre todo cuando trabajamos en equipo. Con Prettier, todos los archivos mantienen el mismo estilo.

// Aunque esto no es lo ideal...
if (x == "5") {
// ...
}

Prettier lo indentará bien, pero no te dirá que es mejor usar === en JavaScript. Para eso, usamos otra herramienta que sí revisa errores más profundos: ESLint.

¿Qué es ESLint?

Se le llama linter porque “linta” el código: lo revisa siguiendo ciertas reglas, y te sugiere correcciones.

Veamos un ejemplo:

let  a = 5;
a++;

El código funciona, pero ESLint podría darte varias advertencias:

⚠️ “El nombre ‘a’ es muy corto” → Se recomienda usar nombres descriptivos como total o contador.

⚠️ “No deberías usar el operador ++” → Puede causar errores y es preferible a = a + 1.

⚠️ “La variable no se está utilizando” → Si no usamos el valor de a, ¿para qué declararlo?

Estas advertencias ayudan a que escribamos un código más claro, seguro y mantenible.

¿Cómo instalar y configurar ESLint?

Vamos a instalar ESLint en un proyecto. Abre la terminal y ejecuta:

npm  install  --save-dev  eslint

Después de instalarlo, inicializamos ESLint con:

npx  eslint  --init

Esto abrirá una serie de preguntas. Aquí te sugerimos qué responder:

Después de esto se creará un archivo .eslintrc.yml, que podría verse así:

env:
node: true
es2020: true
extends:
- airbnb-base
parserOptions:
ecmaVersion: 11
sourceType: module
rules: {}

Este archivo contiene las reglas que ESLint usará al revisar tu código.

¿Cómo usar ESLint?

Ya con ESLint instalado y configurado, podemos revisar el código de todo el proyecto con este comando:

npx  eslint  .

Si hay problemas, los verás listados en la terminal, con detalles como:

• En qué archivo ocurrió

• Qué línea tiene un problema

• Qué regla se activó

Si quieres que ESLint arregle automáticamente los errores más simples (como comas o espacios), puedes usar este comando:

npx  eslint  --fix  .

¿Y si usamos Prettier y ESLint juntos?

¡Gran idea! Muchas personas hacen esto. Lo mejor es configurar ambos dentro del editor de código (como VS Code) para que corrijan el estilo y detecten errores automáticamente cuando guardas un archivo.

Esto se logra instalando las extensiones oficiales de ESLint y Prettier en el editor y conectándolas con tu configuración.

Trabajo independiente

npm install --save-dev eslint

npx eslint --init

npx eslint .

npx eslint . --fix

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

git add .
git commit -m "Configurar ESLint con reglas de Airbnb"
git push origin main