What does a dev do when they can't find the plugin they needs? Make one! One dev gives a quick tutorial on a plugin he created to help with linting Angular applications.
Join the DZone community and get the full member experience.Join For Free
Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.
In this article, I will present two new Sonar plugins that I created.
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.
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
Download the plugin.
I decided to make a fork of the previous plugin made by Pablissimo and to build a version for ESLint.
- 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
Create a file
sonar-project.properties̀ in your project.
Copy and paste this content and modify it:
Don’t forget the line
OK! SonarQube Scanner is configured!
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 (
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:
And the analysis is running …
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!
Published at DZone with permission of Sylvain Leroy . See the original article here.
Opinions expressed by DZone contributors are their own.