Get Code Metrics On Your JavaScript Project Using SonarQube

While working on a large project, it can be very useful to keep on eye on key metrics about your codebase to see how your project is growing and review indicators that could mean you’re building up maintenance issues / technical debt.

SonarQube by SonarSource is a static analysis tool that supports 27 languages including JavaScript, TypeScript, HTML & CSS and can detect a range of issues in your codebase including bugs, code smells and security issues as well as provide traditional code metrics like lines of code and cyclometric complexity.

SonarQube additionally supports React JSX and Vue.js Single File Components (that use JavaScript, TypeScript in Vue.js SFCs will hopefully be supported soon.

SonarQube has several tiers available including a Community Edition which is free. This article covers running the Community Edition up in a Docker container and analysing a project to see the range of information SonarQube can provide.

Running the server

SonarQube consists of a server element that collates the statistics on your codebase and serves up reports as webpages as well as a scanner element that analyzes your projects code.

We’re going to run the server element of SonarQube in a Docker container so first ensure you have Docker Desktop installed and running.

Then download the latest version of the SonarQube Docker image.

docker pull sonarqube:latest

And start an instance on port 9000.

docker run -d --name sonarqube-instance -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000 sonarqube

Once the instance has started, navigate to http://localhost:9000 where you’ll be asked to login and change the admin password. The default credentials are:

• Username: admin
• Password: admin

Then create a new project stackedit as we’ll be using the StackEdit source code as an example project to analyse.

Next, create a token with the name stackedit-token which acts as a secret for this project and will allow the scanner to import data for the project. Once generated, copy this token as we’ll be using it later.

Now that the server is running and a project created, it’s time to setup the scanner.

Running the scanner (on Windows)

First download the “vanilla” SonarScanner Windows 64-bit version ZIP file. In this article, we’re not interested in static analysis for any server-side code however there are other scanners available including those that target .NET, Jenkins and Azure DevOps.

Next, extract this ZIP file and place the extracted sonar-scanner-windows folder somewhere convenient on your file system. I moved the sonar-scanner-windows folder to C:\Program Files\sonar-scanner-windows.

In the sonar-scanner-windows\bin folder is the file sonar-scanner.bat which executes the scanner. We’ll add the bin folder to the PATH environment variable for this instance of the command prompt so we can run sonar-scanner from any folder.

set PATH=%PATH%;C:\Program Files\sonar-scanner-windows\bin

From another appropriate folder, download the full source code of StackEdit as the example project we’ll use to analyse.

cd \Temp
git clone https://github.com/benweet/stackedit.git
cd stackedit

Now we’re ready to run the scanner against the StackEdit source code. Run the following command ensuring you swap the token with the one you created via the SonarQube website earlier.

sonar-scanner.bat -D"sonar.projectKey=stackedit" -D"sonar.sources=." -D"sonar.host.url=http://localhost:9000" -D"sonar.login=your_token_here"

Leave the scanner to run and once complete, head back to http://localhost:9000 to see the results.

Excluding files

The command line parameters sonar.exclusions=xxx and sonar.inclusions=yyy can be used to tell the scanner what files to target.

If all the source files in your project are in the folder \src then the following additional command line parameter will limit the scanner to just this folder.

-D"sonar.inclusions=src/**/*.*"

If you have multiple dist folders at different levels within your project, all with minified assets to ignore, the following additional command line parameter will exclude these files from the scanner.

-D"sonar.exclusions=/**/dist/**/*.*"

By default, the scanner excludes node_modules folders with the default value for another parameter sonar.javascript.exclusions.

These parameters can also be provided to the scanner via a sonar-project.properties file in the root folder of the project you’re scanning as an alternative to using command line parameters.