Sonar plugin for JS/CSS/HTML/SASS/AngularJS

Introduction

Plugin for Sonarqube for the Web world with various technologies and languages (JavaScript, CSS, SASS, HTML, AngularJS...). This plugin consumes reports generated by tools that are heavily used by the Web community:

• Linters:
  • JSHint
  • CSS Lint
  • SCSS Lint
  • HTMLHint
  • Angular Hint
  • ESLint plugin for AngularJS
• Unit testing
  • Jasmine
• Code coverage:
  • Istanbul
• Code duplication
  • Simian
  • CPD
• Code complexity
  • Plato

The reports are either directly produced by the tools or by our gulp tasks.

How to use it ?

Build your Web project

When developping Web applications, you can use gulp to build, run tests, minimify and package your project. Some tasks will already generate reports like Istanbul that generates a LCOV file. You can also add additional tasks to run linters and produce reports. Theses tasks are already available here.

Configure sonar

In order to let Sonar analyze your project, you have to provide some configuration. You can define a file named sonar.properties at the root of your project with the following information:

# Required metadata
sonar.projectKey=<unique key for your project>
sonar.projectName=<human readable name for your project>
sonar.projectVersion=<project version>

# Comma-separated paths to directories with sources (required)
sonar.sources=<source folder>

# exclude some folders (typically dependencies)
sonar.exclusions=<exclusions>

# Encoding of the source files
sonar.sourceEncoding=UTF-8

Example:

# Required metadata
sonar.projectKey=my-project
sonar.projectName=My Project Name
sonar.projectVersion=0.1

# Comma-separated paths to directories with sources (required)
sonar.sources=src/app

# exclude some files and folders (typically dependencies)
sonar.exclusions=bower_components/**/*, node_modules/**/*

# Encoding of the source files
sonar.sourceEncoding=UTF-8

Install the plugin

Generate from sources

To build from source, you need to ensure that:

• Java JDK is installed (be sure to use JDK and not JRE)
• Maven is installed

Clone this git repository. Go into the cloned folder (sonar-web-frontend-plugin by default) and generate the plugin using Maven:

mvn clean install

This will generate a JAR file located at sonar-web-frontend-plugin/target/sonar-web-frontend-plugin-2.0-SNAPSHOT.jar.

Install the plugin in Sonar

Copy the JAR file into your Sonarqube server plugins directory (SONARQUBE_HOME/extensions/plugins directory) and restart the Sonarqube server.

Run sonar

Reports are generated by gulp and Sonar is ready to be executed. You just have to follow standard Sonarqube instructions to run Sonar analysis (just execute the sonar-runner).

Code analysis

The plugin provides many metrics specialized for Web and store them into Sonar.

Code quality

The linters (JSHint, HTMLHint, CSSLint, SCSSLint) provide many information about code violations (issues) for every language or framework (JavaScript, CSS, HTML, SASS/Compass, AngularJS). These issues are integrated in Sonar and are usable in the different views of Sonar. We also provide a dashboard widget for issues.

Test results

Jasmine can generate a JUnit report indicating the test results (which tests have failed, which have succeed and which have been ignored). See gulp-jasmine documentation to know how to generate JUnit report. The plugin consumes this JUnit file and add test results information into Sonar. The plugin can also differentiate unit testing from integration testing.

Code coverage

If you use Istanbul in your project, it will automatically generate a LCOV file. This file provides information about code coverage of your source code covered by your tests. This file is consumed by the plugin and add this information into Sonar and is usable in different views of Sonar.

Code duplication

If you use Simian or CPD in your project, it will automatically generate a report (simian.xml or cpd.xml) for code duplication. This file is consumed by the plugin and add this information into Sonar and is usable in different views of Sonar. We also provide a dashboard widget for code duplications.

Code complexity

TODO

Widgets

The plugin provides two new widgets for multi-language projects.

Issues

The widget separate issues counters by language instead of only one counter for all languages that is not revelant. You can have 5000 issues on HTML because you are using a particular framework that doesn't respect HTML norms but only have 1 issue for JavaScript. Without the plugin you will only see 5001 issues and your prject manager can tell you that you are a bad developper. But with this widget you can prove that your JavaScript code is really good !

Code duplication

Same as above, the widget separates the count of duplicated code by language.

Options

Sonar options

Reports path

You can change the path to eveery generated report directly in your sonar.properties file by adding the following properties:

# issues reports with default paths
sonar.sii.quality.js.report.path=/report/jshint.json
sonar.sii.quality.css.report.path=/report/csslint.json
sonar.sii.quality.html.report.path=/report/htmlhint.json
sonar.sii.quality.scss.report.path=/report/scsslint.json
sonar.sii.quality.angular.report.path=/report/angular-hint.json
sonar.sii.quality.angular.eslint.report.path=/report/eslint-angular.json

# unit test results with default paths
sonar.sii.test.unit.js.report.path=/report/jasmine.unit.xml

# integration test results with default paths
sonar.sii.test.it.js.report.path=/report/jasmine.it.unit.xml

# code coverage with default paths
sonar.sii.coverage.js.report.path=/report/js.lcov

# code duplication with default paths
sonar.sii.duplication.js.report.path=/report/js-duplication.xml
sonar.sii.duplication.css.report.path=/report/css-duplication.xml
sonar.sii.duplication.html.report.path=/report/html-duplication.xml
sonar.sii.duplication.scss.report.path=/report/scss-duplication.xml

Other options

TODO

Roadmap

TODO