En este artículo vamos a ver cómo resolver uno de los problemas más frecuentes en equipos multidisciplinarios o con diferentes perfiles. Este pequeño problema nos afecta, sobre todo, a la hora de mantener el código, así que trataremos de automatizar el formato y corregir fácilmente posible code smell e inconsistencias en el proyecto.

Supongamos que el equipo de desarrollo ha construido una guideline de buenas prácticas en relación al formato. Nuestra indentación será en tabulación, 4 espacios y, si queremos, una línea vacía al final de cada fichero. ¿Cómo podemos cumplir estas prácticas sin revisar una y otra vez nuestros ficheros? ¿Cómo puedo saber si estoy incumpliendo alguna de estas normas en alguno de mis ficheros con un vistazo? ¿Podría saber antes de subir mi código si hay algún problema? ¿Se podrá arreglar automáticamente? La respuesta es y en las siguientes líneas veremos cómo.

En este caso, vamos a usar un proyecto en TypeScript. Dependiendo del tipo de proyectos podemos usar diferentes herramientas, en particular, a mí me gusta usar tres:

  • EditorConfig: ayudará a nuestro IDE a definir una guía de estilo para nuestro código, como por ejemplo, la sangría o indentación. Si usamos editores como Visual Studio, Sublime Text o de la familia IntelliJ, podemos formatear el código gracias a plugins o funciones añadidas, pero no es una funcionalidad propia de editorconfig.
  • ESLINT: es uno de los linter más utilizados en JavaScript. Se encarga de analizar el formato del código e inconsistencias encontradas en este como, por ejemplo, variables declaradas no usadas.
  • Prettier: se encarga de formatear nuestro código sin analizar la calidad del mismo y lo hace a través de unas reglas que definimos nosotros, además de otras que son importadas.

EditorConfig

Para comenzar, crearemos un proyecto vacío con npm, donde crearemos un fichero index.ts. Tras crear nuestro esqueleto, crearemos otro fichero llamado .editorconfig donde escribiremos nuestras reglas de estilo.

Simplemente teniendo este fichero en la raíz de nuestro proyecto, hace que tengamos una línea de estilo definida. En el caso de Visual Studio Code, si tenemos instalado el plugin EditorConfig, podemos darle formato a nuestro fichero con lo que acabamos de definir en este fichero.

Prettier y ESLINT

En mi opinión, estas dos herramientas deben ir de la mano. Mientras que ESLINT nos va a decir qué inconsistencia tenemos en nuestro código, Prettier nos va a dar un formato excelente siguiendo nuestras directrices, para ello vamos a instalar las herramientas necesarias a nuestro proyecto:

Instalando TypeScript:

$ npm install -D typescript

Instalar las dependencias ESLINT:

$ npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

  • eslint: es el core de la librería
  • @typescript-eslint/parser: el complemento que permite a ESLint interpretar Typescript
  • @typescript-eslint/eslint-plugin: un conjunto de reglas y normas recomendadas para typescript

Ahora necesitamos hacer una primera configuración de ESLINT, para ello creamos en la raíz del proyecto nuestro fichero .eslintrc:

En estos momentos tendríamos la configuración básica y estándar definida por TypeScript y ESLINT, pero podemos definir nuestros “esquemas” o estilos dependiendo de quién extendemos como, por ejemplo, usando el estándar para ESLINT de Airbnb, que es de las configuraciones de linter más usadas en JavaScript.

Ahora que tenemos instalado y definido el fichero .eslintrc pasamos a instalar las dependencias de prettier como desarrollo:

$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier prettier-eslint

Una vez instaladas nuestras dependencias, creamos el fichero .prettierrc con las reglas de formato que necesitamos definir, teniendo en cuenta que no deberemos tener inconsistencia con las normas definidas en .editorconfig:

Al definir estas normas, deberemos de cambiar nuestras configuración en el ESLINT, de esta manera dejaremos de usar las reglas de TypeScript y las de ESLINT para usar las de prettier:

Prettier y ESLINT cuenta con una serie de comandos que nos ayudan a ejecutar estas funciones sin necesidad de estar escribiendo código o abrir un fichero como, por ejemplo, antes de hacer un git push. Para ello añadimos (en nuestro caso) un script a package.json.

Lo ejecutamos con:

$ npm run prettier

$ npm run lint

Todos estos procesos podremos automatizarlos, ¡estad atentos a próximas publicaciones donde veremos cómo hacerlo!

Repositorio de ejemplo: https://github.com/Naxirdan/team-format-environment

Adrián Cejudo

Adrián Cejudo

IT Consultant - Altran España

Enamorado de las nuevas tecnologías. Comencé mi andadura en la programación de manera autodidacta a los 15 años y a día de hoy sigo formándome de manera constante con el mismo ímpetu y ganas. Mi objetivo en Altran es poder aportar toda mi experiencia y conocimiento en las distintas áreas, y por supuesto, desarrollarme profesional y personalmente gracias a los magníficos expertos y compañeros de los que nos rodeamos en el día a día.

Quizá también te interese…