Tweet
Tweet

Slide 1

Slide 1 text

TOOLING JAVASCRIPT 
 TO ENSURE 
 CONSISTENCY IN CODING STYLE Dmitry Sheiko

Slide 2

Slide 2 text

CODING CONVENTIONS

Slide 3

Slide 3 text

Coding conventions mean guidelines for a specific programming language that recommend programming style indentation comments white-spaces naming conventions etc.

Slide 4

Slide 4 text

CODING STANDARDS

Slide 5

Slide 5 text

When coding conventions are adopted they make a coding standard

Slide 6

Slide 6 text

JAVASCRIPT CODING STANDARDS

Slide 7

Slide 7 text


 jQuery JavaScript 
 Style Guide 
 Idiomatic.js 
 Dojo Style Guide
 
 Google JavaScript 
 Style Guide

Slide 8

Slide 8 text

DOES IT REALLY MATTER?

Slide 9

Slide 9 text

“No programmer is an island”

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

JS_CODESNIFFER

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

It feels like PHP_CodeSniffer, but for JavaScript.

Slide 16

Slide 16 text

LET’S ROCK IT

Slide 17

Slide 17 text

Installation:
 $sudo npm install jscodesniffer -g

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

SETTING UP CUSTOM RULE-SET

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

I FOLLOW JQUERY CODING STYLE, BUT NOT STRICTLY…

Slide 28

Slide 28 text

JUST SET RELAXING OPTIONS IN RUN-TIME CONFIGURATION

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

WHAT ABOUT CONTINUOUS INTEGRATION?

Slide 31

Slide 31 text

Apache Ant setup:
 


Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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!

Slide 34

Slide 34 text

DMITRY SHEIKO dsheiko.com @sheiko https://github.com/dsheiko