Getting started with SonarQube and TypeScript

Update

The source code with this post was updated to reflect the new SonarTS version 1.2 and SonarQube version 6.7. For more information on how to extend the basic scenario with code coverage, see this post: Better together: SonarQube, TypeScript and Code Coverage

SonarSource recently released an official first version of a static code analyzer for TypeScript. So if you want to get up and running with SonarQube and Typescript: now you have an easy way to do this.

The supported scenarios are:

• Run SonarTS as a TSLint extension
• Run SonarTS as a SonarQube plugin

The first being the easiest and probably the best to get started. The second scenario enables analysis of Typescript files during builds.

First the links:

• https://github.com/SonarSource/SonarTS
• https://www.sonarsource.com/products/codeanalyzers/sonarts.html

TSLint

TypeScript developers usually check their code for errors and maintainability using a TypeScript linter called Tslint (https://github.com/palantir/tslint). This linter can be extended with SonarTS, so let’s get this to work. In this case we install TSLint and TypeScript locally in our project and generate a default tslint.json configuration file.

npm install tslint typescript --save-dev
# or globally with: npm install tslint typescript -g
tslint --init

Next step, we install SonarTS

npm install tslint-sonarts –save-dev

And add the Sonar to the tslint.json configuration file:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended",
        "tslint-sonarts"
    ],
    "jsRules": {},
    "rules": {

    },
    "rulesDirectory": []
}

And finally we need to add two additional files to complete our setup. The first being the “sonar-project.properties” :

sonar.projectKey=Demo:sonar-ts-demo
sonar.projectName=Sonar TS Demo
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.sources=src
sonar.exclusions=**/node_modules/**,**/*.spec.ts
sonar.tests=src
sonar.test.inclusions=**/*.spec.ts
sonar.ts.tslintconfigpath=tslint.json
sonar.ts.lcov.reportpath=test-results/coverage/coverage.lcov

And the second file tsconfig.json to configure our Typescript root and compiler instructions:

{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

When we run the TSLint, we now also receive Sonar Analysis feedback:

tslint --type-check --project tsconfig.json -c tslint.json 'src/**/*.ts'

Rules

The initial release contains two profiles and 70+ rules. Rules can easily be disabled/ enabled using the tslint.json or the tslint-sonarts.json:

{
    "rulesDirectory": [],
    "rules": {
      "no-collection-size-mischeck": true,
      "no-all-duplicated-branches": true,
      "no-duplicated-branches": true,
      "no-empty-destructuring": true,
      "no-use-of-empty-return-value": true,
      "no-identical-conditions": true,
      "no-identical-expressions": true,
      "no-useless-increment": true,
      "no-ignored-return": true,
      "no-self-assignment": true,
      "no-variable-usage-before-declaration": true,
      "no-misspelled-operator": false,
      "no-inconsistent-return": false,
      "no-unconditional-jump": true,
      "no-misleading-array-reverse": true,
      "no-empty-nested-blocks": false,
      "no-multiline-string-literals": true,
      "no-array-delete": true,
      "no-dead-store": true
    }
  }

SonarQube

If you are working with SonarQube Server, you probably want to work with SonarTS as a plugin. This enables static analysis and additional rules, metrics and code coverage import.
Since it is available as an official plugin, we can install it using the Update Center:

Next we need to configure our Typescript application to run the sonar-scanner. Sonar Source provides scanners for several project types:

• MSBuild (local, VSTS, TFS)
• Maven
• Gradle
• Ant
• Jenkins
• Command Line

Since we are running Typescript only, the Command Line scanner is the obvious choice. If we add some third party packages, we can integrate the analysis with our grunt, gulp or npm tasks. There are several npm packages that can help us out here and my favourite being the sonarqube-scanner:
https://www.npmjs.com/package/sonarqube-scanner
npm install sonarqube-scanner –save-dev

This package depends on gulp and uses gulp tasks to run the scanner:
A simple gulp task is what we need:

var gulp = require('gulp');
var sonarqubeScanner = require('sonarqube-scanner');

gulp.task('sonar', function(callback) {
  sonarqubeScanner({
    serverUrl : "http://localhost:9000",
    options : {
    }
  }, callback);
});

Running gulp sonar starts the analysis and uploads the results to the SonarQube server. If all goes well you should see a lot of output messages. The important ones to look for:

• INFO: Quality profile for ts: Sonar way
• INFO: Sensor TypeScript Sensor
• INFO: Running rule analysis for ../tsconfig.json with x files
• INFO: Sensor TypeScript Sensor (done)
• INFO: ANALYSIS SUCCESSFUL

And if you browse to the SonarQube dashboard, you should see the project and the results.

You can find the soure code here: https://github.com/yuriburger/sonar-ts-demo

/Y.