With the latest 1.1.0 version Sonar.js is supposedly among the leading static code analyzers available in the JavaScript market. With some of the most advance technologies like dataflow analysis and pattern matching, Sonar.js relies on the front-end JavaScript compiler to detect bugs, code smells as well as security vulnerabilities while analyzing codes. Speed, depth and accuracy are the three facets upon which Sonar is developed and it supports the custom rules which are written in Java. Among the compatible language standards and frameworks, Sonar.js supports Vue.js, Flow, React JSX and ECMAScript 5, 6, 2016 and 2017.
You can produce easily compatible and stable codes as Sonar.js makes it easy to find smells in codes, bugs and vulnerabilities. The basic features of Sonar are as follows –
- Based on data flow analysis and control flow, there are advanced rules of around 190, including approximately 60 for bug detection
- It is compatible with ECMAScript versions from 2015 to 2017
- There are metrics of complexity, line numbers and so on
- It supports Vue.js, Flow and React JSX
- With this, you can import ESLint issues and reports of test coverage
The installation process of Sonar.js is available in three formats namely CJS from dist/sonar.js, UMD from dist/sonar.umd.js and ESM from dist/sonar.m.js. In order to write the custom rules you can add the SonarQube Plugin followed by custom rules API of SonarJS. In this way, SonarJS parses source code and creates the AST or Abstract Syntax Tree so that the visitor can see the nodes from the AST. Right after the coding rule visits the node, it will be able to navigate around the tree through the node and if there is any issue, it logs it accordingly. Know about easiest programming language.
How To Add Plugins On Sonar JS To Detect Issues?
After you create the standard project for SonarQube Plugin, you need to attach it through pom.xml to Sonar JS. During the process, you have to add dependency and the line <basePlugin>javascript</basePlugin> for configuration. The extension points of Plugin, RulesDefinition and CustomRuleRepository are to be implemented accordingly. While RuleDefinition creates the rules repository along with metadata like name and description in SonarQube Plugin extension point, the CustomRuleRepository registers the rule classes along with Sonar JS plugin –in this way they are invoked at the time of JavaScript file analysis. Now, you have to copy the jar file from plugin build of SonarQube to extensions/plugins.
In order to implement the rule, creating a class which will extend SubscriptionVisitorCheck and DoubleVisitorCheck and define the tags, key and rule names with Java annotations are important factors. You can declare the class in CustomRuleRepository and RulesDefinition for successful implementation.
For logging an issue you can use JavaScriptCheck#addIssue(issue) which can create and return instance of the issue –this is suitable for non-standard issues like that of file level where you need to instantiate the FileIssue class. Another method is to implement JavaScriptCheck#addIssue (tree, message) that can create and return instance of the PreciseIssue –this is suitable for SQ UI where you need to highlight the entire code.
SonarQube Plugin – How It Works?
With the launch of the latest version 5.0, SonarJS has come up with the SonarQube 6.7 that supports LTS and enables a powerful analyzer for SonarJS. As for prerequisites, you need Node.js >=6. In order to make first analysis of the JavaScript project, you need to follow these steps –
- After checking setup guidelines thoroughly, install the SonarQube Server
- Now install the SonarQube Scanner. Make sure that you are able to call the sonar-scanner from your source code directory
- Now install the plug-in for Sonar JS.
- Run the analysis along with SonarQube Scanner. Execute the below mentioned command from root directory of your project.
Sonar-scanner –Dsonar.projectKey=xxx –Dosonar.sources=.
- Now, go to the link mentioned at the end of project analysis so that you can browse through project’s quality within user interface of SonarQube.
For further analysis, after completing the third step, you can encapsulate the analysis parameters within the root of project where you will find the sonar-project.properties file. The subsequent analysis will be run accordingly. While configuring the quality profiles, you will have two options namely Sonar Way Recommended and Sonar Way, which is a default.
