Forem: Joshua Navarro

EsLint + TypeScript + Prettier (Flat Config)

Joshua Navarro — Sat, 08 Jun 2024 00:45:57 +0000

Today I woke up with the need to create an email scheduled notification for my personal project using AWS and I noticed that these last few months I have abandoned NodeJS ... y cuando comenzé a configurar una función lambda usando SAM (Serverless Application Model) me di cuenta que por lo menos necesitaria una configuración de EsLint con Typescript minima para poder sentirme comodo codificando.

Para mi sorpresa me di cuenta que EsLint ha cambiado completamente su sistema de configuración haciendo uso de lo que ellos llaman Flat Config por ello decidi hacer este pequeño blog para poder configurar EsLint, TypeScript y Prettier desde cero.

Nota: Vamos a utilizar npm como gestor de paquetes para node pero puedes usar el de tu elección.

Pre-requisitos

Tener NodeJS version >=20.14.0

Creación del projecto

Vamos a crear una carpeta vacia e inicializar npm.

mkdir my-project
cd my-project
npm init -y

Instalando dependencias

Vamos a instalar las siguientes dependencias con sus repestivas dependencias @Types, las cuales son:

eslint
@eslint/js con @types/eslint__js
typescript
typescript-eslint
prettier
eslint-plugin-prettier
eslint-config-prettier con @types/eslint-config-prettier

npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint prettier eslint-plugin-prettier eslint-config-prettier @types/eslint-config-prettier

Configurar EsLint y Prettier

Una vez instalado vamos a comenzar con la configuración de EsLint y Prettier. Vamos a crear el archivo eslint.config.msj.

nano eslint.config.msj

una vez creada vamos a poner toda la configuración del archivo.

Voy a explicar a gran escala en que consiste el codigo previo, aunque igual recomiendo que lean la documentación oficial del Eslint.

Como podemos ver al inicio estan los imports el cual importamos las librerias @eslint/js que cuenta con la configuración para JavaScript, typescript-eslint que como pueden adiviar cuenta con la configuración de TypeScript, eslint-plugin-prettier que es un plugin de eslint para mostrar errores de Prettier y eslint-config-prettier debido a que prettier y eslint pueden tener reglas similares esta libreria nos ayuda a evitar problemas con estas librerias y que todo funcione de manera esperada.

Para la configuración del eslint usamos la librerias typescript-eslint con su metodo config que es un helper opcional el cual permite ingresar distintas configuraciones de eslint y que internamente retorne todo lo que se eslint requiere.

En el primer argumento del metodo config agregamos toda la configuración para TypeScript extendiendo las configuraciones recomendadas tanto para JavaScript y Typescript.

Como ahora el Flat Config de EsLint permite tener una configuración en cascada, decidí que toda la configuración es Prettier estaria en el siguiente argumento de configuración extendiendo su configuración recomendada.

Ya que tenemos configurado EsLint vamos a configurarlo creando el archivo .prettierrc.yaml.

touch .prettierrc.yaml

Y agregarmos la configuración de su preferencia, este es un ejemplo de mi configuración minima.

Bueno por ahora esto es lo mas básico que en lo personal necesito para poder desarrollar en TypeScript, igual pueden ir agregando mas plugins como para React, AirBnb, etc.

Saludos!

Vite + ReactTS + ESLint Airbnb + Prettier

Joshua Navarro — Tue, 25 Jul 2023 01:52:58 +0000

El presente blog vamos a configurar una aplicación en React con la ayuda de Vite. Configuraremos TypeScript, ESLint Airbnb, Prettier y entre otros mas que iré añadiendo.

Lineamientos a seguir

Se usará yarn como gestor de paquetes de NodeJS.
Los archivos de configuración serán en YAML, pero pueden optar por otras extensiones.

Creación de Proyecto en Vite + TypeScript

Vamos a empezar creando un proyecto desde cero con Vite utilizando TypeScript.

yarn create vite

Este comando nos permite crear un proyecto desde cero, para ello solo debemos responder las preguntas que nos saldrá en la consola.

✔ Project name: › vrtsept-template
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Ahora instalamos las dependencias con el comando yarn install.

Configurando ESLint

Por default Vite nos crea un archivo .eslintrc.cjs la cual configura los siguientes plugins:

eslint
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react-hooks
eslint-plugin-react-refresh

Por el momento vamos a eliminar el archivo .eslintrc.cjs (corriendo el comando $ rm .eslintrc.cjs) y vamos a configurar ESLint desde cero para no estar acomplados a las futuras actualizaciones que pueda tener el template de Vite.

