Continuous Code Quality UI (Angular, React, or Vue) using SonarLint

Today in this article we shall see how to use the Sonar Lint IDE extension for VSCode and manage Code Quality of Angular, React, and Vue applications with Sonar Qube.

Most of us understand the importance of code quality.

Good coding practices are language agnostic and help an organization deliver clean, highly reliable, secure, and maintainable code.

Today in this article, we shall cover the below aspects,

Software code quality and its maintenance is like a big fat elephant and often eat away a big chunk of project budget allocation. Re-engineering and refactoring of buggy code cost organization time, cost, and quality.

These small-looking coding issues become bigger problems in the future and potentially affect the complete architecture and design of your application.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand”  -Martin Fowler

“Code is maintained more often than it is written”

SonarLint is an IDE extension that helps to detect and fix code quality issues as you type the code in IDE.

SonarLint extension combines all the best of the linting process and supports multiple analyzers and multiple languages.

• Typescript – Sonar TS analyzer

• JavaScript, React, Vue – SonarJS, ESLint analyzer

SonarLint IDE extension is currently supported by the below IDE overall,

Sonar defines coding issues in the below categories,

• Bug
• Code Smell
• Vulnerability

Each above categories can be further classified based on severity as below,

• Blocker
• Critical
• Major
• Minor
• Info

Let’s look into SonarLint VS Code plugin extension setup and configuration details.

Getting started – Code Quality of Angular, React, and Vue applications with Sonar

Prerequisites and Configuration:

Java Run time (JRE) 8

Once Java run time is installed, please verify using the version using the below command,

Further verification can be done by checking the below folder on your Windows machine,

Install Sonar Lint extension in VSCode

Setting.json update

Click on Settings ->Edit in Settings.Json

User Settings Sonar Qube – connected mode

These settings will be global and will be applied at the VSCode IDE level and will be effective for all projects.

{
"sonarlint.ls.javaHome": "C:\Program Files\Java\jdk1.8.0_201"
}

If connecting your Organization enterprise Sonar Server please add the below setting within “sonarlint.connectedMode.servers”

Note:

SonarLint uses the same rule set as configured on the SonarQube server thereby streamlining the code analysis and avoiding any ambiguity of issues reported on server vs desktop.

If not connected to the Sonar Server default ruleset ( which comes with plugin installation) will be used.

Connected Mode in User Settings

"sonarlint.connectedMode.servers": [
 {
"serverId": "your server id if any",
"serverUrl": "https://your-org/server",//Your Organization server URL
"organizationKey": "my_organization",// Organization Key
"token": "V2VkIE1…" //Organization Auth token
 }
]

Workspace settings Sonar – connected mode

This setting will be specific to an individual project. This setting can be checked in along with your source project to SCM.

{
"sonarlint.ls.javaHome": "C:\Program Files\Java\jre1.8.0_201"
}

Connected Mode in Workspace Settings

If connecting to your organization’s Sonar Server additionally add below within workspace settings.

"sonarlint.connectedMode.project": {
  "serverId": "your server id if any",
  "projectKey": "your project name in sonar server"
}

Once done with the above settings, you shall be all set to use Sonar linting. The output windows will display that SonarTS Server and the engine have started successfully.

If not connected to the server, Sonar Lint will launch the Sonar server( with different analyzers) locally by opening a local port and will use the default rule set in such a case.

If using Sonar Server in “Connected” mode kindly run the below command from the Command pallet,

Update SonarLint binding to SonarQube/SonarCloud 

As you type your code you shall be able to see the best recommendation from Sonar lint based on configured rules.

As we mentioned above Sonar lint uses the same rules set as configured on the SonarQube server and streamlines the code analysis by avoiding any ambiguity of reports on server vs desktop.

For server-side reporting SonarQube need to be used which is a licensed and enterprise version.

Sonar scan can be configured as part build and deploy process for the CI-CD pipeline.

SonarQube provides the overall health of the portfolio within the organization with nice dashboards detailing code health.

Happy coding !!

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

References:

• Continuous Code Quality using NDepend

• Code Quality of .NET Application using Sonar

Summary :

Today we learned about Sonar lint setup and configuration for Visual Studio Code IDE. Good coding practices are language agnostics and help the organization to deliver clean, highly reliable, secure, and maintainable projects. Buggy code slipping through the cracks has the potential to cost a company an entire business. Organizations can address these problems by following best practices of software development like continuous code quality and continuous code review processes.

---

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.

---