JSHint File integration and customization in Visual Studio (VS2013-VS2015)

Standard

JSHint is a tool that can help you to write more reliable and consistent JavaScript code. The tool works by checking your code for a number of common errors. If you’ve ever spent half an hour trying to debug your code only to find that you missed a comma somewhere, you’ll understand how useful JSHint can be.

SHint is available through the node package manager (npm). If you don’t have npm installed, go to the node.js website and download a copy of node for your OS. This will install both node.js and npm.

Once you have npm installed, open up terminal and type

npm install -g jshint

2015-11-05_17-54-51

The -g flag means that jshint will be installed globally on your system. This allows you to access the executable from any directory.

After it is installed, just confirm it by typing version of it using below command on console as shown in above image.

jshint — version

Integrating JsHint in Visual Studio

Step 1: Install SideWaffle Template Pack
SideWaffle Extension

Step 2: Add new item in your project and choose JSHint Rules File2015-11-05_17-48-32

2015-11-05_18-07-29

1. Output Using JsHint on Command Line

Open up terminal and navigate to the folder that contains your JavaScript file OR in solution explorer select ‘open command prompt’ from right click menu of selected file . Then run the following command to test the file:

jshint appConfig.js

2015-11-05_17-50-48

2015-11-05_17-52-11

2. Output Using .jshintrc file and Web Essentials

Running JSHint from the command line can become a bit tedious. Ideally you want to get real-time feedback about any errors as you write your code. Web Essentials produces output that Visual Studio can use to take you to the file and line associated with each error.

Step 1: Install Web Essentials

Web Essentials Installer

Now open file and you will witness warnings and error in output area of Visual Studio

2015-11-05_18-15-12

Integrating JsHint in Visual Studio Using Web Essentials

If you don’t want to include .jshintrc file in your project, you can still enjoy the luxury of jshint features in your project using web essentials solely, but web essentials should be installed in VS.

Web Essentials Installer

You may customize .jshintrc file by editing global JsHint file setting through web essentials menu.

2015-11-05_18-19-29

Configuring JSHints

An added advantage of using a dedicated configuration file is that you can use the same configuration to check all of the JavaScript files in your project. For this to work the .jshintrc file should be placed at the root of your project.

Lets take a look at a simple example:

{
  "curly": true,
  "eqeqeq": true,
  "undef": true,
  "globals": {
    "jQuery": true
  }
}

You can find a full list of configuration options in the documentation.

P.S.

There is JSLint validation tool in Visual Studio 2013 – jslintnet. You could install it from vs gallery or download from codeplex

Happy Coding 😀

Advertisements

One thought on “JSHint File integration and customization in Visual Studio (VS2013-VS2015)

  1. cam nang su dung thiet bi gia dung

    Thanks for your personal marvelous posting! I truly
    enjoyed reading it, you’re a great author. I will remember to bookmark your
    blog and will eventually come back from now on. I want to encourage you to continue your great job,
    have a nice day!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s