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