Migrar TSLINT a ESLINT en Agular

Publicado el 14.02.2021 a las 09:54

Migrar TSLINT a ESLINT en Agular

Migrar TSLINT a ESLINT en Agular

En este artículo te explicaré cómo migrar de TSLINT a ESLINT en Angular con sólo 3 comandos

¿Qués es ESLINT?

ESLint es una herramienta de análisis de código estático para identificar patrones problemáticos encontrados en tu código.

Cuando digo patrones no sólo me refiero a errores, si no también a estilo de código, por ejemplo, en JavaScript puedes usar punto y coma u omitirlo, pues si estableces que en tu proyecto no quieres que se use, el linter te marcará un aviso si sí lo usas.

Puedes definir tus propias reglas y además las reglas por defecto son configurables.


El proyecto de TSLINT se encuentra sin soporte desde diciembre del pasado año 2020, así que ya es hora de migrar a ESLINT.


La migración la realizaremos con el siguiente repositorio facilintándonos enormemente la tarea.

Vamos a lío

  1. Instalar dependencias necesarias

    Ejecutar el comando del schematics

    ng add @angular-eslint/schematics

    Cuando finalice el comando anterior, veremos que se han añadido 9 nuevas dependencias, por supuesto, sólo para desarrollo.

    Las dependencias nuevas en mi caso son:

      "eslint": "^7.6.0",
      "eslint-plugin-import": "2.22.1",
      "eslint-plugin-jsdoc": "30.7.6",
      "eslint-plugin-prefer-arrow": "1.2.2",
      "@angular-eslint/builder": "1.2.0",
      "@angular-eslint/eslint-plugin": "1.2.0",
      "@angular-eslint/eslint-plugin-template": "1.2.0",
      "@angular-eslint/schematics": "1.2.0",
      "@angular-eslint/template-parser": "1.2.0",
      "@typescript-eslint/eslint-plugin": "4.3.0",
      "@typescript-eslint/parser": "4.3.0"
      
  2. Migrar el proyecto

    A continuación, migraremos el proyecto que necesitemos.

      ng g @angular-eslint/schematics:convert-tslint-to-eslint {{AQUÍ_EL_NOMBRE_DE_TU_PROYECTO}}
      

    Si no sabes cúal es el nombre de tu proyecto, lo puedes encontrar en el fichero angular.json, concretamente el primer campo del objeto proyects

    En el siguiente ejemplo de archivo angular.json, el nombre del proyecto es angularUniversal

      {
        "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
        "version": 1,
        "newProjectRoot": "projects",
        "projects": {
          "angularUniversal": {
            "projectType": "application",
            "schematics": {},
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
              "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                  "allowedCommonJsDependencies": [
      

    Al ejecutar el comando para la migración, nos creará un nuevo fichero .eslintrc.json y actualizará en angular.json

    En el fichero .eslintrc.json es dónde podremos configurar las reglas por defecto y añadir las nuestras.

  3. Ejecutar ESLINT

    Para comprobar el funcionamiento de ESLINT, se lo podemos pasar a nuestro proyecto a ver si encuentra alguna recomendación.

    El comando es:

      npx ng lint {{AQUÍ_EL_NOMBRE_DE_TU_PROYECTO}}
      

    Te recomiendo usar el flag fix para que repare los pequeños errores como por ejemplo, tabulación, faltan ;, espacios...

      npx ng lint {{AQUÍ_EL_NOMBRE_DE_TU_PROYECTO}}
      
  4. Eliminar el fichero tslint.json

    Poco más que añadir.

Hasta luego 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría