Sonar – Javascript and CSS review

Pre-Requisite:

  • MySql is installed and started.
  • Sonar Qube is installed and started (sonar start)
  • Eclipse
  • JavaScript Source files to be analysed.
  • Sonar ant task jar (sonar-ant-task-2.2.jar).

Create a blank eclipse project and copy thesonar-ant-task-2.2.jar. 

Create an ant build file build-Sonar-JS.xml.

<project name=“Sonar JS” default=“sonar” basedir=“.” xmlns:sonar=“antlib:org.sonar.ant”><property name=“sonar.jdbc.url” value=“jdbc:mysql://localhost:3306/sonar?useUnicode=true&amp;characterEncoding=utf8” />

<property name=“sonar.jdbc.username” value=“sonar” />

<property name=“sonar.jdbc.password” value=“sonar” />

<!– Define the SonarQube project properties –>

<property name=“sonar.projectKey” value=“org.codehaus.sonar:example-css-ant” />

<property name=“sonar.projectName” value=“Sonar JS” />

<property name=“sonar.projectVersion” value=“1.0” />

<property name=“sonar.language” value=“js” />

<property name=“sonar.sourceEncoding” value=“UTF-8” />

<property name=“sonar.sources” value=“/full/path/of/the/js/folder” />

<target name=“sonar”>

    <taskdef uri=“antlib:org.sonar.ant” resource=“org/sonar/ant/antlib.xml”>

        <classpath path=“sonar-ant-task-2.2.jar” />

</taskdef>

    <sonar:sonar />

</target>

</project>

Run the build-Sonar-JS.xml as ant task.

Open Sonar Qube dashboard.

http://localhost:9000/

login with default credentials admin/admin

Click on the Dashboard menu and you see the JS violations.

HTML Reports:

In order to view the reports as HTML file

Login to sonar qube (http://localhost:9000) as admin/admin

Click on settings > Update Center > Available Plugins > Install Issues Report plugin.

Once the plugin is installed, restart sonar.

Login to Dashboard > Settings > General Settings > Under Category (Select Issues Report)

Enable HTML Report to True

Run the build-Sonar-JS.xml as ant task.

now you will see a .sonar folder under the eclipse project directory.

The directory will contain issues-report folder.

Open issues-report.html to view the violation offline.

Javascript coding standards

If you are looking for coding standards in Javascript for doing code review or for your self-improvement. Then, you are in the right place.

Following are some of the gem website which provides information on the Standards and best practices for Javascript. Strictly following this will help you learn good javascript and be a good coder.

These are my collections and may not be exhaustive, i will update it as and when i can.

http://javascript.crockford.com/code.html

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

https://code.google.com/p/gmaps-utility-library-dev/wiki/JavascriptCodingConventions

https://github.com/dsheiko/jscodesniffer

http://jibbering.com/faq/notes/code-guidelines/

http://dojotoolkit.org/community/styleGuide

http://jstherightway.org/

https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md

http://jslinterrors.com