Configure webhint in your project

webhint enables you to specify the following options for a report.

• The severity of each hint.
• The output type of the report.
• The custom hints to include in a report.

There are 3 ways that to configure a webhint report for your project.

• Use a .hintrc file in your project.
• Add a hintConfig property in your package.json file.
• Use an environmental variable to set a property in your .hintrc file that is used by all of your projects.

The 3 configuration methods require you to add the same code to different locations. The code that you add to the locations include key:value pairs of hint configuration properties, which are defined in the following table.

For additional information about severity and hint configurations, go to Hint configuration.

Create a .hintrc file

To create a basic .hintrc file, run the following command.

npm create hintrc

If webhint does not find a valid configuration (.hintrc file or hintConfig property in your package.json), it uses a default one and warns you about it.

Couldn't find any valid configurations
Running hint with the default configuration.
Learn more about how to create your own configuration at:
https://webhint.io/docs/user-guide/

The following code snippet is an example of a .hintrc file.

{
    "connector": {
        "name": "connectorName"
    },
    "formatters": ["formatterName"],
    "parsers": ["parserName"],
    "hints": {
        "hint1": "error",
        "hint2": "warning",
        "hint3": "off"
    },
    "hintsTimeout": 120000
}

Add a hintConfig property in your package.json file

The following code snippet is an example of the json added to a package.json file that uses webhint.

{
    "name": "project name",
    "dependencies": {
        ...
    },
    "scripts": {
        ...
    },
    ...
    "hintConfig": {
        "connector": {
            "name": "connectorName"
        },
        "formatters": ["formatterName"],
        "parsers": ["parserName"],
        "hints": {
            "hint1": "error",
            "hint2": "warning",
            "hint3": "off"
        },
        "hintsTimeout": 120000
    }
}

The following topics provide additional information about configuring webhint.

• Browser configuration
• Ignoring domains
• Hints timeout
• Using relative resources
• Website authentication

Setting properties using environment variables

NOTE: Any value added using an environmental variable is ignored if the key exists in the .hintrc file.

You may set webhint properties using environment variables. For example, you may use an environment variable to store a key:value pair, such as credentials, instead of saving it in a file.

To use an environment variable to set a webhint property, create a variable prefixed with webhint_ followed by a property name. If the property is nested under, use an underscore (_) character to separate each property name.

For example, the following pseudocode represents an environment variable for a webhint property.

"webhint_connector_options_waitFor" = "60000"

The following code snippet represents the webhint property if it was added directly to a .hintrc file.

{
    "connector": {
        "options": {
            "waitFor": 60000
        }
    }
}

NOTE: If a key already exists in the .hintrc file, the key in the .hintrc file is used and the environmental variable is ignored.