JSHint Backbone not defined in CodeKit

Question

A small test app is set up like this:

init.js:

//@codekit-prepend "vendor/jquery-1.7.2.js"
//@codekit-prepend "vendor/underscore.js"
//@codekit-prepend "vendor/backbone.js"

// Setup namespace for the app
window.app = window.app || {};

//@codekit-append "models/Ride.js"

Ride.js:

(function() {
    window.app.Ride = Backbone.Model.extend({

        initialize: function() {
            console.log("Ride initialized");
        }
    });
})();

CodeKit's JSHint check reports that both Backbone and console are not defined. What am I missing here?

Answer 1

JSHint doesn't run your code so it doesn't know about any modules you included in other files. You have to specifically tell it about all global variables you plan to use in Ride.js. In your case it will be: /*global Backbone */. console is disallowed by default because it is not a very good idea to ship your software with filled console.log calls. To remove this warning you can use /*jshint devel:true */.

So in the end your file should look like this to pass JSHint check:

/*jshint devel:true */
/*global Backbone */

(function() {
    window.app.Ride = Backbone.Model.extend({

        initialize: function() {
            console.log("Ride initialized");
        }
    });
})();

More info here: http://www.jshint.com/options/

Answer 2

Bryan here. CodeKit does check your files in a full, global context. (That is, it combines them first, so variables declared in an earlier file will be valid in a later one. This assumes you use CodeKit to combine the files, either with @codekit-prepend/append statements or drag/drop import links set up in CodeKit itself). If you're combining your JS files some other way (such as a build script) then CodeKit is unaware that the files go together and therefore it checks each one separately.

You can use the comment flags in the answer above, or you can configure JSHint's options directly in CodeKit. See the preferences window (or project settings area, if your project uses project-level settings). You can also enter custom globals there as well, which will remove those warnings.

Cheers!