SonarQube and ReactJS
<%- toc(str, [options]) %>
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 by calling the commands (here on linux)
Don’t forget to modify your SonarQube profile to enable the new ESLint rules :
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!
Launchs the SonarQube scanner with the command :
And the analysis is running …
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 !