EsLint + TypeScript + Prettier (Flat Config)
Published: 2024-06-08 00:45:57

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](https://eslint.org/blog/2022/08/new-config-system-part-2/) 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`.

```bash
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` 



```bash
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`.

```bash
nano eslint.config.msj
```

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

{% gist https://gist.github.com/joshnavdev/3634f849314358a58e044ba9edfa2fd0 file=eslint.config.mjs %}

Voy a explicar a gran escala en que consiste el codigo previo, aunque igual recomiendo que lean la [documentación oficial del Eslint](https://eslint.org/docs/latest/use/configure/).

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

```bash
touch .prettierrc.yaml
```

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

{% gist https://gist.github.com/joshnavdev/3634f849314358a58e044ba9edfa2fd0 file=.prettierrc.yaml %}

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!