2024-03-19

SonarQube and ReactJS

https://sylvainleroy.com/wp-admin/options-general.php?page=ad-inserter.php#tab-2

This article is showing you how to use with ReactJS and its JSX files. I will use both the SonarQube JavaScript plugin and the additional plugin Sonar EsLint plugin.

For the people who have missed my previous article, I have created a new SonarQube plugin to extends the Javascript analysis.

Contents

Installation and Configuration

The first step is to download the plugin directly from Github

Find the latest release.

Find the latest release

Copy it in your Sonar extension folder.

Restart the server

Restart the server by calling the commands (here on Linux)

sonarqube-6.0 ./bin/linux--64/sonar.sh stop
  Stopping SonarQube...
  Waiting for SonarQube to exit...
  Stopped SonarQube.
  ➜  sonarqube-6.0 ./bin/linux--64/sonar.sh start

 Enabling custom rules in SonarQube

Don’t forget to modify your SonarQube profile to enable the new ESLint rules :

Add the ESLint rules to your SonarQube profile

Add the ESLint rules to your SonarQube profile

Enable the ESLint rules to your SonarQube profile

Enable the ESLint rules to your SonarQube profile

Preparing your project

 Handling SonarQube Scanner

Most projects require the SonarQube scanner (Wiki Link to analyze Javascript. Download it somewhere on your disk and unzip it.

Creates a file sonar-project.properties̀ into your project.

Copy-paste this content and modify it :

sonar.projectKey=sleroy:reactjs-demo
sonar.projectName=ReactJS demo
sonar.projectVersion=1.0
sonar.sources=src
sonar.sourceEncoding=UTF-8
sonar.javascript.file.suffixes=.js,.jsx

Don’t forget the line, it’s the hack to make SonarQube working on JSX files!

OK! SonarQube Scanner is configured!

Preparing ESLint

We want to perform the SonarQube analysis with the additional results of ESLint. Eslint is a popular linter that provides recent rules for many javascript frameworks – ReactJS included.

ESLint is thereby often upgraded and contains its extension system, rules, and frameworks that you won’t find in the regular SonarQube installation.

If you haven’t created yet an ESLint configuration file, here are the commands :

ESLint Configuration

ESLint Configuration

You can try the configuration by launching ESLint on your project. It may warn you that some extensions are missing. Install them with NPM or Yarn.

Missing NPM Module

Missing NPM Module

Usually, the ReactJS extension is missing from your project. You can add them like developer extensions (--save-dev) or globally (-g).

Install missing ESLINT ReactJS extension

Install missing ESLINT ReactJS extension

With the right configuration and ESLint installation, the scan of a JSX File should work :

Scanning JSX File

Scanning JSX File

OK! ESLint is configured!

 Launching SonarQube Scanner

Launch the SonarQube scanner with the command :

~/tools/sscanner/bin/sonar-scanner

And the analysis is running …

react-jsx git:(master) ✗ ~/tools/sscanner/bin/sonar-scanner
INFO: Scanner configuration file: /home/sleroy/tools/sscanner/conf/sonar-scanner.properties
INFO: Project root configuration file: /home/sleroy/git/react-jsx/sonar-project.properties
INFO: SonarQube Scanner 3.0.3.778
INFO: Java 1.8.0_121 Oracle Corporation (64-bit)
INFO: Linux 4.10.0-21-generic amd64
INFO: User cache: /home/sleroy/.sonar/cache
INFO: Load global repositories
INFO: Load global repositories (done) | time=211ms
INFO: User cache: /home/sleroy/.sonar/cache
INFO: Load plugins index
INFO: Load plugins index (done) | time=14ms
INFO: SonarQube server 6.0
INFO: Default locale: "fr_FR", source  encoding: "UTF-8" (analysis is platform dependent)
INFO: Process project properties
INFO: Load project repositories
INFO: Load project repositories (done) | time=214ms
INFO: Load  profiles
INFO: Load  profiles (done) | time=94ms
INFO: Load active rules
INFO: Load active rules (done) | time=897ms
INFO: Publish mode
INFO: -------------  Scan ReactJS demo
INFO: Load server rules
INFO: Load server rules (done) | time=482ms
INFO: Base dir: /home/sleroy/git/react-jsx
INFO: Working dir: /home/sleroy/git/react-jsx/.scannerwork
INFO: Source paths: src
INFO: Source encoding: UTF-8, default locale: fr_FR
INFO: Index files
INFO: 9 files indexed
INFO:  profile for js: Sonar way
INFO: Sensor Lines Sensor
INFO: Sensor Lines Sensor (done) | time=41ms
INFO: Sensor SCM Sensor
INFO: SCM provider for this project is: git
INFO: 9 files to be analyzed
INFO: 0/9 files analyzed
WARN: Missing blame information for the following files:
WARN:   * /home/sleroy/git/react-jsx/src/example/hello.jsx
WARN:   * /home/sleroy/git/react-jsx/src/example/index.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/this.jsx
WARN:   * /home/sleroy/git/react-jsx/src/example/index.js
WARN:   * /home/sleroy/git/react-jsx/src/example/imager.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/component.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/advanced.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/react.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/hello.jsx
WARN: This may lead to missing/broken features in SonarQube
INFO: Sensor SCM Sensor (done) | time=504ms
INFO: Sensor XmlFileSensor
INFO: Sensor XmlFileSensor (done) | time=1ms
INFO: Sensor JavaScript Squid Sensor
INFO: 9 source files to be analyzed
INFO: 9/9 source files have been analyzed
INFO:  Test Coverage Sensor is started
INFO: Integration Test Coverage Sensor is started
INFO: Overall Coverage Sensor is started
INFO: Sensor JavaScript Squid Sensor (done) | time=893ms
INFO: Sensor Linting sensor for Javascript files
INFO: Sensor Linting sensor for Javascript files (done) | time=1438ms
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=38ms
INFO: Sensor  Colorizer Sensor
INFO: Sensor  Colorizer Sensor (done) | time=2ms
INFO: Sensor CPD Block Indexer
INFO: DefaultCpdBlockIndexer is used for js
INFO: Sensor CPD Block Indexer (done) | time=1ms
INFO: Calculating CPD for 2 files
INFO: CPD calculation finished
INFO: Analysis report generated in 170ms, dir size=24 KB
INFO: Analysis reports compressed in 254ms, zip size=18 KB
INFO: Analysis report uploaded in 39ms
INFO: ANALYSIS SUCCESSFUL, you can browse http://localhost:9000/dashboard/index/sleroy:reactjs-demo
INFO: Note that you will be able to access the updated dashboard once the server has processed the submitted analysis report
INFO: More about the report processing at http://localhost:9000/api/ce/task?id=AVwHr7JyDHBkCqlFC7Sx
INFO: Task total time: 8.046 s
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 10.141s
INFO: Final Memory: 48M/301M
INFO: ------------------------------------------------------------------------

Controlling the results

Go to your Sonar interface, and jump directly to the dashboard.

Our project has been analyzed.

SonarQube analysis

SonarQube analysis

We observe that the violation’s number is increasing with the new rules.

SonarQube analysis details

SonarQube analysis details

Hourra, our JSX files are analyzed!

JSX Analysis

JSX Analysis

In this article, we have installed, configured a new plugin to perform better Javascript analysis into SonarQube, working with ReactJS and JSX files.

Sylvain Leroy

Senior Software Quality Manager and Solution Architect in Switzerland, I have previously created my own company, Tocea, in Software Quality Assurance. Now I am offering my knowledge and services in a small IT Consulting company : Byoskill and a website www.byoskill.com Currently living in Lausanne (CH)

View all posts by Sylvain Leroy →