Sonar Plugins for AngularJS and Javascript You May Not Know

In this article, I will present two new Sonar plugins that I created.

Keep reading if you are developing in TypeScript, AngularJS 2, and/or Javascript.

AngularJS 2, Typescript Training

Recently, I received an Angular 2 + TypeScript training course in Serial SA. The training was given by NinjaSquad. The course and these guys are really great and I can recommend with confidence that everyone should take that training.

However, that is no the subject of this post.

I have been developing in Angular 2 and TypeScript and Javascript (Node.js) since and I felt the need to have a continuous quality control on that project. I am a big user of SonarQube and I tried to find my happiness in the huge list of rules, but I found none.

At least up to SonarQube version 6.0 (a quite recent one), Angular 2 and TypeScript are not supported.

Plugin for Typescript/AngularJS 2

Download the plugin.

I found on GitHub a plugin made by Pablissimo, a great guy with a lot of courage.

He built a SonarQube plugin for TypeScript and it worked well!

The plugin can be downloaded on GitHub here. Copy it into your SonarPlugin plugins folder and everything should be fine.

Notice: This SonarPlugin is relying on the tool tslintand its configuration. If you want to enable the TypeScript analysis with SonarQube, don’t forget to do this in your project:

npm install -g tslint
tslint --init

Plugin for JavaScript

Download the plugin.

The JavaScript analyzer of SonarQube is great and the guys have put some serious effort in to make it fast and reliable. SonarQube also provides some really interesting rules. The unique downside is that JavaScript frameworks and toolings are moving faster than the SonarQubeJS plugin. And currently, the solution is lacking rules for Angular and React.

I decided to make a fork of the previous plugin made by Pablissimo and to build a version for ESLint.

Indeed, ESLint is the most popular static analysis tool for JavaScript (Linter) right now among JS Developers. Even JSCS has merged with it recently. And ESLint is providing several very useful plugins (the full list can be found here):

• Angular - Linting rules to adhere to John Papa’s Angular Styleguide.
• Backbone - Linting rules for Backbone.
• Ember - Linting rules for Ember.
• Jasmine - Linting rules for Jasmine.
• React - Linting rules for React and JSX.
• React Native - React Native specific linting rules.
• RequireJS - Linting rules for RequireJS.

The same way as above, you will need to initialize ESLint if you do not already have it:

npm install --save-dev eslint
npm install --save-dev eslint-plugin-angular
npm install --save-dev eslint-config-angular
estlint --init

My Sonar plugin is also using an external linter (ESLint) to add more functionalities to SonarQube. If you are developing in the previous frameworks, use it and feel free to give me feedback.

And once SonarQube has developed the right set of rules that you need, switch on the standard SonarQube analyzer.

Installation and Configuration

The first step is to download the plugin directly from Github here.

Find the latest release.

Copy it in your Sonar extension folder.

Restart the Server

Restart the server by calling the commands (here on Linux):

➜  sonarqube-6.0 ./bin/linux-x86-64/sonar.sh stop          
Stopping SonarQube...         
Waiting for SonarQube to exit...        
Stopped SonarQube.          
➜  sonarqube-6.0 ./bin/linux-x86-64/sonar.sh start        

Enabling Custom Rules in SonarQube

Don’t forget to modify your SonarQube profile to enable the new ESLint rules:

Preparing Your Project

Handling SonarQube Scanner

Most projects require the SonarQube scanner (Wiki Link to analysis JavaScript). Download it somewhere on your disk and unzip it.

Create a file sonar-project.properties̀ in your project.

Copy and paste this content and modify it:

sonar.projectKey=sleroy:reactjs-demo         
sonar.projectName=ReactJS demo          
sonar.projectVersion=1.0          
sonar.sources=src          
sonar.sourceEncoding=UTF-8          
sonar.javascript.file.suffixes=.js,.jsx        

Don’t forget the line sonar.javascript.file.suffixes=.js,.jsx, it’s the hack to make SonarQube work on JSX files!

OK! SonarQube Scanner is configured!

Preparing ESLint

We want to perform the SonarQube analysis with the additional results of ESLint. ESLint is a popular linter that provides recent rules for many JavaScript frameworks - ReactJS included.

ESLint is thereby often upgraded and contains, through its extension system, rules and frameworks that you won’t find in the regular SonarQube installation.

If you haven’t created yet an ESLint configuration file, here are the commands:

You can try the configuration by launching ESLint in your project. It may warn you that some extensions are missing. Install them with npm or Yarn.

Usually, the ReactJS extension is missing from your project. You can add them the same way you would add developer extensions (--save-dev) or you can add them globally (-g).

With the right configuration and ESLint installation, the scan of a JSX File should work:

OK! ESLint is configured!

Launching SonarQube Scanner

Launch the SonarQube scanner with the following command:

~/tools/sscanner/bin/sonar-scanner        

And the analysis is running …

