SonarQube — Static Code Analysis

Code quality is important for overall software quality. And quality impacts how safe, secure, and reliable your code is.High quality is critical for many development teams today. And it’s especially important for those developing safety-critical systems.

There are many tools in the market for the Static code analysis but the most popular tool is SonarQube.

Photo by Caspar Camille Rubin on Unsplash

SonarQube is an open source platform to perform automatic reviews with static analysis of code to detect bugs, code smells and security vulnerabilities on 25+ programming languages including Java, C#, JavaScript, TypeScript, C/C++, COBOL and more.

Let’s set up SonarQube for basic web project

1. Prerequisite

The only prerequisite for running SonarQube is to have Java (Oracle JRE 8 or OpenJDK 8) installed on your machine

2. Download the SonarQube

Downloads | SonarQube

For this demo, i have download the Community Edition 7.7

b) UNZIP the folder sonarqube-7.7

c) If you are using the Windows, set the environment variable path

path to the folder\sonarqube-7.7\bin

3. Download the Sonar scanner

https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner

UNZIP the folder sonar-scanner-3.3.0.1492-windows

c) If you are using the Windows, set the environment variable path

path to the folder/sonar-scanner-3.3.0.1492-windows\bin

Environmental variable snapshot

4. Sonar scanner configuration

a) Go to Below path

path to the folder\sonar-scanner-cli-3.3.0.1492-windows\sonar-scanner-3.3.0.1492-windows\conf

b) Under conf folder open sonar-scanner.properties file and update that file as shown below

In this file we are adding the host url with port 9000, Setting the sourceEncoding to UTF-8 and projectKey to sonar-scanner.

5. Start SonarQube

a) Go to below path

path to the folder\sonarqube-7.7\bin\windows-x86–64

b) Run below command

i) window user —

StartSonar.bat

II) Mac user — sonar.sh --start

sonar.sh --start

If everything run successfully go to http://localhost:9000. You will see the below screen

Till now we are done with the setup. Lets build a small demo project and integrate our sonarQube.

6. Project Structure

a) app — It contain the project files (index.html, styles.less or style.css and app.js)

b) sonar-project.properties — This file contains the properties and rules for the projects

c) index.html — containing basic html

d) style.less

e) app.js

6. sonar-project.properties for the Project

create a file with name sonar-project.properties outside your main folder as shown above in project structure.

You can specify many things but in our project we are testing only basic html, css and javascript

a) I have defined projectKey as my project name sonar-lint-demo

b)projectVersion — based on your version for me its 1.0

c) sourceEncoding — Ihave defined as UTF-8

d)language — i have commented this line but if you want to analyze only js files you can uncomment this.

e)Most important property is sources, In this you define the path that you want to analyse. In my case, i have defined the folder name app that contain my all files html, less and js.

f)exclusions — sometimes you want to excludes some files or folder then you define them here ag node_modules

Once your project and properties file is ready, its time to run our sonar-scanner

7. Running sonar-scanner

Make sure your SonarQube is running. Now, Go to your folder path and run

i) In Windows — sonar-scanner.bat

ii) In Mac — sonar-scanner

sonar-scanner in windows

Once it’s running you will get the url (http://localhost:9000/dashboard?id=sonar-lint-demo) where you can get the sonar report .

running sonar-scanner command

8. Analyze the report

Report

Our quality gate got failed. We have 2 Bugs and 3 code smells

a) Lets analyze Bugs first

I) First Bug is in app.js

• NaN is not equal to anything, even itself. Testing for equality or inequality against NaN will yield predictable results, but probably not the ones you want.
• Instead, the best way to see whether a variable is equal to NaN is to use Number.isNaN(), since ES2015, or (perhaps counter-intuitively) to compare it to itself. Since NaN !== NaN, when a !== a, you know it must equal NaN.

II) Second minor bug is in index.html

• The <strong>/<b> and <em>/<i> tags have exactly the same effect in most web browsers, but there is a fundamental difference between them: <strong> and <em> have a semantic meaning whereas <b> and <i> only convey styling information like CSS.

b) Lets analyze code smells

We have total three code smells

I)First code smell is in app.js

• This rule checks that a declaration doesn’t use a name that is already in use. In our code we have declared firstname twice.

II)Second code smell is in style.less

• variables and function’s should not be re-declared. As we have declared #header id twice in style.less

III)Third code smell is also in style.less

• This issue occur when font or font-family properties contain a duplicated font name.

Once you will fixed all the bugs and code smell your quality gate will be pass.

This practice we all should follow in our project to check the code quality during development time.

References

Rules explorer

Get Started in Two Minutes Guide | SonarQube Docs