SonarQube and ReactJS : the right way

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

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

Installation and Configuration

The first step is to download the plugin directly from Github here.

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-x86–64/sonar.sh stop

Waiting for SonarQube to exit…

➜ sonarqube-6.0 ./bin/linux-x86–64/sonar.sh start

Enabling custom rules in SonarQube

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

Preparing your project

Handling SonarQube Scanner

Most projects requires the SonarQube scanner (Wiki Link to analysis 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.sourceEncoding=UTF-8

sonar.javascript.file.suffixes=.js,.jsx

Don’t forget the line sonar.javascript.file.suffixes=.js,.jsx, 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 through 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 is the commands :

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

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

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

OK! ESLint is configured!

Launching SonarQube Scanner

Launchs 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

Controlling the results

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

Our project has been analyzed.

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

Hourra, our JSX files are analyzed !

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


Originally published at sylvainleroy.fr on May 14, 2017.