How to Setup SonarLint in VS Code for Typescript

What is SonarLint?
SonarLint is an IDE extension that helps you detect and fix quality issues as you write code. Like a spell checker, SonarLint squiggles flaws so that they can be fixed before committing code.
It is open source, totally free and supports multiple IDE flavors.

In this article, you’ll learn how to set up SonarLint in Visual Studio Code (VS Code) for Typescript(Angular)

Installing the SonarLint VS Code extension:

1. Go to VS Code Side Bar › Extensions or Press Ctrl + Shift + X in Windows
2. Search SonarLint Extensions in Marketplace
3. Click on the extension SonarLint
4. Click on Install

You may visit this official website https://www.sonarlint.org/vscode/ for install.

Prerequisites : The only prerequisite for running SonarLint is to have Java installed on your machine.

Requirements: SonarLint requires a JDK to be installed. A notification showing Java 8 or more recent is required to run. Please download and install a recent JRE. It displays if you don’t have the required JDK installed. Click on Get the Java Runtime Environment to download and install the required JDK.

You can explicitly set the path where the JRE is installed using the sonarlint.ls.javaHome variable in VS Code settings. For instance:

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

STEPS FOR CONFIGURATION:

Step 1

Open VS Code User and Workspace Settings -
— — — — — — — — — — — — — — — — — — —

ShortCut Key to access the settings.json file

• Press CTRL + SHIFT + P or Command + SHIFT + P
• Type Open Settings and choose Preferences: Open Settings (JSON)

You can also use the steps below if you have some settings already configured:

• Click on the gear icon usually at the bottom-left corner of VS Code by default

• Click on the settings option to access the user settings
• Expand the Extensions category and navigate to the SonarLint section

• Under Sonarlint › Connected Mode › Connections: SonarQube, click on Edit in settings.json.

• This pre-populates the settings file with the key and an empty array as shown below:

"sonarlint.connectedMode.connections.sonarqube": [

  ]

Step 2

Generating a token from SonarQube -
— — — — — — — — — — — — — — — — — — —

• Got to SonarQube server e.g. https://sonarqube.domain.com
• You can generate new tokens at User > My Account > Security.
• The form at the bottom of the page allows you to generate new tokens. Once you click the Generate button, you will see the token value. Copy it immediately; once you dismiss the notification you will not be able to retrieve it.

Step 3

Add SonarQube configuration -
— — — — — — — — — — — — — — — — — — —

Add your server URL and token to settings.json.

Example:

"sonarlint.connectedMode.connections.sonarqube": [
  {
    "serverUrl": "https://sonarqube.domain.com",
    "token": "V2VkIE1..."
  }
]

Step 4

Bind the current workspace folder to a SonarQube or SonarCloud project — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

This binds the current workspace folder to a SonarQube project. Binding a workspace folder to a project allows you to use the same code analyzers, rules and configuration that are defined in the server, as well as issue suppressions.

1. Create a folder named .vscode within the root directory of your application

2. Add a file named settings.json within the .vscode folder.

Note: Changes made in this file are local. So, it will affect only the current folder.

3. Add your configuration to the settings.json.(Ensure you always enclose the code snippet with curly braces)

Example:

"sonarlint.connectedMode.project": {
  "projectKey": "my_project"
  }

Step 5

How Find Project Key -
— — — — — — — — — — — — — — — — — — —

A projectKey is simply the unique identifier of your project inside SonarQube. You are free to choose whatever you want, as long as it is unique.

Shortcut ways: Go to the SonarQube website, click on the Projects tab and find the project you need to configure. The key is usually in the URL e.g. https://sonar.domain.com/dashboard?id=my-project.

• It is also located at the bottom-right corner of the project home page. Copy the key and set it to the projectKey in the example above.(Project Information > Project Key)

Step 6

Go to PROBLEMS window -
— — — — — — — — — — — — — — — — — — —

You can use the problems panel to review issues.
Further you can review rule descriptions.

Note: If you plan to use multiple connections, to different SonarQube servers and/or SonarCloud organizations, simply give a unique connectionId to each entry, and use them as reference in the binding.

Follow details documentation here.

Conclusion:

It identify the new bugs and the quality issues in your code and Improve your code quality.

Hope it helps you in some way.👋👋