In this article, I will present you with two new SonarQube plugins that you will never find on the SonarQube marketplace (for some good reasons).

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

AngularJS 2, TypeScript training

Check the training.

Recently, I received an AngularJS 2 + TypeScript training course in Serial SA. The training has been performed by the NinjaSquad. The course and these guys are really great and I can recommend with configence that everyone should take that training.

AngularJS2 course

However, that is no the subject of this post.

I have been developing in AngularJS 2 and TypeScript and Javascript (Node.JS) since and I felt the need to have 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), AngularJS2 and TypeScript are not supported.

Plugin for TypeScript / AngularJS2

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 in 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 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 injected a serious effort into it 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 SonarQube.JS plugin. And currently, the solution is lacking AngularJS, React… rules.

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 plugins very useful ( the full is in their README):

• 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

In the same way as above, you will need to initialize ESLint if you did 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, let’s use it and give me feedback.

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