SharePoint Pals
 | Sign In
Automate Angular Js / Javascript code analysis with EsLint and Gulp Js in Visual Studio
by Krishna KV 5 Mar 2016
Author
Team Leader, Aspire Systems
Visits   
Today  :   5     Total  :    8368

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

blog comments powered by Disqus

SharePoint Pals

Pals
SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile

Training

Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community




SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to articles@sharepointpals.com in a word document.

Related Resources

Recent Tweets

Twitter January 15, 00:25
How To Enable Target Value And Actual Value In #D3 Gauge Chart https://t.co/VxSi4QnNrC

Twitter January 15, 00:24
How To Open #SharePoint List Hyperlink Column In Modal #Popup Window https://t.co/EQ7HkoZDkX

Twitter January 15, 00:24
Quick Introduction To #Asp.NetCore And It’s Features https://t.co/zAXObHCFpH

Twitter January 15, 00:22
How To Configure #PerformancePoint Services To Use Secure Store In #SharePoint 2013 https://t.co/LEwnUoI7EY

Twitter January 15, 00:21
How To Block Or Disable #Office365 Services https://t.co/Yvp2VPFIRP

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation