En este tema, aprenderemos sobre las herramientas y técnicas para mantener nuestro código TypeScript limpio, consistente y libre de errores comunes. El linting y el formateo son prácticas esenciales en el desarrollo de software que ayudan a mejorar la calidad del código y a mantener un estilo uniforme en todo el proyecto.

El linting es el proceso de analizar el código fuente para identificar errores de programación, errores estilísticos y construcciones sospechosas. Las herramientas de linting ayudan a detectar problemas antes de que se conviertan en errores en tiempo de ejecución.

Las herramientas más populares para el linting de TypeScript son:

1. TSLint: Fue la herramienta de linting más utilizada para TypeScript, pero ha sido descontinuada en favor de ESLint.
2. ESLint: Actualmente, ESLint es la herramienta recomendada para el linting de TypeScript, gracias a su flexibilidad y extensibilidad.

Para configurar ESLint en un proyecto TypeScript, sigue estos pasos:

1. Instalar ESLint y los paquetes necesarios:

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

2. Crear un archivo de configuración .eslintrc.json:

   {
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "ecmaVersion": 2020,
       "sourceType": "module"
     },
     "plugins": ["@typescript-eslint"],
     "extends": [
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended"
     ],
     "rules": {
       // Aquí puedes agregar reglas personalizadas
     }
   }
   

3. Agregar un script de linting en package.json:

   "scripts": {
     "lint": "eslint 'src/**/*.{ts,tsx}'"
   }
   

4. Ejecutar el linter:

   npm run lint
   

El formateo de código se refiere a la práctica de estructurar el código de manera consistente, siguiendo un conjunto de reglas de estilo predefinidas. Esto incluye aspectos como la indentación, el uso de comillas, el espaciado, etc.

La herramienta más popular para el formateo de código en TypeScript es Prettier.

Para configurar Prettier en un proyecto TypeScript, sigue estos pasos:

1. Instalar Prettier:

   npm install prettier --save-dev
   

2. Crear un archivo de configuración .prettierrc:

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

3. Agregar un script de formateo en package.json:

   "scripts": {
     "format": "prettier --write 'src/**/*.{ts,tsx}'"
   }
   

4. Ejecutar el formateador:

   npm run format
   

Para evitar conflictos entre ESLint y Prettier, es recomendable usar el plugin eslint-config-prettier que desactiva las reglas de ESLint que pueden entrar en conflicto con Prettier.

1. Instalar el plugin:

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

2. Actualizar el archivo de configuración de ESLint:

   {
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "ecmaVersion": 2020,
       "sourceType": "module"
     },
     "plugins": ["@typescript-eslint"],
     "extends": [
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended",
       "prettier"
     ],
     "rules": {
       "semi": ["error", "always"],
       "quotes": ["error", "single"],
       "@typescript-eslint/no-unused-vars": ["error"]
     }
   }
   

1. Crea un nuevo proyecto TypeScript.
2. Configura ESLint y Prettier siguiendo los pasos descritos anteriormente.
3. Escribe un archivo TypeScript con errores de estilo y linting.
4. Ejecuta los scripts de linting y formateo para corregir los errores.

1. Crear un nuevo proyecto:

   mkdir my-typescript-project
   cd my-typescript-project
   npm init -y
   npm install typescript --save-dev
   npx tsc --init
   

2. Configurar ESLint y Prettier (ver pasos anteriores).

3. Escribir un archivo TypeScript con errores (src/index.ts):

   const greeting = "Hello, world"
   console.log(greeting)
   

4. Ejecutar los scripts de linting y formateo:

   npm run lint
   npm run format
   

   Después de ejecutar los scripts, el archivo src/index.ts debería verse así:

   const greeting = 'Hello, world';
   console.log(greeting);
   

En esta sección, hemos aprendido sobre la importancia del linting y el formateo en el desarrollo de TypeScript. Hemos configurado ESLint y Prettier para mantener nuestro código limpio y consistente. Estas herramientas no solo ayudan a detectar errores tempranos, sino que también aseguran que todo el equipo de desarrollo siga un estilo de código uniforme.

En el próximo tema, exploraremos cómo realizar pruebas de código en TypeScript para asegurar la calidad y funcionalidad de nuestras aplicaciones.