Tooling JavaScript to ensure consistency in coding style
3 likes1,553 views
This document discusses tooling JavaScript with JSCodeSniffer to check code style consistency according to various coding standards like jQuery and Google JavaScript Style Guide. It explains that JSCodeSniffer is similar to PHP_CodeSniffer but for JavaScript. The document also provides instructions on installing and using JSCodeSniffer to generate reports on code style and to enforce coding standards. It describes how to set up custom rule-sets and relaxing options for non-strict adherence to standards. Finally, it discusses integrating JSCodeSniffer into continuous integration with Apache Ant and Grunt setup examples.
![Grunt setup:
grunt.loadNpmTasks('grunt-contrib-jscs');
grunt.initConfig({
// Validate against jQuery coding standard
jscs: {
options: {
"standard": "Jquery"
},
all: ["js-folder"]
}
});](https://image.slidesharecdn.com/codingstandardwithjscodesniffer-140827033929-phpapp02/85/Tooling-JavaScript-to-ensure-consistency-in-coding-style-32-320.jpg)
Tooling JavaScript to ensure consistency in coding style
- 1. TOOLING JAVASCRIPT TO ENSURE CONSISTENCY IN CODING STYLE Dmitry Sheiko
- 3. Coding conventions mean guidelines for a specific programming language that recommend programming style indentation comments white-spaces namingconventions etc.
- 5. When coding conventions are adopted they make a coding standard
- 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!