Usar ESLint y Prettier en proyectos TypeScript

Siempre le estaré agradecido a @xabadu quien me enseño a utilizar y configurar estas herramientas en mis proyectos, desde ese momento los necesito casi en cualquier proyecto, como lo dije en un tweet, "Me ayudan a proteger el código de mí mismo", en esos días de flojera cuando piensas "total si así funciona...", quieres subirlo pero el linter te advierte que eso será un problema para tú yo del futuro y si estás trabajando en equipo ya no son opcionales, son obligatorios. Todos escribimos código de forma diferente y si no tienes un estándar mínimo de lo que se espera de tu código llegara el momento en que será imposible de leer sin dedicarle más tiempo del que queremos.

Para el caso de Typescript tienes dos opciones TSLint y ESLint, el primero funciona solo con Typescript, el segundo es compatible con Typescript y Javascript, lo que te da la flexibilidad de usarlo en proyectos de migración en caso de que estes pasando de JS a TS, funciona perfecto. Adicional a esto el equipo de Typescript reconoce que ESLint tiene mejor rendimiento que TSLint.

Configurando ESLint

Instalar las dependencias

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

• eslint el core de la librería.
• @typescript-eslint/parser el parser que permite a ESLint interpretar código Typescript.
• @typescript-eslint/eslint-plugin un plugins de reglas recomendadas para Typescript.

Ahora creamos el archivo .eslintrc en la raíz del proyecto y le agregas el siguiente contenido:

1{
2 "parser": "@typescript-eslint/parser",
3 "extends": [
4   "plugin:@typescript-eslint/recommended"
5 ],
6 "parserOptions": {
7   "ecmaVersion": 2018,
8   "sourceType": "module"
9 },
10 "rules": {
11   // Aca puedes modificar alguna regla específica, por ejemplo:
12   // "@typescript-eslint/explicit-function-return-type": "off",
13 }
14}

Es opcional agregar un archivo .eslintignore con la carpeta donde se guardará tu código transpilado de TS a JS.

Configurando Prettier

Necesitas instalar las dependencias que ayudan a la comunicación entre las reglas de ESLint con el formato del código que vas a definir en Prettier.

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

• prettier la librería.
• eslint-config-prettier desactiva las reglas de ESLint que generan conflicto.
• eslint-plugin-prettier ejecuta prettier como una regla de ESLint.

Crear el archivo de configuración para prettier .prettierrc en la raíz del proyecto, con el siguiente contenido:

{
 "semi": false, // punto y coma al final de cada declaración
 "tabWidth": 2, // tamaño de los tabs
 "printWidth": 100, // largo máximo de una línea de código
 "singleQuote": true,  // comillas simples
 "trailingComma": "none" // comas en objetos o arrays multi líneas
}
 

Puedes ver más opciones en la documentación

Integrando ESLint con Prettier

Actualizando la configuración de eslint en el archivo .eslintrc

1{
2 "parser": "@typescript-eslint/parser",
3 "extends": [
4   "plugin:@typescript-eslint/recommended",
5   "prettier/@typescript-eslint",  // agrega las reglas de prettier a eslint
6   "plugin:prettier/recommended" // agregar el plugin que integra eslint con prettier
7 ],
8 "parserOptions": {
9   "ecmaVersion": 2018,
10   "sourceType": "module"
11 },
12 "rules": {
13   // Aca puedes modificar alguna regla específica, por ejemplo:
14   // "@typescript-eslint/explicit-function-return-type": "off",
15 }
16}

Ejecutar ESLint con el CLI

Para ejecutar el Linter sobre todo el código debes agregar el script que ejecuta tu código:

1{
2 "scripts": {
3  ...
4   "lint": "tsc --noEmit && eslint '*/**/*.{js,ts}' --quiet --fix"
5  ...
6 }
7}

Este comando transpila el código de TS a JS en caso de que no de errores entonces ejecuta el linter sobre todos los archivos .js o .ts. De esa forma tienes dos validaciones.

Para un proyecto de Reactjs

Para poder usar esta configuración con un proyecto de Reactjs necesitas agregar un par de dependencias y configuraciones, primero instalar el plugin de ESLint para interpretar código JSX, TSX:

yarn add -D eslint-plugin-react

Luego actualizar el archivo de .eslintrc:

1{
2 "parser": "@typescript-eslint/parser",
3 "extends": [
4   "plugin:react/recommended", // agregar el plugin de reactjs para eslint
5   "plugin:@typescript-eslint/recommended",
6   "prettier/@typescript-eslint",
7   "plugin:prettier/recommended"
8 ],
9 "parserOptions": {
10   "ecmaVersion": 2018,
11   "sourceType": "module",
12   "ecmaFeatures": {
13     "jsx": true // permite a eslint analizar los archivos jsx o tsx
14   }
15 },
16 "rules": {
17   // Aca puedes modificar alguna regla específica, por ejemplo:
18   // "@typescript-eslint/explicit-function-return-type": "off",
19 },
20 "settings": {
21   "react": {
22     "version": "detect" // para detectar la versión de reactjs
23   }
24 }
25};

¡Listo! De esa forma podras utilizar ESLint y prettier integrados en Reactjs.

Puedes ver un ejemplo de esta configuración en el proyecto base de una API apollo con Postgres que es un template que puedes usar para alguno de tus proyectos.