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

Pablo Fogliazza — Mon, 16 May 2022 12:32:46 +0000

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é.

Creando un proyecto de React con Vite

Pablo Fogliazza — Wed, 11 May 2022 21:51:59 +0000

A continuación voy a contarles cómo podemos iniciar nuestro proyecto de React utilizando Vite. Para ello en la consola vamos a posicionarnos sobre la carpeta que contendrá nuestra carpeta del proyecto y vamos a ejecutar el siguiente comando:

$ npm create vite@latest

Allí vite nos irá conduciendo para poder crear nuestro proyecto a gusto. Podremos elegir el nombre del proyecto, el framework y la variante que utilizaremos para nuestro proyecto.

Al finalizar la instalación nos dirá que debemos correr los siguientes comandos para instalar y ejecutar el servidor de desarrollo:

$ cd [nombre-del-proyecto]
$ npm install
$ npm run dev

Debemos ingresar a la carpeta del proyecto con el primer comando y luego ejecutamos el segundo comando, donde se instalarán todas las dependencias que necesita para crear nuestro proyecto con Vite. ¡Felicitaciones! Ya tienes creadas las bases de tu proyecto con Vite.

Para verificar que todo funciona correctamente puedes correr el servidor de desarrollo con el último comando y si todo salió bien, deberías visualizar la siguiente página en tu navegador: http://localhost:3000/

Ahora ya puedes prepararte un mate o un café :) y ponerte a escribir el código de tu proyecto inicializado con Vite. ¡Éxito!

Aquí puedes encontrar toda la documentación oficial de Vite.

¡A codear con un buen café! Gracias por leer.

DEV Community: Pablo Fogliazza

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

Creando un proyecto de React con Vite