En aquest tema, aprendrem sobre les eines i tècniques per mantenir el codi TypeScript net, consistent i lliure d'errors comuns. Ens centrarem en dues àrees principals: el linting i la formatació.

El linting és el procés d'analitzar el codi font per trobar errors de programació, bugs, estils de codi inconsistents i construccions sospitoses. Les eines de linting ajuden a mantenir un codi net i coherent, seguint les millors pràctiques.

ESLint és una de les eines de linting més populars per a JavaScript i TypeScript. Proporciona una gran flexibilitat i pot ser configurat per adaptar-se a les necessitats específiques del teu projecte.

1. Instal·lació d'ESLint i els plugins necessaris:

   npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
   

2. Creació del fitxer de configuració .eslintrc.json:

   {
     "parser": "@typescript-eslint/parser",
     "extends": [
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended"
     ],
     "parserOptions": {
       "ecmaVersion": 2020,
       "sourceType": "module"
     },
     "rules": {
       // Aquí pots afegir o modificar les regles segons les teves necessitats
     }
   }
   

3. Execució d'ESLint:

   npx eslint . --ext .ts
   

• No unused variables: Detecta variables que no s'utilitzen.
• Consistent return: Assegura que totes les funcions retornin un valor consistent.
• No implicit any: Evita l'ús del tipus any implícit.

La formatació del codi és crucial per mantenir la llegibilitat i la consistència en un projecte. Les eines de formatació automàtica poden ajudar a aplicar un estil de codi consistent.

Prettier és una eina de formatació de codi que suporta múltiples llenguatges, incloent TypeScript. S'encarrega de formatar el codi segons unes regles predefinides, eliminant la necessitat de debats sobre l'estil de codi.

1. Instal·lació de Prettier:

   npm install prettier --save-dev
   

2. Creació del fitxer de configuració .prettierrc:

   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "all",
     "printWidth": 80
   }
   

3. Execució de Prettier:

   npx prettier --write .
   

Per evitar conflictes entre ESLint i Prettier, podem utilitzar un conjunt de plugins que permeten que ambdues eines treballin conjuntament.

1. Instal·lació dels plugins necessaris:

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

2. Actualització del fitxer .eslintrc.json:

   {
     "parser": "@typescript-eslint/parser",
     "extends": [
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended",
       "plugin:prettier/recommended"
     ],
     "parserOptions": {
       "ecmaVersion": 2020,
       "sourceType": "module"
     },
     "rules": {
       "prettier/prettier": "error"
     }
   }
   

1. Crea un nou projecte TypeScript.
2. Configura ESLint seguint els passos anteriors.
3. Afegeix algunes regles personalitzades i comprova que funcionen correctament.

1. Configura Prettier en el mateix projecte.
2. Escriu codi desordenat i utilitza Prettier per formatar-lo.
3. Integra ESLint i Prettier per assegurar que no hi ha conflictes.

1. Configura un script en el fitxer package.json per executar ESLint i Prettier automàticament abans de cada commit.
2. Utilitza husky i lint-staged per automatitzar aquest procés.

En aquesta secció, hem après sobre la importància del linting i la formatació en el desenvolupament de codi TypeScript. Hem configurat ESLint per detectar errors i inconsistències, i Prettier per mantenir un estil de codi consistent. També hem vist com integrar ambdues eines per treballar conjuntament sense conflictes. Aquestes pràctiques ajudaran a mantenir el teu codi net, llegible i lliure d'errors comuns.