Tooling JavaScript to ensure consistency in coding style

These slides inllustrate what are coding style, conventions and standards, why they matter and how to use JS_CodeSniffer to check tat your code doesn't violates given coding standard

Transcript

1. TOOLING JAVASCRIPT 
 TO ENSURE 
 CONSISTENCY IN CODING STYLE Dmitry Sheiko
2. CODING CONVENTIONS
3. Coding conventions mean guidelines for a specific programming language that recommend programming style indentation comments white-spaces naming conventions etc.
4. CODING STANDARDS
5. When coding conventions are adopted they make a coding standard
6. JAVASCRIPT CODING STANDARDS
7. 
 jQuery JavaScript 
 Style Guide 
 Idiomatic.js 
 Dojo Style Guide
 
 Google JavaScript 
 Style Guide
8. DOES IT REALLY MATTER?
9. “No programmer is an island”
10. Code conventions improve the readability and maintainability of the software, enabling engineers to understand the code more quickly
11. I RUN JS*INT, SO I’M FINE…
12. Linter is to detect the code that may cause potential problems. To check the coding style one needs a code sniffer.
13. JS_CODESNIFFER
14. JSCodeSniffer is a tool that checks JavaScript code style consistency according to a provided coding style
15. It feels like PHP_CodeSniffer, but for JavaScript.
16. LET’S ROCK IT
17. Installation:
 $sudo npm install jscodesniffer -g
18. 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
20. Get summary report on a target:
 $jscs ./js/source --standard=Jquery --report- summary
22. Get a report suitable for Jenkins CI-server:
 $jscs ./js/source --standard=Jquery — report=checkstyle —report-file=./build/ checkstyle.xml
23. Enforce a coding standard in the code:
 // Your source code /* jscs standard:Jquery */
24. SETTING UP CUSTOM RULE-SET
25. 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
26. Check your code:
 $jscs ./js/source --standard=MyConventions
27. I FOLLOW JQUERY CODING STYLE, BUT NOT STRICTLY…
28. JUST SET RELAXING OPTIONS IN RUN-TIME CONFIGURATION
29. Place in the root of the project file .jscsrc:
 { "Indentation": false, "QuoteConventions": false }
30. WHAT ABOUT CONTINUOUS INTEGRATION?
31. 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>
32. Grunt setup:
 grunt.loadNpmTasks('grunt-contrib-jscs'); grunt.initConfig({ // Validate against jQuery coding standard jscs: { options: { "standard": "Jquery" }, all: ["js-folder"] } });
33. 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!
34. DMITRY SHEIKO dsheiko.com @sheiko https://github.com/dsheiko