Learn JSCS Coding Style for JavaScript and Use it as a Gulp task

JSCS
  • JSCS is a Linter for JavaScript code style.
  • JSCS contains 150 validation rules for javascript style linting.
  • These 150 rules follows popular style guides from Jquery,Airbnb and Google etc.
  • JSCS also provides presets like Jquery,Airbnb and Google.
  • Gulp provides gulp-jscs module for creating task to run JSCS to lint the javascript code.
  • In this demo,”We will learn to install gulp-jscs module and create a Gulp task to lint the javascript code”.
  • The gulp-jscs module can be installed using npm install gulp-jscs — save-dev command.The following screenshot shows the installation of gulp-jscs module.
Install gulp-JSCS
  • To demonstrate the gulp-jscs module we have created GulpJSCSDemo project.The following screenshot shows the structure of GulpJSCSDemo directory:-
Gulp JSCS Example
  • The script/numberOperation.js file contains javascript code with 2 methods addTwoNumber() and findGreatestNumber() to do addition and finding greatest number from the supplied 2 numbers. The code content of script/numberOperation.js file are as follows:-
//Method Addition of 2 numbers
var addTwoNumber = function(number1,number2){
return number1 + number2;
};
//Method Find greatest number
var findGreatestNumber = function(number1,number2){
return ((number1 > number2)? number1 : number2);
};
var result= addTwoNumber(5,7);
var greatestNumber= findGreatestNumber(5,7);
console.log("Result: ",result);
console.log("Greatest Number: ",greatestNumber);
  • The .jscsrc file contains few rules for javascript code style.The following code shows the content of .jscsrc file:-
{
"requireSpaceBeforeKeywords": [
"else", "while", "catch"
],
"disallowTrailingComma": true,
"requireSpaceAfterBinaryOperators": [
"?", ":", "+", "-"
],
"requireSpaceBeforeBinaryOperators": [
"?", ":", "+", "-"
],
"requireSpaceAfterKeywords": [
"if", "else", "for"
],
"requireSpaceBeforeBlockStatements": true

}
  • The gulpfile.js contains code to define 2 gulp task jscs-test and default.The jscs-test task loads the script/numberOperation.js and checks against the JSCS rules and reports using a reporter.
var gulp = require('gulp'),
jscs = require('gulp-jscs');
//Task for JavaScript style Linter
gulp.task('jscs-test', function(){
return gulp.src('./script/*.js')
.pipe(jscs())
.pipe(jscs.reporter());
});
//Default task alias for jscs-test
gulp.task('default', ['jscs-test']);
  • The gulp task can be run using either gulp or gulp jscs-test command.The following screenshot shows the terminal with gulp task in execution.
Run JSCS using Gulp task
  • From the previous screenshot we can find JSCS has reported 2 error with line number and location of the error.Both of these error are about missing spaces after function keyword.
  • Let’s add a space after the function keyword.The modified code of the script/numberOperation.js are as follows:-
//Method Addition of 2 numbers
var addTwoNumber = function(number1,number2) {
return number1 + number2;
};
//Method Find greatest number
var findGreatestNumber = function(number1,number2) {
return ((number1 > number2)? number1 : number2);
};
var result= addTwoNumber(5,7);
var greatestNumber= findGreatestNumber(5,7);
console.log("Result: ",result);
console.log("Greatest Number: ",greatestNumber);
  • Lets run the JSCS gulp task again.The following screenshot shows the terminal with Gulp task in execution:-
Gulp default task for JSCS
  • In the preceding screenshot we can see there is no more error and gulp task has ran successfully.
  • We can run this demo using NodeJS.The following screenshot shows the terminal with NodeJS in execution with the output of the demo:-
output of demo
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.