Configurar ESLint a Angular per obtenir codi net i fàcil de mantenir

1. Introducció: La importància d’ESLint en projectes Angular col·laboratius

En el món del desenvolupament de programari, la consistència i la qualitat del codi són pilars fonamentals per a l’èxit de qualsevol projecte, especialment quan es treballa en un entorn col·laboratiu. Aquí és on eines com ESLint entren en joc, convertint-se en aliats indispensables per als desenvolupadors d’Angular. ESLint és un analitzador de codi estàtic per a JavaScript que identifica patrons problemàtics en el codi i ajuda els desenvolupadors a escriure codi més net i evitar errors potencials mitjançant l’aplicació de regles configurables.

La utilitat d’ESLint rau en la seva capacitat per examinar el codi font sense executar-lo, la qual cosa permet detectar problemes en les primeres etapes del desenvolupament. Això no només ajuda a reduir la quantitat d’errors que arriben a producció, sinó que també fomenta l’adopció d’estàndards de codificació uniformes en tot l’equip. En definir i seguir un conjunt consistent de regles de linting, es millora significativament la llegibilitat i el manteniment del codi, facilitant la col·laboració i reduint la possibilitat que diferents estils de codificació generin confusió o conflictes. L’àmplia adopció d’ESLint en l’ecosistema de JavaScript, evidenciada per les seves més de 43 milions de descàrregues setmanals, subratlla la seva fiabilitat i el fort suport de la comunitat, la qual cosa garanteix una gran quantitat de recursos i solucions disponibles.

2. Instal·lació d’ESLint en un projecte Angular

Si el teu projecte Angular no ve amb ESLint preconfigurat (la qual cosa és comú en versions d’Angular 12 en endavant), la instal·lació és un procés senzill gràcies a l’eina de línia d’ordres d’Angular (Angular CLI). El paquet @angular-eslint/schematics facilita la configuració automatitzada d’ESLint en projectes Angular.

Per començar, obre la terminal a l’arrel del teu projecte Angular i executa la següent ordre:

ng add @angular-eslint/schematics

Aquesta ordre descarrega i instal·la el paquet @angular-eslint/schematics i realitza les configuracions necessàries per integrar ESLint en el teu projecte Angular. Internament, aquest schematic automatitza diversos passos importants. Primer, modifica el fitxer package.json per incloure les dependències d’ESLint i els connectors (plugins) relacionats amb TypeScript i Angular, a més d’afegir un script a la secció «scripts» per facilitar l’execució de l’analitzador (linter). Després, actualitza el fitxer angular.json per registrar un builder d’ESLint. Aquest builder permet executar ESLint a través d’ordres de l’Angular CLI, com ng lint. Finalment, crea o modifica el fitxer de configuració .eslintrc.json a l’arrel del projecte, on es definiran les regles de linting. La utilització d’Angular Schematics simplifica significativament aquest procés, abstraient la necessitat d’instal·lar manualment dependències i configurar múltiples fitxers, la qual cosa estalvia temps i redueix la possibilitat d’errors.

3. Configuració bàsica del fitxer .eslintrc.json

Un cop ESLint s’ha instal·lat al teu projecte Angular, el fitxer clau per a la seva configuració és .eslintrc.json, ubicat a l’arrel del projecte. Aquest fitxer defineix les regles que ESLint utilitzarà per analitzar el teu codi. A continuació, es mostra un exemple d’una configuració bàsica per a un projecte Angular:

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended"
      ],
      "rules": {
        "@typescript-eslint/no-unused-vars": "warn",
        "no-console": "error"
      }
    }
  ]
}

Analitzem cada secció d’aquest fitxer:

