Add Grunt and ESLint to a MVC Project

This is part two of getting started with ESLint using Grunt where I will show you how to configure ESLint to analyse a MVC .NET Project. In part one I set-up our environment with node.js, Grunt-cli and finally Grunt for our project, but you couldn’t do much with it.

In this post, I’ll install ESLint, disable all the default ESLint rules, enable one specific some rule and exclude some files from analysis.

To recap, I have a new ASP.NET MVC project in c:\myproject\WebApplication1 that also contains a package.json and Gruntfile.js:

C:\myproject\WebApplication1> dir -name
node_modules
packages
WebApplication1
Gruntfile.js
package.json
WebApplication1.sln
C:\myproject\WebApplication1>

Let’s get started.

Step 1 – Install ESLint and Grunt-ESLint

Like last time, npm makes installing things trivial. First, install ESLint:

npm install --save-dev eslint

Once that’s completed, install the ESLint grunt integration:

npm install --save-dev grunt-eslint

And finally install load-grunt-tasks, which saves a bit of typing in a minute:

npm install --save-dev load-grunt-tasks

Step 2 – Configure ESLint

eslint.json

To make our lives easier to change the configuration of ESLint, we’re going to use an eslint.json file. As you can probably tell from the name, it’s a text file containing some json that ESLint parses. The ESLint documentation is pretty good at explaining what all the options are, so I won’t do that here, but for now just create one containing the following:

{
    "env": {
        "browser": true,
    },
	"globals": {
        "$": true,
    },
	"rules": {
        no-undef: 1,
    }
}

This ensures the browser and jQuery (\$) variables are recognised by ESLint so they don’t throw false positive. It also enables a single rule “no-undef – disallow use of undeclared variables unless mentioned in a /*global */ block”.

As you will see in a minute, I personally like to disable **all ** the rules, only enabling the ones I explicitly want to use. That’s personal preference, as on legacy systems you can end up with a lot of issues to address which can seem overwhelming.

.eslintignore

The next file that we need to create is .eslintignore. As the name suggests, this is an easy way of telling ESLint to ignore certain files and directories. Again I refer you to the documentation for more details, but for now, create an .eslintignore file containing:

# ignore everything in the packages folders
**/packages

# ignore everything in Scripts except files beginning with "myapp"
**/Scripts
!**/Scripts/myapp*

This tells ESLint to ignore all files inside the packages directory, i.e. anything you’ve got from nuget. The last two lines ensures all files except those following your applications naming convention – you have a naming convention right? – are also ignored, i.e. jquery.<ver>.min.js etc.

Finally, all that’s left is to configure Grunt to run ESLint.

Step 3 – Configure Grunt to use ESLint

Before explaining the syntax, please edit your Gruntfile.js file to contain:

module.exports = function(grunt) {
	# section 1 - require modules
	require('load-grunt-tasks')(grunt);

	# section 2 - configure grunt
	grunt.initConfig({
		eslint: {
			options: {
				config: 'eslint.json',
				reset: true
			},
			target: ['WebApplication1/**/*.js']
		}
	});

	# section 3 - register grunt tasks
	grunt.registerTask('default', ['eslint']);

};

The more you play with Grunt the more familiar this will be, but it’s basically made up of 3 sections. Section one lists any requirements (“require” calls), section 2 is where you initialize Grunt and section 3 where you register tasks.

In this instance, I’m configuring a single “target” called “eslint” and telling it to use the eslint.json file, turn off all the rules (reset: true) and to search for all JavaScript files inside the “target”.

Finally I register the “eslint” target to be the default task. This simply means I can execute “grunt” instead of “grunt eslint”.

Which if I do that, I get:

C:\myproject\WebApplication1> grunt
Running "eslint:target" (eslint) task

WebApplication1/Scripts/_references.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/bootstrap.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/bootstrap.min.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery-1.10.2.intellisense.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery-1.10.2.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery-1.10.2.min.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery.validate-vsdoc.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery.validate.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery.validate.min.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery.validate.unobtrusive.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/jquery.validate.unobtrusive.min.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/modernizr-2.6.2.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/respond.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

WebApplication1/Scripts/respond.min.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override

? 14 problems (0 errors, 14 warnings)

And that's it! ESLint is now analysing the JavaScript files in my MVC project.

Step 4 – Next Steps

If you’ve got this far, you’re set to go. You will definitely want to edit the rules you’re using, but I’ll leave that up to you.