Ahora vamos a instalar la configuración de ESLint de Airbnb, la cual es una conocida y aceptada en el mundo de React (mayor informacion https://www.npmjs.com/package/eslint-config-airbnb), vamos a instalar el plugin llamado eslint-config-airbnb con sus depenncias.

npx install-peerdeps --dev eslint-config-airbnb

Este comando instalara los siguientes plugins por default, los cuales son configurado por el plugin de airbnb:

eslint-config-airbnb
eslint
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-plugin-react-hooks

Como nosotros estamos utilizando TypeScript entonces debemos extender esta configuración para que funcione con TS sin problemas, para ello ya se cuenta con un plugin llamdo eslint-config-airbnb-typescript el cual vamos a instalar de la misma manera que el anterior.

npx install-peerdeps --dev eslint-config-airbnb-typescript

Este compando instalará lo siguiente:

eslint-config-airbnb-typescript
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint
eslint-plugin-import

Nota: Algunas dependencias fueron instalaras dos veces, no hay problema con esto ya que ambas mantienen la misma version.

Con esto ya podriamos crear nuestro archivo .eslintrc.yaml con la siguiente configuración.

root: true
env:
  browser: true
  es2020: true
extends:
  - airbnb
  - airbnb-typescript
  - airbnb/hooks
ignorePatterns:
  - dist
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ./tsconfig.json
plugins:
  - react
rules:
  no-console: warn
  react/react-in-jsx-scope: off
  '@typescript-eslint/no-unused-vars': warn

Esta sería la configuración inicial necesaria para poder trabajar con ESLint.

Configurando Prettier

Vamos a configurar Prettier para que nos ayude a automaticamente remover varios errores de ESLint que pueden aparecer por temas de formatos, a su vez vamos a configurar eslint para que muestre errores de prettier y no haya alguna inconsitencias entre las reglas de ESLint y el auto-formato de Prettier.

Vamos a instalar Prettier

yarn add -D prettier

Ahora vamos a crear un archivo .prettierrc.yaml donde vamos a configurar nuestras reglas de formato.

semi: true
tabWidth: 2
printWidth: 120
singleQuote: true
trailingComma: es5
endOfLine: auto

Ahora vamos a configurar ESLint para que las reglas de formato de Prettier esten alineados con las reglas de ESLint. Primero, instalamos dos dependecias.

yarn add -D eslint-plugin-prettier eslint-config-prettier

Una vez instalado simplemente debemos extender nuestra configuración con plugin:prettier/recommended.

... eslint configuration

extends:
  - ... other plugins
  - plugin:prettier/recommended

... eslint configuration

Ahora cuando tengamos un error de prettier este sera mostrando en el linter y algunos errores de formato que mostraba ESLint por default han sido desabilitados.

Configurando tu flujo de trabajo con Git

Joshua Navarro — Sun, 06 Jun 2021 23:14:43 +0000

Introducción

Hoy en día Git se ha vuelto una herramienta básica para trabajar cuando estas desarrollando un proyecto, sea de manera individual o con un equipo.

Esto se debe porque brinda una serie de herramientas que hacen la vida mas facil a los programadores, permite la colaboración en equipo, detecta conflictos y mantiene un historial de todos los cambios que se realicen en el proyecto, a todo esto se le llama control de versiones siendo Git la mas popular hoy en dia (si quieres saber mas sobre el control de versiones puedes visitar este enlace).

Git ofrece gran flexibilidad a la hora de trabajar, esto es positivo ya que te permite adaptar su funcionamiento a tu flujo de trabajo y no te impone uno. Aunque por este mismo motivo, cuando uno inicia un proyecto y no tiene experiencia puede llegar a ser un poco confuso saber cual es la mejor forma de trabajar. Es por eso que decidí hacer este blog, en la cual comentaré una de las distintas soluciones que puedes encontrar.

Features Branches Workflow (FBW)

El flujo de trabajo de ramas de funcionalidades nos brinda el concepto de ramas de funcionalides (feature branch en ingles), la cual consiste en no trabajar directamente en la rama principal, sino crear una rama la cual este dedicada a una funcionalidad en especifico, de ahi su nombre. Esto nos brinda un espacio de trabajo por funcionalidades en las cuales uno o mas personas puedan estar trabajando en un mismo funcionamiento sin alterar la rama principal o el trabajo de otras funcionalidades ajenas.

Una vez que se tenga la funcionalidad lista, esta se podria integrar con la rama principal por medio de un pull request brindando una capa de seguridad extra a la rama principal ya que con este método se puede tener control de los cambios que se estan insertando.

Uso de la rama de desarrollo (development)

Aunque bien en el flujo de trabajo de ramas de funcionalidades se hace uso de la rama master por defecto, muchos equipos ven necesario tener una rama secundaria la cual es conocida como la rama developmente o dev, esta rama seria una copia de la rama master y tendria las funcionalidades que aun no han sido desplegadaz a producción. Esto da a enteder que todo commit hecho en la rama master seria reflejado en el usuario final (producción), mientras que los cambios hechos en la rama development no necesariamente tendrían impacto con el usuario final.

Ejemplos

Inicialización del proyecto

Nota: En este ejemplo se usará como servicio de alojamiento de repositorio GitHub y el ejemplo sera para crear un boilerplate para ExpressJS.

Lo primero que se debería hacer es crear la carpeta del proyecto con su estructura inicial (mejor conocido como boilerplate). Tambien iniciaremos Git para el proyecto creado (no se olviden de tener un .gitignore en la estructura de su proyecto).

# Creamos el proyecto con su estrctura inicial
❯ npx create-nodejs-express-app feature-branch-workflow
❯ cd feature-branch-workflow

# Inicializamos Git
❯ git init -b development
Initialized empty Git repository in <your-path-folder>/.git/

En el ultimo comando usamos la opción de -b <branch-name> para indicar cual sera la rama principal, en una inicio de proyecto es natural iniciar con la rama development ya que en producción aun no se ha desarrollado nada, ya cuando se realice el primer despliegue, se creara la rama master.

Lo siguiente es crear un repositorio remoto donde se almacenaran nuestro proyecto, una vez creado llego el momento de realizar el primer commit y push.

❯ git add .
❯ git commit -m "initial commit"
# Agregamos nuestro repositorio remoto
❯ git remote add origin <your-repository-uri>
❯ git push -u origin development
Branch 'development' set up to track remote branch 'development' from 'origin'.

Una vez llegado a este punto, nuestro proyecto ya esta listo poder crecer en funcionalidades, esto se haria creando una rama feature teniendo como base la rama development. Esto lo veremos en el siguiente ejemplo.

Agregando funcionalidades al proyecto

Para agregar una funcionalidad se crearía una rama nueva, la cual tenga el nombre de la funcionalidad que se quiera trabajar, en lo personal me gusta llamarlo de la siguiente forma feat-<feature-name> esto puede variar segun el gusto, el objetivo es que se entienda la funcionalidad que se va a realizar en esa nueva rama. Tener en cuenta que esta rama siempre debe crearse a partir de la rama development y no de la rama master.

❯ git checkout -b feat-auth-services development
Switched to a new branch 'feat-auth-services'

Noten que el utimo parametro del comando siempre debería ser development.

En caso que estes trabajando solo o en equipo el desarrollo de la funcionalidad, es recomandable enlazar tu nueva rama con tu repositorio remoto, esto se hace haciendo un push al repositorio usando la opción de --set-upstream que también se conoce como -u.

❯ git push -u origin feat-auth-services
Branch 'feat-auth-services' set up to track remote branch 'feat-auth-services' from 'origin'.

Esto creara tu rama en el repositorio remoto y a la vez permitira rastrear los cambios que se hagan en esta rama (para mayor información pueder leer en siguiente blog). Gracias a esto cuando quieras publicar nuevos cambios a tu rama feature lo podras hacer simplemente con el comando git push.

Una vez realizado todos los commits necesarios y la funcionalidad ya este probada, se daria inicio al pull request. Esto depende mucho de la plataforma que esten usando para almacenar su proyecto, en mi caso he usado GitHub, pero la experiencia es la misma en otras plataformas.

Lo primero sera ir a la opcion de Pull Request de tu repositorio.

Una vez ahi, le dan en New pull request

Esto les mostrara una pantalla donde les permitira elegir la base la cual es la fuente donde se insertara la nuava funcionalidad (elegir development), y el compare que seria la rama feature donde se hicieron y probaron los cambios.

Lo siguiente es darle en Create pull request, agregar una descrición y listo. Ahora el código nuevo que has escrito podra ser revisado y aprobado.

Como dije anteriormente, esto brinda una capa de seguridad extra al momento de realizar una integración.

Conclusiones

Existen muchos flujos de trabajo para Git como Gitflow Workflow, Forking Workflow, etc. El objetivo de este blog es brindar una guía inicial de como desarrollar un flujo de trabajo en base al Feature Branch Workflow, por medio de ejemplos; ya que me vi con la necesidad de cuando quize enfrentar nuevos proyectos desde cero.