How can I stop jshint errors in my web file for globals?

Question

I have a protractor test script file that looks like this:

var TestPage = function () {

    this.detailsTab = element(by.id('detailsTab'));
    ..

It's giving me a lot of errors saying element and by are not defined. Is there a way I can stop all these hint errors from appearing?

Answer 1

From the protractor tutorial page you can see that these globals are created by Protactor:

This uses the globals element and by, which are also created by Protractor.

So you need a way of telling JSHint about these globals. You can do this in your configuration for JSHint. http://www.jshint.com/docs/

Inline Configuration Method

One of the ways JSHint can be configured is by using adding special inline comments. Below is an excerpt taken from the JSHint docs page that describes how to specify global using the inline comment configuration method.

globals - A directive for telling JSHint about global variables that are defined elsewhere. If value is false (default), JSHint will consider that variable as read-only. Use it together with the undef option.

/* global MY_LIB: false */

Update: So for protractor the inline config would be:

/* global element */
/* global by */

or as suggested by @runTarm this condensed syntax will also work:

/* global element, by */

Config File Method

You can also configure JSHint by using configuration files. Check the documentation for the different ways to specify the config file. From the docs page we the following excerpt that explains how to write the file to specify a global variable.

Configuration file is a simple JSON file that specifies which JSHint options to turn on or off. For example, the following file will enable warnings about undefined and unused variables and tell JSHint about a global variable named MY_GLOBAL.

{
  "undef": true,
  "unused": true,
  "predef": [ "MY_GLOBAL" ]
}

Answer 2

Here is an example .jshint file with the globals being removed:

{
    "node": true,
    "browser": true,
    "esnext": true,
    "bitwise": true,
    "camelcase": true,
    "curly": true,
    "eqeqeq": true,
    "immed": true,
    "indent": 4,
    "latedef": true,
    "newcap": true,
    "noarg": true,
    "quotmark": "single",
    "undef": true,
    "unused": true,
    "strict": true,
    "trailing": true,
    "smarttabs": true,
    "multistr": true,
    "globals": {
        "after": false,
        "afterEach": false,
        "angular": false,
        "before": false,
        "beforeEach": false,
        "browser": false,
        "describe": false,
        "expect": false,
        "inject": false,
        "it": false,
        "jasmine": false,
        "spyOn": false,
        "Kinetix": false,
        "$": false
    }
}