Getting Started with ESLint using Grunt

Getting Started with ESLint using Grunt
Getting Started with ESLint using Grunt

I recently had the chance to add ESLint to our workflow. I considered using it standalone, but as Grunt is becoming a first class citizen in Visual Studio 2015, I wanted to get more familiar with it now.

This is the first of a two part guide to getting started with ESLint using grunt. Ill also help you understand how to enable other ESLint rules as well as include/exclude files from analysis. Im going assume you have little to no experience of node.js, Grunt or ESLint and are running windows. In this post Ill cover the setting up of your environment and next time well go about installing and configuring ESLint to work on a ASP.NET MVC project. This guide could also be used to add ESLint any project that contains JavaScript or even a different operating system, but I havent tested that, so wont make any promises.

Once weve finished, you should be able to type grunt from a command prompt and ESLint will analyse your JavaScript, so lets get started.

Step 1 Install Node.js

Installing Node.js, which includes npm (node package manager think nuget for node), is as simple as going to the Node.js homepage, clicking the Install button and executing the .msi file that downloads.

Once the install has finished, open a command prompt and type npm. If youre presented something like this, youre good to go. If you have any problems, let me know in the comments.

Usage: npm <command>

where <command> is one of:
    add-user, adduser, apihelp, author, bin, bugs, c, cache,
    completion, config, ddp, dedupe, deprecate, docs, edit,
    explore, faq, find, find-dupes, get, help, help-search,
    home, i, info, init, install, isntall, issues, la, link,
    list, ll, ln, login, ls, outdated, owner, pack, prefix,
    prune, publish, r, rb, rebuild, remove, repo, restart, rm,
    root, run-script, s, se, search, set, show, shrinkwrap,
    star, stars, start, stop, submodule, t, tag, test, tst, un,
    uninstall, unlink, unpublish, unstar, up, update, v,
    version, view, whoami

npm <cmd> -h     quick help on <cmd>
npm -l           display full usage info
npm faq          commonly asked questions
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

Step 2 Install the Grunt Command Line tools (grunt-cli) globally

Getting Started with ESLint using Grunt
Getting Started with ESLint using Grunt

The next step is to install the Grunt Command Line tools globally using npm. Thankfully thats as simple as typing the following in a command prompt:

npm install -g grunt-cli

Step 3 Prepare your project for Grunt

For grunt to run on our project, you need a package.json file and a gruntfile.js file.


You could create this file by hand, but npm can talk you through the process, so in the root of your project type:

PS C:\myproject> npm init

You will get asked a series of questions, which if you dont know the answer to, just hit enter to skip it. The file is editable, so can be changed later if need be. Depending on what you answer, youll end up with a package.json file containing:

  "name": "npminit",
  "version": "1.0.0",
  "description": "Description",
  "main": "index.js",
  "scripts": {
    "test": "test"
  "author": "Matt Dufeu",
  "license": "ISC"

This file will also be automatically updated by npm when we start installing other packages, as well see in step 4.


Gruntfile.js is similar to a makefile (showing my age) and is used by grunt to see what to do when you issue grunt commands. To get started, create a file that contains:

module.exports = function (grunt) {
  // Project configuration.
    pkg: grunt.file.readJSON("package.json")

Dont worry about what this means at the moment, well be modifying this later.

Step 4 Install Grunt locally

The final setup step is to install Grunt locally. Again, npm comes to the rescue, but this time we specify save-dev.

PS C:\myproject> npm install grunt --save-dev

This will do two things; firstly, it will create a folder called nodemodules to your project. This is basically the folder npm stores all the packages for _this project, so think of it as a libraries folder.

Secondly, it will install Grunt as a dependency to your project. Take a look at your Gruntfile.js now and you will see a new section like this:

"devDependencies": {
  "grunt": "^0.4.5"

devDependencies simply lists the packages the project is dependent upon and their version number. It gives you the option of moving the project to a different location without the node_modules folder and typing npm install to get npm to download the required dependencies.

Step 5 Verify its working

To check thats working as expected, simply execute grunt, and you should see the below. Its basically saying theres nothing to do, but at this stage thats expected.

PS C:\myproject> grunt
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.
PS C:\myproject>


Weve installed node.js, npm, the Grunt command line tools and setup our project.json and Gruntfile.js files. Were now ready to start adding ESLint to our project, so next time, Ill be adding ESLint, showing you how to enable/disable ESLint rules and finally exclude certain files from analysis.

Please leave a comment below or catch me on twitter if youre having any problems.

[Update: part 2 is now available.]

Comments Section