Linting your ionic app before running has huge advantages. It will analyse code for potential errors and save you tremendous amount of time.
"Linting is the process of running a program that will analyse code for potential errors." - see What is "Linting"?
Your ionic app comes with a package.json file. Go to the root of you app in a Command Line/Terminal and install the following packages:
npm install jshint --save-dev
npm install jshint-stylish --save-dev
npm install gulp-jshint --save-dev
In the root of your ionic app, there is a gulpfile.js file. Open it in an editor and paste the following gulp task:
gulp.task('lint', function() {
return gulp.src(['./www/js/**/*.js'])
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail'))
});
This looks for a folder called 'js' inside the 'www' folder. If you have other folders containing JavaScript files, add those too. For example, lets also add a folder called 'views':
gulp.task('lint', function() {
return gulp.src(['./www/js/**/*.js','./www/views/**/*.js'])
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail'))
});
Explanations:
1) /**/*.js - This syntax means to look at all the js files in the subfolders too
2) .jshintrc - This is a configuration file that we will create in the next example.
Create a file named '.jshintrc' in the root of your app, where package.json is.
*Note on windows: create a file named "jshintrc.txt". Then rename it to ".jshintrc." (notice the dot at the end).
This is a configuration file. It can for example tell jshint to ignore certain variables and many other things. Here is mine:
{
"predef": [
"window",
"console",
"cordova",
"device",
"alert",
"document",
"debug",
"setServiceVars",
"StatusBar",
"config"
],
"globals": {
"angular" : false,
"myApp" : false,
"myControllers" : false,
"myDirectives" : false,
"localStorage" : false,
"navigator" : false,
"emit" : false,
"atob" : false,
"moment" : false,
"btoa" : false
},
"node" : true
}
Create a file named: "Makefile" (with no extension) in the root of your app
Open it in a text editor and add this:
android:
gulp lint
gulp sass
ionic run android --device
ios:
gulp lint
gulp sass
ionic build ios
This will lint your app and if that passes, it will compile sass and build you app.
Usage: To run your app, instead of the regular "ionic run android --device", run these commands:
Android: make android
iOS : make ios