• root: true: Aquesta línia indica que aquest és el fitxer de configuració arrel d’ESLint per al projecte. Quan ESLint analitza fitxers al projecte, començarà buscant un fitxer .eslintrc.json al directori del fitxer actual i continuarà pujant per la jerarquia de directoris fins que trobi un fitxer amb root: true o arribi a l’arrel del sistema de fitxers. Això assegura que la configuració definida en aquest fitxer s’apliqui a tot el projecte i evita que s’utilitzin configuracions de directoris superiors de forma accidental.
• overrides: […]: Aquesta secció permet definir configuracions específiques per a certs grups de fitxers mitjançant l’ús de patrons. És útil quan es necessiten aplicar regles diferents a diferents tipus de fitxers dins del mateix projecte.
• files: [*.ts]: Dins de la secció overrides, aquesta propietat especifica a quins fitxers s’aplicarà la configuració definida en aquest bloc. En aquest cas, el patró *.ts indica que les regles dins d’aquest override s’aplicaran únicament als fitxers amb l’extensió .ts, que són els fitxers de codi TypeScript en un projecte Angular.
• extends: […]: Aquesta propietat és fonamental, ja que especifica una o més configuracions predefinides de les quals hereta la configuració actual. Això permet aprofitar conjunts de regles recomanades sense haver de definir-les totes des de zero. A l’exemple, s’estenen tres configuracions:
  • eslint:recommended: Aquest és un conjunt de regles bàsiques recomanades per l’equip d’ESLint que cobreixen molts dels possibles errors i males pràctiques comunes en JavaScript.
  • plugin:@typescript-eslint/recommended: Aquesta configuració prové del connector (plugin) @typescript-eslint/eslint-plugin i habilita un conjunt de regles específiques per a TypeScript, recomanades per l’equip de desenvolupament de TypeScript. Perquè ESLint pugui entendre la sintaxi de TypeScript, és necessari utilitzar el parser @typescript-eslint/parser, que generalment s’instal·la juntament amb aquest connector.
  • plugin:@angular-eslint/recommended: Aquesta configuració és proporcionada pel connector (plugin) @angular-eslint/eslint-plugin i inclou regles específiques per a projectes Angular, ajudant a assegurar el compliment de les convencions i bones pràctiques de l’entorn de treball (framework). Estendre configuracions predefinides proporciona una base sòlida de regles de linting basades en les millors pràctiques establertes, la qual cosa evita que els desenvolupadors hagin de definir cada regla des del principi.
• rules: Aquesta secció permet personalitzar el comportament de les regles que s’han estès o definir regles addicionals específiques per al projecte. Les regles es defineixen com a parells clau-valor, on la clau és el nom de la regla i el valor és el nivell de severitat o una configuració addicional per a aquesta regla. A l’exemple, es defineixen dues regles:
  • @typescript-eslint/no-unused-vars: warn: Aquesta regla, proporcionada pel connector (plugin) de TypeScript, adverteix sobre les variables declarades en el codi que no s’utilitzen. El nivell de severitat warn indica que si es troba una variable no utilitzada, ESLint mostrarà una advertència, però el procés de linting no fallarà.
  • no-console: error: Aquesta regla, proporcionada per ESLint, marca com un error l’ús de la funció console.log() (i altres funcions relacionades de l’API de la consola) en el codi. El nivell de severitat error significa que si es troba una crida a console.log(), el procés de linting fallarà, la qual cosa pot ser útil per evitar que s’enviï codi amb logs sense eliminar a producció.

La capacitat de configurar els nivells de severitat de les regles (com warn, error, off) permet als equips de desenvolupament aplicar gradualment els estàndards de codificació i prioritzar la correcció de problemes crítics sobre preocupacions estilístiques menys severes.

4. Configuració avançada i regles recomanades

La configuració bàsica del fitxer .eslintrc.json proporciona una base excel·lent per a la majoria dels projectes Angular. No obstant això, ESLint ofereix una gran flexibilitat per personalitzar encara més les regles segons les necessitats específiques del teu equip i projecte.

A la secció rules del fitxer .eslintrc.json, pots afegir noves regles, modificar la severitat de les regles esteses o fins i tot desactivar-les completament. A més, la comunitat d’ESLint ha desenvolupat una àmplia varietat de connectors (plugins) que estenen la funcionalitat base d’ESLint, afegint regles específiques per a diferents llibreries, entorns de treball (frameworks) o patrons de codificació.

A continuació, es presenten alguns exemples de regles avançades que solen ser recomanades en projectes Angular:

• Evitar l’ús d’any: La regla @typescript-eslint/no-explicit-any: error del connector (plugin) de TypeScript és fonamental per aprofitar al màxim els beneficis del tipatge estàtic que ofereix TypeScript. En establir aquesta regla a error, s’obliga els desenvolupadors a ser explícits amb els tipus i s’evita l’ús del tipus any quan no és estrictament necessari. L’ús excessiu d’any pot debilitar la verificació de tipus en temps de compilació, la qual cosa podria portar a errors en temps d’execució que TypeScript està dissenyat per prevenir.
• Requerir la verificació estricta de nuls: La regla @typescript-eslint/strict-boolean-expressions: warn també del connector (plugin) de TypeScript ajuda a prevenir errors en assegurar que les expressions booleanes només utilitzin valors booleans explícits. Això evita conversions implícites que podrien portar a comportaments inesperats, especialment en treballar amb valors que poden ser null o undefined. El nivell warn suggereix que es presti atenció a aquests casos, encara que no es considerin errors crítics que aturin el desenvolupament immediatament.
• Forçar convencions de nomenclatura: El connector (plugin) @typescript-eslint/eslint-plugin proporciona la regla @typescript-eslint/naming-convention que permet definir patrons de nomenclatura específics per a diferents tipus d’identificadors, com interfícies, classes, variables, mètodes, etc. Configurar aquestes regles ajuda a mantenir la consistència en la nomenclatura del codi, la qual cosa millora significativament la llegibilitat i facilita la comprensió del projecte per part de tots els membres de l’equip. Per exemple, es poden definir regles perquè les interfícies comencin amb una I majúscula (ex: interface IUserService), els mètodes utilitzin camelCase, i les constants estiguin en UPPER_SNAKE_CASE.
• Linting de plantilles HTML: Per assegurar la qualitat del codi no només als fitxers TypeScript sinó també a les plantilles HTML d’Angular, es pot utilitzar el connector (plugin) @angular-eslint/eslint-plugin-template. Aquest connector permet a ESLint analitzar i aplicar regles als fitxers amb l’extensió .html. Per habilitar-lo, primer has d’instal·lar el connector:

