TOOLING JAVASCRIPT TO ENSURE

CONSISTENCY IN CODING STYLE

Dmitry Sheiko

CODING CONVENTIONS

Coding conventions mean guidelines for a specific programming language that recommend programming style

indentation

comments

white-spaces

naming conventions

etc.

CODING STANDARDS

When coding conventions are adopted they make a coding standard

JAVASCRIPT CODING STANDARDS

jQuery JavaScript

Style Guide

Idiomatic.js

Dojo Style Guide

Google JavaScript

Style Guide

DOES IT REALLY MATTER?

“No programmer is an island”

Code conventions improve the readability and maintainability of the software, enabling engineers to understand the code more quickly

I RUN JS*INT, SO I’M FINE…

Linter is to detect the code that may cause potential problems. To check the coding style one needs a code sniffer.

JS_CODESNIFFER

JSCodeSniffer is a tool that checks JavaScript code style consistency according to a provided coding style

It feels like PHP_CodeSniffer, but for JavaScript.

LET’S ROCK IT

Installation:$sudo npm install jscodesniffer -g

Get detailed report on a target (file or directory) coding style according to jQuery JavaScript Style Guide:$jscs ./js/source/main.js --standard=Jquery --report-full

Get summary report on a target:$jscs ./js/source --standard=Jquery --report-summary

Get a report suitable for Jenkins CI-server:$jscs ./js/source --standard=Jquery —report=checkstyle —report-file=./build/checkstyle.xml

Enforce a coding standard in the code: // Your source code /* jscs standard:Jquery */

SETTING UP CUSTOM RULE-SET

1. Take a rule-set file in ./standard directory 2. Copy it under the name of your custom

standard (MyConventions) 3. Modify the JSON to fulfil your requirements

Check your code: $jscs ./js/source --standard=MyConventions

I FOLLOW JQUERY CODING STYLE, BUT NOT STRICTLY…

JUST SET RELAXING OPTIONS IN RUN-TIME CONFIGURATION

Place in the root of the project file .jscsrc: { "Indentation": false, "QuoteConventions": false }

WHAT ABOUT CONTINUOUS INTEGRATION?

Apache Ant setup: <target name="jscs-ci" description="Find coding standard violations using JS_CodeSniffer and print human readable output."> <exec executable="jscs"> <arg value="--standard=Jquery" /> <arg value="--report=checkstyle" /> <arg value="--report-file=${basedir}/build/logs/checkstyle.xml" /> <arg path="${basedir}/src" /> </exec> </target>

Grunt setup:

grunt.loadNpmTasks('grunt-contrib-jscs'); grunt.initConfig({ // Validate against jQuery coding standard jscs: { options: { "standard": "Jquery" }, all: ["js-folder"] } });

JS CodeSniffer https://github.com/dsheiko/jscodesniffer JS CodeSniffer Grunt task https://github.com/dsheiko/grunt-contrib-jscs !

My credits to flaticon.com for these amazing icons

Thank you!

DMITRY SHEIKO dsheiko.com

@sheiko https://github.com/dsheiko