Configure SonarQube to allow analysing TypeScript and React code

by
Tiempo de lectura: 2 minutos

If you want to analyse a React project that includes TypeScript files (.ts and .tsx) with SonarQube, you’ll need to configure SonarQube to support TypeScript and adjust your project for effective SonarQube analysis settings.

Below are the general steps:

1. Configure SonarQube to Support TypeScript:

Ensure SonarQube is installed and running. Also, you need the SonarQube Scanner configured in your project.

  1. Install the TypeScript plugin:
  • Go to the SonarQube web interface.
  • Navigate to the “Administration” tab.
  • Search for “Update Center.”
  • Install the plugin named “SonarTS” if not already installed.

2. Configure Your React Project:

Ensure you have a tsconfig.sonarqube.json file at the root of your project. Below is a basic configuration example. Adjust as per your project’s specific needs.

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. Configure SonarQube Analysis:

Ensure you have a SonarQube properties file (sonar-project.properties or similar) at the root of your project with the proper configuration.

sonar-project.properties:

sonar.projectKey=my-project
sonar.projectName=My Project Name
sonar.projectVersion=1.0

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

# Adjust the following property based on your project structure
sonar.ts.file.suffixes=.ts,.tsx
sonar.typescript.tsconfigPath=tsconfig.sonarqube.json

# Adjust the following property with your SonarQube server URL
sonar.host.url=http://your-sonarqube-server:9000

*In this line, we specify the added analysis file: sonar.typescript.tsconfigPath=tsconfig.sonarqube.json

4. Run the Analysis:

  • Ensure SonarQube and your React application are running.
  • Run the SonarQube analysis on your project using the SonarQube Scanner.
sonar-scanner

or if you are using Docker:

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

5. Show results in SonarQube:

Visit your SonarQube web interface and navigate to your project to view the analysis results. You should see TypeScript-related metrics and code quality insights.

6. Additional Notes:

  • If you encounter any issues, refer to SonarQube’s documentation or community forums for support.
  • Make sure to keep your SonarQube server and analysis configurations up to date as your project evolves.

By following these steps, you can effectively analyze a React project with TypeScript files using SonarQube, enhancing your ability to maintain code quality and identify potential issues.

Remember that regular code analysis is crucial for the long-term maintainability and reliability of your projects. SonarQube provides valuable insights that can help you address code quality issues early in the development process.

Post Views: 6

Leave a Comment