Automate Angular Js / Javascript code analysis with EsLint and Gulp Js in Visual Studio


Krishna KV
Team Leader, Aspire Systems
Published On :   05 Mar 2016
Visit Count
Today :  1    Total :   11849
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

Sharegate: Kick-Ass Tool
Think Your SharePoint & Office 365 Are Secure ? Find Out Now!


EsLint helps us to avoid silly mistakes that happens in a JavaScript program. For example, it is always hard to find a missing variable or function in a medium or large JavaScript application. EsLint will helps us to analyze the code and find the bugs and ensures proper coding styles guidelines is followed across the application.

EsLint is a JavaScript linting that builds in the top of Esprima. It can be used to check the JavaScript error & Styles. It is more flexible and highly configurable. The primary goal is that developers can write their own rules, but still we have the default rules which we can be changed or extended.

  • ES6 Support
  • Support for Angular JS
  • Custom Reporter
  • Validate JSX
  • More Plugins
  • Style checker
  • Rules are Pluggable
  • Customized error or warning

Validation

  • Syntax errors
  • Coding standard
  • Missing or unnecessary semicolons
  • Unreachable code
  • Unused parameters
  • Missing closing brackets
  • It is used to enforce a set of style and consistency rule.
  • Check for variable names
  • Coding Standard

Package.Json

 {
   "name": "jsvalidator",
   "version": "1.0.0",
   "description": "Javascript validation test",
   "devDependencies": {
     "gulp": "3.9.1",
     "gulp-eslint": "2.0.0",
     "gulp-jshint": "2.0.0",
     "jshint": "2.9.1",
     "jshint-stylish": "2.1.0",
     "eslint-plugin-angular": "1.0.0"
   } 
 }

gulpfile.js

 var gulp = require('gulp');
 var eslint = require('gulp-eslint');
 var stylish = require('jshint-stylish');
 var angularPlugin = require('eslint-plugin-angular');
 var config =
     {
         apps: ['app/**/*.js'],
         html: ['*.html', 'app/**/*.html']
     };
 
 
 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint())
     .pipe(eslint.format())
 });

Task Runner

We can view the list of task available in the gulp. Run the task validateSyntax-eslint. As we have not added or not configured the rules, it won’t display any errors/warning.

clip_image002

Let’s add the EsLint default rule.

 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint(
         {"extends": ["eslint:recommended"]   
         }))
     .pipe(eslint.format())
 });

clip_image004

Customizing the errors.

 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint(
         {
             "extends": ["eslint:recommended"],
             "plugins": ["angular"], 
             "env": {
                 "browser": true
             },
 
             "globals": {
                 'jQuery': true,
                 '$': true,
                 "angular": true,
                 "app":true
             },
             'rules': {
                 'quotes': [0, 'single'],
                 'semi': [2, 'always'],
                 'no-unused-vars': 1,
                 'no-console': 0,            
             }
         }))
     .pipe(eslint.format())
 });

More rules can be found here : https://github.com/eslint/eslint/blob/master/conf/eslint.json

clip_image005

The unused variables are shown as a warning due the configuration 'no-unused-vars': 1, Changing the value to 2 will be shown as error

0- Disabled

1- Warning

2- Error

clip_image006

Adding Angular Js Validation

· Controller name should be starts with [A-Z] followed by Controller.

· Directive & Filter should be added prefix with dir and flr

· Disallow empty controller

Include the required plugin in gulp.js and package.json - 'eslint-plugin-angular'

 var gulp = require('gulp');
 var eslint = require('gulp-eslint');
 var stylish = require('jshint-stylish');
 var angularPlugin = require('eslint-plugin-angular');
 var config =
     {
         apps: ['app/**/*.js'],
         html: ['*.html', 'app/**/*.html']
     };
 
 
 gulp.task('validateSyntax-eslint', [], function () {
     return gulp.src(config.apps)
     .pipe(eslint(
         {
             "extends": ["eslint:recommended"],
             "plugins": ["angular"],
             "env": {
                 "browser": true
             },
 
             "globals": {
                 'jQuery': true,
                 '$': true,
                 "angular": true,
                 "app":true
             },
             'rules': {
                 'quotes': [0, 'single'],
                 'semi': [0, 'always'],
                 'no-unused-vars': 0,
                 'no-console': 0,              
                 "angular/controller-name": [1, "/[A-Z].*Controller$/"],
                 "angular/directive-name": [2, "cus"],
                 "angular/empty-controller": 2,
                 "angular/filter-name": [2,"flr"]
                 
 
 
             }
         }))
     .pipe(eslint.format())
 });

More rules can be found here : https://www.npmjs.com/package/eslint-plugin-angular

clip_image008

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

KWizCom Forms App