How do you use JsHint “.jshintrc” file with Visual Studio 2013 Web Essentials extension?

Question

I have installed the "Web Essentials" extension into Visual Studio 2013. I am now getting JSHint warnings appearing in my "Error List" window under the Messages section. However, it is complaining about some global variables that it thinks are not defined.

From what I read, you can use JSHint's .jshintrc file to list global variables so it will stop complaining about them. I want to have it set up as follows. (so that it will stop complaining about "ko"... which is a KnockoutJs global variable.)

"globals": {
    "$": false,
    "jQuery": false,
    "ko": false
 }

How and where are you supposed to create this .jshintrc file in your VS Project?

I tried adding the file in the root of the project, naming it literally as ".jshintrc" but Visual Studio complains saying that:

"File and folder names cannot contain a leading period."

I can't seem to find any documentation about how to add this file into your Visual Studio project so that the Web Essentials extension will pick it up.

Any ideas?

---

Update

Hex had the correct answer. I had to open a command prompt to rename the file, as Windows Explorer wouldn't let me name a file starting with a period either. After that, I also followed Hex's advice on surrounding the entire thing in curly braces. Here are the contents of my .jshintrc file.... which I have sitting in my WebApp's root folder... alongside other files like web.config.

{
    "globals": {
        "$": false,
        "jQuery": false,
        "ko": false
      }
}

I no longer get 10 million unnecessary warnings about the "ko" object. :) Thanks Hex!

Answer 1

Project root is fine. I thing JsHint is searching for file all the way to the top of filesystem.

You can create file using command line. just create file using your favorite tool and then rename it from cmd like "ren jshintrc .jshintrc"

Also I found out that I need to restart VS for it to load changes in jshintrc file.

If it's still not working try to put whole file in {}. I'm not sure if it is required but I see it elsewhere.

Answer 2

The easiest way to create/edit JSHint global settings (as well as TSLint, CoffeLint & JSCS settings), is to click on the Web Essentials menu, then select the appropriate option.

This way, Web Essentials takes care of creating the file for you, if it doesn't already exist.

Answer 3

I added jshint via Visual Studio extensions. Under the Menu option there is a menu item called JavaScript Linter Options... It brings up a dialog that allows you to select many different options. To remove the '$' is not defined error, I checked the Assume jQuery option.