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!

I have been looking everywhere for an answer to this myself. I find it a bit retarded that JSHint uses a file that requires a leading period in the file name. You can't even create this file in the windows explorer. — Chris Beckett, Dec 18 '13 at 19:45
This might be a long shot, but i have visual studio 2012 and it refuses to recognize the jshintrc file. I have written it like recommended here, but it still complains about global variables. — Frederik T, Mar 03 '14 at 12:47

score 11 · Accepted Answer · answered Dec 26 '13 at 20:26

11

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.

answered Dec 26 '13 at 20:26

hex

713
1
11
17

1

Thanks. Good to have useful JsHint messages appearing now! You are right I did have to put curly brackets around the entire thing. – Jason Parker Jan 23 '14 at 21:16

score 8 · Answer 2 · edited Jun 20 '20 at 09:12

8

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.

Web Essentials menu

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 11 '14 at 14:10

Yann Duran

3,842
1
24
24

Wow, I never noticed this menu up at the top. Thanks!! BTW, when I click on the "Edit global JSHint settings" menu item you showed it opens a file, yet when I click to "Sync with Active Document" in the Solution Explorer.... it does not indicate the file location. I tried editing this file but it caused no checkout or pending changes for my project in source control. (This version of .jshintrc seems to be the same file across all VS solutions.) So for now I'm continuing to use the file I created at webapp root, because it travels with my project and is tracked in TFS. – Jason Parker Mar 11 '14 at 14:55
1

The files are stored in C:\Users\%username%, which I don't like personally, but yes you're correct, these are "global" Web Essentials settings, so it makes sense that if you want a particular type of file to be excluded (like jquery*.js) that you'd want it excluded in all solutions. So the way to think of them is that they are "global to you", rather than connected to any individual solution/project. If you need a setting unique to just one project, then you'd add a file the way you described. – Yann Duran Mar 12 '14 at 06:12

score 0 · Answer 3 · answered May 27 '15 at 16:19

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. enter image description here

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

3 Answers3

Linked