Prevent Web Essentials JsHint "ko is not defined" warning when using Knockout

Question

On an ASP.NET MVC 5 project using bundling and minification, I have a Javascript view model that I populate in the .cshtml file. The view model references knockout via ko, which works fine. However the JsHint output that comes from Web Essentials reports warning W117, 'ko' is not defined for each reference to ko.

The .js files each look like this:

/* exported MyViewModel */
function MyViewModel(viewModel) {
    self.someValue = ko.observable(); // JsHint warning on this line.
    ...
}

The .cshtml files each look like this:

...
@section Scripts {
    <script>
        ko.applyBindings(new MyViewModel(ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)))));
    </script>
}

How do I keep the benefits of the "not defined" warnings generally, but avoid these false warnings?

Answer 1

1. From your Web Essentials menu, choose Edit global jshint settings

2. Scroll to the bottom of the .jshintrc file and add this:

   "globals"       : { "ko": false}        // additional predefined global variables
   

This will prevent jshint from complaining about ko but will still warn you about other undefined symbols.

Note that you can also do this on a per file basis by putting this comment at the top of your javascript file.

/*global ko*/