Purpose of the article: To provide the knowledge needed to use SonarQube

Intended Audience: Developers and DevOps Engineers

Tools and Technology: SonarQube and Angular

Keywords: Code Coverage, SonarQube, SonarLint, Angular

Get to Know SonarQube

It always starts with ‘Why’ and ‘When’ so that ‘How’ becomes easy. The same applies to software development.

Developers work hard and run against time to deliver the required functionalities. While doing so, it is very important that they don’t compromise code quality and create any new bugs.

Most of the projects are now taken over by Agile Methodology, making it is easy to assign, develop, review, and achieve functional goals over a period. This is an iterative process and ends once we achieve all the required functionalities, and this provides a valuable product at the end of each sprint.

So, while chasing  time, we need more focus on the development of functional requirements and can leave certain things to automation tools, one of them being code analysis.

That is when we come across SonarQube  It is a tool to analyze our code. A common misconception among many developers is that these kinds of tools are always used on the backend like Java etc. Contradictory to that, these can be implemented irrespective of the technology we use.

Why SonarQube?

“SonarQube empowers all developers to write cleaner and safer code.”

There are many benefits of using Sonar. To list a few, It helps to maintain code quality, detects issues, errors, and increases productivity.

In the real world, just writing the right logic and implementation is not always enough. Even though we try to follow a lot of best practices,  we’re very likely to miss certain things, and those are the factors that determine the quality of our code.

For those who are new to SonarQube, it is a tool that empowers all developers to write cleaner and safer code. it also helps automate code review to detect bugs, duplications, vulnerabilities, and code smells in your code.  It even has the power to integrate your existing workflow to enable continuous code inspections across your project branches and pull requests.

A good feature I personally like is Quality gates, where you enforce a quality policy across the project to answer one simple question: is my project release ready?

To answer this, we define a set of conditions against which we measure our projects like:

• No new blocker issues
• Code coverage on new code is more than 80%

It is clear that the code will be considered for build/release only if the code coverage is more than 80%. It  ensures that the developer follows defined rules, and it makes the reviewer’s job easy, as he doesn’t need to pay more attention to code coverage than needed.

Just to have a detailed demo on how we set SonarQube, let’s follow the below process for setting Sonar with Angular.

Setting up Sonar with Angular 

Angular is one of the coolest UI frameworks out there, which has been used by a lot of developers and technology giants.

For the scope of this blog, we will try to set up SonarQube for Angular in our local. let’s go to the link and download the community edition. Make sure you have the latest Java version installed in your system. At the time of this article, we were using the latest version of SonarQube, which is 9.1, and the Java version  11.

If you want to check your Java version, go to cmd, and enter the below command.

Once you have downloaded SonarQube, go to folder sonarqube-9.0.1.46107\bin\windows-x86-64 and open the startSonar.bat file and let it run.

Sometimes you might face some issues like Java.lang or class exceptions, some of which are due to the non-compatible version of Java in your local.

Once you have your SonarQube up and running, go to http://localhost:9000 in your browser, which is the default port, and if everything goes well, you should be able to see a dashboard.

Now it’s time to move to your Angular project and set up SonarQube there as well. Follow the below steps:

Step 1: Create a new Angular project.

Step 2: Install Sonar scanner as dev dependencies in your package.json and run npm install.

Another way is to run the below commands:

Next, you need to create a new file called sonar-project.properties in the root directory of your project and add the below attributes in that file.

Let me explain some of the attributes mentioned above.

host.URL: is the default port where you can see the Sonar dashboard login and password: – by default are admin and admin; in case you change, you must keep the modified credentials here.

Project key and project name can be anything, but if you want to link the data to an existing project in Sonar, you need the mention  project name and keys in Angular. But as we are creating a completely new project, we can  experiment.

Sources: defines which folders in your directory are to be considered

Exclusion: specifies which folders to be neglected/exempted

Inclusion: tells which file types are to be considered

In package.json add the below line in scripts; this will help us to run Sonar in our project

Now simply try,

Check the dashboard for projects, and you will be able to see a similar screen as the attachment below:

Click on the project and check all the reports that sonar has generated for you and give yourself some time to play around with all the features that sonar is offering.

It helps you understand the analytics and gives you a detailed report for the recently added code and overall code.

So, this is how simple SonarQube is. And not to forget that this has been used by many companies and projects.

Let usknow about SonarLint, which is an extension available for some popular editors like VSCode. It helps you detect and fix quality issues as you write your code, and it is available for most of the popular technologies like HTML, Java, JavaScript, PHP, Python, Typescript etc.

For Documentation and other info, please visit https://www.sonarlint.org

In VSCode, Go to Extension, search for SonarLint, and install.

Once you have SonarLint installed, you will be able to get suggestions while you start writing your code. This is possible because SonarLint has a set of rules for different technologies. This will help you to follow best practices and write clean code every time.

Just to understand how it works, let us take an example below. Here in Line 22, we have a comparison, but that’s shown to have an error.

If you can hover your pointer on ‘==’, you will see a suggestion as below,

Another way would be to click on that line, which gives you a bulb; click that to see suggestions.

These are not just limited to the above example; as the scope of this tool is huge, try to refer to the documentation to find all other cool features this extension offers.

If you observe carefully, these suggestions also tell you, about the basis on which the warning is being shown, and a way to deactivate it if you want.

So, that brings us to the end of this discussion. I hope this content was useful to you to be a better developer.