ESLint es una herramienta que nos ayudará a mejorar nuestro código. Por un lado detectando problemas en nuestro código y por otro lado sugiriendo una manera más correcta o universal de cómo escribir nuestro código.
Instalar ESLint en nuestro proyecto es simple, en la terminal posicionados en nuestra carpeta del proyecto ejecutamos el siguiente comando:
$ npm install eslint --save-dev
Una vez ejecutado el comando, debemos crear un archivo de configuración. La manera más fácil según la documentación oficial es ejecutando el siguiente comando:
$ npm init @eslint/config
Al ejecutarlo nos preguntará lo siguiente:
? How would you like to use ESLint?
To check syntax only
To check syntax and find problems
> To check syntax, find problems, and enforce code style
Elegimos “To check syntax, find problems, and enforce code style”. Luego nos preguntará:
? What type of module does your project use?
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
Elegimos “JavaScript modules (import/export)” ya que nuestro proyecto será en React.
? Which framework does your project use?
> React
Vue.js
None of these
Luego nos pregunta si usaremos TypeScript. En mi caso, no. Pero si tu utilizas TS podrás Yes. :D
? Does your porject use TypeScript? No / Yes
Luego nos pregunta:
? Where does your code run?
Browser
Node
En nuestro caso seleccionamos “Browser”. Luego nos preguntará acerca de el estilo:
? How would you like to define a styler for your project?
> Use a popular style guide
Answer questions about your style
Utilizaremos una guía popular. En nuestro caso “Standard” será.
? Which style guide do you want to follow?
Airbnb
> Standard
Google
XO
Ahora nos pregunta en que formato vamos a querer nuestro archivo de configuración de ESLint. Aquí seleccionaremos la opción de “JavaScript”.
? What format do you want to your config file to be in?
> JavaScript
YAML
JSON
Luego nos va a preguntar para instalar las dependencias, a la cual confirmamos con Yes.
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
? Would you like to install them now? No / Yes
Una vez que aceptamos, nos pregunta:
? Which package manager do you want to use?
> npm
yarn
pnpm
En mi caso seleccionar “npm” y luego enter. Allí se terminarán de instalar las dependencias.
Ya tenemos creado nuestro archivo de configuración de ESLint en nuestro proyecto, ahora nos queda instalar la extensión de ESLint y ¡Listo! Tenemos ESLint en nuestro proyecto.
Realizaré futuros tutoriales con la instalación de la extensión de vscode y también con la instalación de Prettier y cómo puede trabajar junto a ESLint para mejorarnos como desarrolladores.
Tip: siempre lee la documentación oficial. En este caso podrás encontrar la documentación oficial de ESLint aquí.
¡Gracias por leer! Ahora a disfrutar del código y de un café.
Top comments (1)
muy bueno!