Cómo configurar el linter en JavaScript muy rápido para no cometer errores en tu código
El linter es una herramienta esencial para cualquier desarrollador de JavaScript. Ayuda a identificar y corregir errores en el código antes de que se conviertan en problemas más graves. Configurar el linter puede parecer una tarea complicada, pero en realidad es bastante sencillo si sigues estos pasos.
Paso 1: Instalar un linter
Antes de poder configurar el linter, necesitarás instalar uno. Algunas opciones populares incluyen ESLint, JSHint y Standard. Puedes instalarlos a través de npm con el siguiente comando:
npm install eslint --save-dev
Paso 2: Crear un archivo de configuración
Una vez que hayas instalado el linter, necesitarás crear un archivo de configuración para especificar las reglas que deseas aplicar a tu código. Puedes hacerlo ejecutando el siguiente comando en tu terminal:
npx eslint --init
Este comando te guiará a través de la creación de un archivo de configuración personalizado para tu proyecto. Puedes elegir entre una serie de reglas predefinidas o crear las tuyas propias.
Paso 3: Integrar el linter en tu flujo de trabajo
Una vez que hayas configurado el linter, querrás integrarlo en tu flujo de trabajo para que se ejecute automáticamente cada vez que guardes un archivo. Puedes hacerlo agregando un script a tu archivo package.json de la siguiente manera:
"scripts": {
"lint": "eslint ."
}
Ahora puedes ejecutar el linter con el siguiente comando:
npm run lint
Esto te permitirá identificar y corregir errores en tu código de forma rápida y sencilla, evitando así problemas futuros.
Conclusión
Configurar el linter en JavaScript es una tarea sencilla que puede ahorrarte mucha frustración a largo plazo. Siguiendo estos pasos, podrás configurar el linter rápidamente y asegurarte de que tu código esté libre de errores.
Cual es la diferencia entre StandarJS y Eslint o es que StandarJS ya trae Eslint por defecto?
@midulive , el punto y coma ya no es recomendable?, pregunto por que "Standard JS" no los añade!
hola midu, instalo standard pero se choca con la configuración de prettier, cómo los puedo combinar? gracias !
me acabo de enterar hoy que es esto, y lo importante que es
Midu puedes enseñar a configurar Prettier y Standard, te lo agradeceria un monton
A los que le interese el formateo al guardar.
Vayan a settings, buscan Format On Save y deben activar el cheque de la primera casilla
Format a line….😊
Hola Midu, podrías hacer un pequeño video de como usar estlint en una app con vite, react y typescript, no me reconoce los archivos con extensión .tsx, Gracias!!!
Hola, sirve también con ReactNative?
Más de un año aprendiendo programación web y nadie me había explicado esto o no lo había entendido. ¡Muchas gracias! Eres un crack
Saludos.. sin ánimo de armar polémica.. personalmente no uso eslint es un dolor de cabeza.. para eso es mejor usar type script.. vengo de java 20 años trabajando.. y es una payasada eslint… JavaScript
Midu, como tienes configurado lo del formateador?, no encuentro manera de hacerlo, pense que era con format on save, pero no funciona
Midu podrías enseñar a configurarlo con prettier ?? Y el de Ts ? Un saludo 👌
el final es lo mejor! jajaja
buenas, saben como usar standard con react native?
Hola Midu! como estas? podrias darme el link en donde consiguras el standard para Typescript por favor, he intentado hacerlo pero por alguan razon no me lo toma! seria de mucha ayuda!
Para una configuración básica de linter está muy bien, cuando pasamos a una configuración mas avanzada de ts para eslint con su parser la cosa se complica, ya ni te cuento cuando usas scss, prettier y stylelint juntos. 😅 PD: Una preview de Rome?
Sirva para Vite y Svelte?
Que configuraciones tienes en vscode para que al guardar te haga el fix del linter?
PD: Gracias por el contenido crack!
Yo utilizo Rome para lint y format. Me encanta es casi 0 configuración.
Lo mejor es el final 🤣🤣