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*/

Answer 2

The new Web Essentials is able to read the .jshintrc from the parent directories as well.

1. Select the Edit global JSHint settings (.jshintrc) from the Web Essentials menu.
2. Copy the file contents into a ".jshintrc" file in the solution folder.
3. Edit the file as required (e.g. add the ko as a global variable)

This way the .jshintrc can be added to version control to share it with all developers without having to edit the global JSHint settings on the individual workstations.