Gulp JSCS JavaScript Style Linter Task

• 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.

• To demonstrate the gulp-jscs module we have created GulpJSCSDemo project.The following screenshot shows the structure of GulpJSCSDemo directory:-

• 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.

• 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:-

• 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:-

• This demo can be downloaded from the following link:-

            https://github.com/saan1984/GulpJSCSDemo