SonarQube and ReactJS : the right way
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
Creates a file
sonar-project.properties̀ into your project.
Copy-paste this content and modify it :
Don’t forget the line
OK! SonarQube Scanner is configured!
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 (
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 :
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 !
Originally published at sylvainleroy.fr on May 14, 2017.