npm install --save-dev @angular-eslint/eslint-plugin-template

Després, has de configurar-lo al teu fitxer .eslintrc.json. A la secció plugins, afegeix @angular-eslint/template. A més, a la secció overrides, afegeix una configuració específica per als fitxers *.html:

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended"
      ],
      "rules": {
        "@typescript-eslint/no-unused-vars": "warn",
        "no-console": "error"
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"]
    }
  ]
}

Estendre ESLint per analitzar les plantilles HTML d’Angular assegura la consistència i el compliment de les millors pràctiques no només en el codi TypeScript sinó també en la capa de presentació, la qual cosa porta a una aplicació més robusta i fàcil de mantenir.

5. Integració amb Prettier per a formatatge automàtic

Si bé ESLint s’enfoca en la qualitat semàntica i el compliment de regles d’estil, Prettier és una eina que s’encarrega de formatar el codi de manera automàtica per assegurar un estil consistent en tot el projecte. És important entendre la diferència fonamental entre ambdós: ESLint és un analitzador (linter) que identifica problemes, mentre que Prettier és un formatador que corregeix l’estil del codi.

Per integrar Prettier amb ESLint en un projecte Angular, es necessiten instal·lar dos paquets addicionals com a dependències de desenvolupament: eslint-config-prettier i eslint-plugin-prettier.

Executa les següents ordres a la terminal:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier: Aquest paquet deshabilita totes les regles de format d’ESLint que podrien entrar en conflicte amb Prettier.
• eslint-plugin-prettier: Aquest connector (plugin) permet executar Prettier com una regla d’ESLint, mostrant els problemes de format com a errors d’ESLint.

Un cop instal·lats aquests paquets, has de modificar el teu fitxer .eslintrc.json per integrar-los. A la secció extends dins de l’override per a fitxers TypeScript, afegeix plugin:prettier/recommended al final de l’array. És crucial que aquesta línia estigui al final, ja que l’ordre a l’array extends importa; les configuracions posteriors tenen prioritat sobre les anteriors.

El fitxer .eslintrc.json amb Prettier integrat hauria de semblar així:

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:prettier/recommended" // Añadir esta línea
      ],
      "rules": {
        "@typescript-eslint/no-unused-vars": "warn",
        "no-console": "error"
      }
    }
  ]
}

En col·locar plugin:prettier/recommended al final de l’array extends, s’assegura que les regles de format de Prettier tinguin la menor prioritat i no entrin en conflicte amb altres configuracions d’ESLint. Això permet que ESLint s’encarregui de la qualitat del codi i Prettier del seu format, treballant junts de manera harmoniosa.

6. Conclusió: Fomentant un codi net i mantenible en equips Angular

La implementació d’ESLint i la seva correcta configuració en projectes Angular és una inversió inavaluable per a qualsevol equip de desenvolupament. En adoptar aquestes pràctiques, es promou l’escriptura de codi més net, consistent i mantenible al llarg del cicle de vida del projecte. La capacitat de detectar errors primerencament, aplicar estàndards de codificació uniformes i automatitzar el formatatge del codi facilita la col·laboració, redueix la fricció entre els membres de l’equip i, en última instància, condueix a la creació d’aplicacions Angular de major qualitat.

Per a aquells que vulguin aprofundir encara més en la configuració d’ESLint i explorar les nombroses opcions i regles disponibles, es recomana consultar la documentació oficial d’ESLint a eslint.org. A més, els connectors (plugins) específics per a Angular, com @angular-eslint/eslint-plugin i @angular-eslint/eslint-plugin-template, ofereixen una àmplia gamma de regles dissenyades per garantir el compliment de les millors pràctiques de l’entorn de treball (framework). L’exploració d’aquests recursos permetrà als desenvolupadors personalitzar encara més la seva configuració de linting i adaptar-la a les necessitats particulars dels seus projectes i equips.

Si vols complementar la teva configuració amb articles més específics sobre Husky i Prettier, dona un cop d’ull a aquests articles:

• [Link al artícle sobre Husky]
• Prettier al rescat: Dona format automàticament al teu codi i oblida’t de les discussions d’estil