Integrate jshint in ionic starter project


#1

Hi all,

I started a new project with ionic.
As it grows i want to prevent from making errors like arr.push[3] instead of arr.push(3).
For this purpose i may use jshint.
How do i integrate it in the ionic process, so that after each file change ionic serve runs jshint and will warn me on mistakes?

Thanks,
David


#2

So adding jsLint/Hint isn’t a too difficult,

  1. make a project and cd into it
  2. run npm install
  3. run npm install gulp-jshint jshint-stylish --save-dev
  4. edit gulpfile.js to include var jshint = require('gulp-jshint');
  5. then add this gulp taks:
gulp.task('lint', function() {
  return gulp.src('./www/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

Note that jshint-stylish isn’t required, but make the output much more legible.

Now you can run gulp lint and see where your errors are.


Showing Blank White Screen
#3

Its my result after ran “gulp lint”:

[22:47:25] Using gulpfile e:\mypath
[22:47:25] Starting ‘lint’…
[22:47:26] Finished ‘lint’ after 633 ms

What’s wrong from me?


#4

Try this!

function handleError(err){
  'use strict';
  console.log(err.toString());
}

gulp.task('lint', function() {
  return gulp.src('./www/js/*.js')
    .pipe(jshint())
    .on('error', handleError)
    .pipe(jshint.reporter('jshint-stylish'));
});


#5

Hi, I get the error: Cannot find module ‘bower’. Any suggestions? Thanks.


#6

I used this and it works great thank you! I have a bunch of seperate modules so the src to the js folder wouldn’t work for me so my code looks like this:

function handleError(err){
  'use strict';
  console.log(err.toString());
}

gulp.task('lint', function() {
  return gulp.src('./www/*/*.js')
    .pipe(jshint())
    .on('error', handleError)
    .pipe(jshint.reporter('jshint-stylish'));
});

I’m not sure if this is the prefered way of doing things but it helped me access all of my js files that were one level deeper in the www folder.