En aquest tema, aprendrem sobre la importància de mantenir un codi net i consistent, i com utilitzar eines de linting per ajudar-nos a aconseguir-ho. El linting és el procés d'analitzar el codi font per trobar errors de programació, estils de codi inconsistents i altres problemes potencials.

• Entendre la importància de la qualitat del codi.
• Aprendre a configurar i utilitzar eines de linting en un projecte Angular.
• Conèixer les regles de linting més comunes i com personalitzar-les.

Mantenir un codi de qualitat és essencial per diverses raons:

• Mantenibilitat: Un codi net i ben estructurat és més fàcil de mantenir i actualitzar.
• Col·laboració: Facilita la col·laboració entre desenvolupadors, ja que tothom segueix les mateixes regles i estàndards.
• Prevenció d'errors: El linting pot detectar errors potencials abans que es converteixin en problemes greus.
• Rendiment: Un codi optimitzat pot millorar el rendiment de l'aplicació.

ESLint és una de les eines de linting més populars per a JavaScript i TypeScript. Proporciona una gran quantitat de regles configurables que poden ajudar a mantenir la qualitat del codi.

1. Instal·lació d'ESLint:

   ng add @angular-eslint/schematics
   

2. Configuració d'ESLint: Després d'instal·lar ESLint, es generarà un fitxer de configuració .eslintrc.json a l'arrel del projecte. Aquest fitxer conté les regles de linting que s'aplicaran al codi.

   Exemple de .eslintrc.json:

   {
     "root": true,
     "overrides": [
       {
         "files": ["*.ts"],
         "parserOptions": {
           "project": ["tsconfig.json"],
           "createDefaultProgram": true
         },
         "extends": [
           "plugin:@angular-eslint/recommended",
           "plugin:@typescript-eslint/recommended"
         ],
         "rules": {
           "@typescript-eslint/no-unused-vars": "error",
           "@typescript-eslint/explicit-function-return-type": "off"
         }
       },
       {
         "files": ["*.html"],
         "extends": ["plugin:@angular-eslint/template/recommended"],
         "rules": {}
       }
     ]
   }
   

3. Executar ESLint: Per executar ESLint i analitzar el codi, utilitza la següent comanda:

   ng lint
   

A continuació, es mostren algunes de les regles de linting més comunes que es poden configurar en ESLint:

• @typescript-eslint/no-unused-vars: Detecta variables no utilitzades.
• @typescript-eslint/explicit-function-return-type: Requereix que les funcions tinguin un tipus de retorn explícit.
• @angular-eslint/no-empty-lifecycle-method: Evita mètodes de cicle de vida buits en components Angular.
• @angular-eslint/component-class-suffix: Assegura que les classes de components tinguin el sufix Component.

Les regles de linting es poden personalitzar segons les necessitats del projecte. Per exemple, si vols desactivar una regla específica, pots fer-ho al fitxer .eslintrc.json:

1. Crea un nou projecte Angular:

   ng new my-angular-app
   

2. Afegeix ESLint al projecte:

   ng add @angular-eslint/schematics
   

3. Personalitza el fitxer .eslintrc.json per afegir la regla @typescript-eslint/no-unused-vars amb el valor error.

4. Crea un fitxer src/app/test.ts amb el següent contingut:

   const unusedVariable = 'This variable is not used';
   

5. Executa ESLint per veure els errors de linting:

   ng lint
   

Després de seguir els passos anteriors, hauries de veure un error de linting indicant que unusedVariable no s'utilitza.

En aquest tema, hem après sobre la importància de mantenir un codi de qualitat i com utilitzar ESLint per ajudar-nos a aconseguir-ho. Hem vist com configurar ESLint en un projecte Angular, algunes de les regles de linting més comunes i com personalitzar-les segons les necessitats del projecte. També hem realitzat un exercici pràctic per reforçar els conceptes apresos.