EsLint + TypeScript + Prettier (Flat Config)

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!