Configurar SonarQube para permitir analizar código de TypeScript y React

Tiempo de lectura: 2 minutos

Si deseas analizar un proyecto React que incluye archivos TypeScript (.ts y .tsx) con SonarQube, necesitarás configurar SonarQube para que admita TypeScript y también ajustar tu proyecto para que la configuración de análisis de SonarQube sea efectiva.

A continuación, se describen los pasos generales:

1. Configurar SonarQube para admitir TypeScript:

Asegúrate de tener SonarQube instalado y ejecutándose. Además, necesitarás el Escáner SonarQube configurado en tu proyecto.

1. Instalar el complemento de TypeScript:

• Ve a la interfaz web de SonarQube.
• Navega a la pestaña «Administration» (Administración).
• Busca «Update Center» (Centro de actualización).
• Instala el complemento llamado «SonarTS» si aún no está instalado.

2. Configurar tu proyecto React:

Asegúrate de tener un archivo tsconfig.sonarqube.json en la raíz de tu proyecto. A continuación, te doy un ejemplo básico de configuración. Puedes ajustar según las necesidades específicas de tu proyecto.

tsconfig.sonarqube.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "noImplicitAny": true,
    /* Bundler mode */
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noEmitOnError": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3. Configurar el análisis de SonarQube:

Asegúrate de tener un archivo de propiedades de SonarQube (sonar-project.properties o similar) en la raíz de tu proyecto con la configuración adecuada.

sonar-project.properties:

sonar.projectKey=mi-proyecto
sonar.projectName=Nombre de Mi Proyecto
sonar.projectVersion=1.0

sonar.language=ts
sonar.sources=src
sonar.exclusions=**/__tests__/**, **/*.spec.tsx, **/*.test.tsx

# Ajusta la siguiente propiedad según la estructura de tu proyecto
sonar.ts.file.suffixes=.ts,.tsx
sonar.typescript.tsconfigPath=tsconfig.sonarqube.json

# Ajusta la siguiente propiedad con la URL de tu servidor SonarQube
sonar.host.url=http://tu-servidor-sonarqube:9000

*En esta línea indicamos el archivo de análisis añadido: sonar.typescript.tsconfigPath=tsconfig.sonarqube.json

4. Ejecutar el análisis:

• Asegúrate de que SonarQube y tu aplicación React estén en funcionamiento.
• Ejecuta el análisis de SonarQube en tu proyecto utilizando el Escáner SonarQube.

sonar-scanner

o si estás utilizando Docker:

docker run -e SONAR_HOST_URL=http://tu-servidor-sonarqube:9000 -v $(pwd):/usr/src sonarsource/sonar-scanner-cli

Esto debería analizar tu proyecto React con archivos TypeScript y enviar los resultados a tu servidor SonarQube.

Recuerda ajustar las configuraciones según la estructura y requisitos específicos de tu proyecto y entorno.