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
  • el core de la librer铆a.
  • el parser que permite a ESLint interpretar c贸digo Typescript.
  • un plugins de reglas recomendadas para Typescript.

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

{ "parser": "@typescript-eslint/parser", "extends": [ "plugin:@typescript-eslint/recommended" ], "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" }, "rules": { // Aca puedes modificar alguna regla espec铆fica, por ejemplo: // "@typescript-eslint/explicit-function-return-type": "off", } }

Es opcional agregar un archivo 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
  • la librer铆a.
  • desactiva las reglas de ESLint que generan conflicto.
  • ejecuta prettier como una regla de ESLint.

Crear el archivo de configuraci贸n para prettier 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

{ "parser": "@typescript-eslint/parser", "extends": [ "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", // agrega las reglas de prettier a eslint "plugin:prettier/recommended" // agregar el plugin que integra eslint con prettier ], "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" }, "rules": { // Aca puedes modificar alguna regla espec铆fica, por ejemplo: // "@typescript-eslint/explicit-function-return-type": "off", } }

Ejecutar ESLint con el CLI

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

{ "scripts": { ... "lint": "tsc --noEmit && eslint '*/**/*.{js,ts}' --quiet --fix" ... } }

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 :

{ "parser": "@typescript-eslint/parser", "extends": [ "plugin:react/recommended", // agregar el plugin de reactjs para eslint "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "ecmaFeatures": { "jsx": true // permite a eslint analizar los archivos jsx o tsx } }, "rules": { // Aca puedes modificar alguna regla espec铆fica, por ejemplo: // "@typescript-eslint/explicit-function-return-type": "off", }, "settings": { "react": { "version": "detect" // para detectar la versi贸n de reactjs } } };

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

Actualizado 22/11/2019 a las 17:21