➜  react-jsx git:(master) ✗ ~/tools/sscanner/bin/sonar-scanner          
INFO: Scanner configuration file: /home/sleroy/tools/sscanner/conf/sonar-scanner.properties          INFO: Project root configuration file: /home/sleroy/git/react-jsx/sonar-project.properties          
INFO: SonarQube Scanner 3.0.3.778          
INFO: Java 1.8.0_121 Oracle Corporation (64-bit)         
INFO: Linux 4.10.0-21-generic amd64          
INFO: User cache: /home/sleroy/.sonar/cache         
INFO: Load global repositories         
INFO: Load global repositories (done) | time=211ms     
INFO: User cache: /home/sleroy/.sonar/cache          
INFO: Load plugins index          
INFO: Load plugins index (done) | time=14ms          
INFO: SonarQube server 6.0         
INFO: Default locale: "fr_FR", source code encoding: "UTF-8" (analysis is platform dependent)        
INFO: Process project properties          
INFO: Load project repositories       
INFO: Load project repositories (done) | time=214ms       
INFO: Load quality profiles          
INFO: Load quality profiles (done) | time=94ms         
INFO: Load active rules         
INFO: Load active rules (done) | time=897ms         
INFO: Publish mode         
INFO: -------------  Scan ReactJS demo          
INFO: Load server rules         
INFO: Load server rules (done) | time=482ms          
INFO: Base dir: /home/sleroy/git/react-jsx         
INFO: Working dir: /home/sleroy/git/react-jsx/.scannerwork          
INFO: Source paths: src          
INFO: Source encoding: UTF-8, default locale: fr_FR         
INFO: Index files         
INFO: 9 files indexed         
INFO: Quality profile for js: Sonar way          
INFO: Sensor Lines Sensor          
INFO: Sensor Lines Sensor (done) | time=41ms          
INFO: Sensor SCM Sensor          
INFO: SCM provider for this project is: git         
INFO: 9 files to be analyzed          
INFO: 0/9 files analyzed          
WARN: Missing blame information for the following files:          
WARN:   * /home/sleroy/git/react-jsx/src/example/hello.jsx          
WARN:   * /home/sleroy/git/react-jsx/src/example/index.jsx          
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/this.jsx         
WARN:   * /home/sleroy/git/react-jsx/src/example/index.js          
WARN:   * /home/sleroy/git/react-jsx/src/example/imager.jsx          
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/component.jsx          
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/advanced.jsx          
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/react.jsx          
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/hello.jsx          
WARN: This may lead to missing/broken features in SonarQube          
INFO: Sensor SCM Sensor (done) | time=504ms          
INFO: Sensor XmlFileSensor          
INFO: Sensor XmlFileSensor (done) | time=1ms          
INFO: Sensor JavaScript Squid Sensor          
INFO: 9 source files to be analyzed          
INFO: 9/9 source files have been analyzed          
INFO: Unit Test Coverage Sensor is started          
INFO: Integration Test Coverage Sensor is started          
INFO: Overall Coverage Sensor is started          
INFO: Sensor JavaScript Squid Sensor (done) | time=893ms          
INFO: Sensor Linting sensor for Javascript files          
INFO: Sensor Linting sensor for Javascript files (done) | time=1438ms          INFO: Sensor Zero Coverage Sensor          INFO: Sensor Zero Coverage Sensor (done) | time=38ms          INFO: Sensor Code Colorizer Sensor          INFO: Sensor Code Colorizer Sensor (done) | time=2ms          INFO: Sensor CPD Block Indexer          INFO: DefaultCpdBlockIndexer is used for js          INFO: Sensor CPD Block Indexer (done) | time=1ms          INFO: Calculating CPD for 2 files          INFO: CPD calculation finished          INFO: Analysis report generated in 170ms, dir size=24 KB          INFO: Analysis reports compressed in 254ms, zip size=18 KB          INFO: Analysis report uploaded in 39ms          INFO: ANALYSIS SUCCESSFUL, you can browse http://localhost:9000/dashboard/index/sleroy:reactjs-demo          INFO: Note that you will be able to access the updated dashboard once the server has processed the submitted analysis report          INFO: More about the report processing at http://localhost:9000/api/ce/task?id=AVwHr7JyDHBkCqlFC7Sx          INFO: Task total time: 8.046 s          INFO: ------------------------------------------------------------------------          INFO: EXECUTION SUCCESS          INFO: ------------------------------------------------------------------------          INFO: Total time: 10.141s          INFO: Final Memory: 48M/301M          INFO: ------------------------------------------------------------------------        

Controlling the Results

Go to your Sonar interface, and jump directly to the dashboard.

Our project has been analyzed.

We observe that the number of violations is increasing with the new rules.

Hoorah, our JSX files are analyzed!

In this article, we have installed and configured a new plugin to perform better JavaScript analysis into SonarQube, working with ReactJS and JSX files.