How to tell JSHint to look for definitions in another JS file

Question

Here's the problem: I'm using JSHint in Grunt. I have a couple JS files and they'll be merged into one file in the end. But before merging, I would like to run JSHint. However, JSHint complaints some undefined variables. Here's an example: 1. JavaScript/file_one.js defines a variable: var Foo = (function (){}()); 2. JavaScript/file_two.js uses that module. new Foo().

jshint: {
            files: ['Gruntfile.js',
                    'javascript/**/*.js',

                   ],
             options: {
             // some options.
         }
}

JSHint complaints that Foo isn't defined in file_two.js.

Here are my goals (if possible): 1. I want to have codes in separate files. So it's possible that some variable is defined in a different file. 2. I want JSHint to check the origin JS files. I don't want to merge all JS files to one and have JSHint to check the merged one. 3. JSHint can check across all files in <%= jshint.files %> (javascript/**/*.js for example) and look for definition.

I know one work around that to put Foo as a global in options, as in this post How to tell JSLint / JSHint what global variables are already defined. But I don't want to put the variable I defined there, since every such variable is in my source files.

So my question is whether there's a way to achieve my goal 3 to tell JSHint to look for the definition in other files.

Answer 1

Use the following, which has the benefit of not using JSHint configuration at all.

In the first file (the file which gives the variable its initial value):

var username = "guest";   // it becomes: window.username

In the other (second, third) file(s):

var username = window.username;

Various notes:

By declaring with var, it becomes a property of the window (global) object (the window.username). Use var, so you can declare it multiple times (let can't do that).

The same can be done with functions using function expressions (not function declarations).

If the variable is an object (for example, function) or you do not need to change its value, you can also use let in the second file. Another option is to not declare it at all in the second file. In this case, use window every time you use it:

console.log(window.username);

Using this technique, it has the additional advantage that you can distinguish your "super global" variables (the ones that you declare with var and are attached to the global object - window) from the "just global" ones (that you declare with let, as you should, and are attached to the global context but not the global object).

Answer 2

Your goal is not achievable. JSHint will look for configuration in your .jshintrc or in your case your Gruntfile. The only other overrides you can make is locally in the individual file.

If you are relying on global variables you should disable that setting, override to specify each of the variables either in your config or each file, or put them all in a name space.

I highly recommend switching to a module pattern and disallow anything leaking into the global scope

Answer 3

You will need to tell JSHint in file_two.js about the globals it uses

/* global Foo, Bar */

for file_one.js you will get a message that Foo is defined but not used. So you need to tell JSHint that other files will make use of it

/* exported Foo */