Sonar Plugins for AngularJS and Javascript You May Not Know
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 FreeIn 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 tslint
and 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.
Published at DZone with permission of Sylvain Leroy. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments