ESLint, qué es y cómo instalarlo en nuestro proyecto.

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 "구문을 확인하고, 문제를 찾고, 코드 스타일을 적용하려면". 걱정하지 마세요:

? What type of module does your project use?
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

Elegimos “JavaScript 모듈(가져오기/내보내기)” 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. 예를 들어, 아니오. Pero si tu utilizas TS podrás Yes. :디

? Does your porject use TypeScript? No / Yes

더 나은 미래:

? Where does your code run?
  Browser
  Node

En nuestro caso seleccionamos "브라우저". 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 인기. En nuestro caso "Standard"세라.

? 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. "JavaScript"옵션을 선택하십시오.

? What format do you want to your config file to be in?
> JavaScript
  YAML
  JSON

Luego nos va a preguntar para instalar las dependsencias, 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 dependsencias.

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 extension de vscode y también con la instalación de Prettier y cómo puede trabajar junto a ESLint para mejorarnos como desarrolladores.

팁: siempre lee la documentación oficial. En este caso podrás encontrar la documentaciónoficial de ESLint aquí .

¡ 감사합니다! Ahora a disfrutar del código y de un cafe.