Configuring webhint
User guide
- Getting Started
Api
Concepts
Configurations
Configuring webhint
Connectors
Development flow integration
Extensions
Formatters
Hints
- AMP HTML validator
- Avoid CSS limits
- Avoid HTTP redirects
- axe accessibility check
- Babel configuration hint set
- Compatibility of CSS, HTML and JavaScript features
- Correct `Content-Type` header
- Correct manifest extension
- Correct viewport
- Disallowed HTTP headers
- External links disown opener
- Has web app manifest
- Highest document mode
- HTTP cache
- Manifest has name
- Minify JavaScript
- Modern DOCTYPE
- No `createElement` with SVG
- No `P3P` headers
- No broken links
- No byte-order mark
- No protocol-relative URLs
- No small error pages
- No vulnerable libraries
- Nu HTML test
- Optimal compression
- Optimize images
- Performance budget
- Prefixed CSS first
- scoped-svg-styles
- Specify button type
- SSL server test
- TypeScript configuration hints set
- Unneeded HTTP headers
- Use `Strict-Transport-Security` header
- Use `X-Content-Type-Options` header
- Use Apple touch icon
- Use charset `utf-8`
- Use HTTPS
- Use subresource integrity
- Valid `Set-Cookie` header
- Valid `theme-color`
- Valid manifest
- webhint
- webpack configuration hints set
Parsers
Server configurations
Telemetry
Troubleshoot
- Api
- Concepts
- Configurations
- Configuring webhint
- Connectors
- Development flow integration
- Extensions
- Formatters
- Hints
- Parsers
- Server configurations
- Telemetry
- Troubleshoot
Configuring webhint
There are 2 ways in which you can configure webhint
:
- Via a
.hintrc
file. - Adding a
hintConfig
property in yourpackage.json
.
To create a basic .hintrc
file you can use the following command:
npm create hintrc |
If webhint
cannot find a (valid) configuration, it will use a default
one and warn you about it.
In both cases, the format used is the same. The following is an example
for a .hintrc
:
{
"connector": {
"name": "connectorName"
},
"formatters": ["formatterName"],
"parsers": ["parserName"],
"hints": {
"hint1": "error",
"hint2": "warning",
"hint3": "off"
},
"hintsTimeout": 120000
} |
And for a package.json
:
{ "name": "project name", "dependencies": { ... }, "scripts": { ... }, ... "hintConfig": { "connector": { "name": "connectorName" }, "formatters": ["formatterName"], "parsers": ["parserName"], "hints": { "hint1": "error", "hint2": "warning", "hint3": "off" }, "hintsTimeout": 120000 } } |
The main things you can configure are:
connector
: how to access the resources.formatter
s: how to output the results.parser
s: how to handle special files like stylesheets, JavaScript, manifest, etc.hint
s: what to test for and theseverity
it should have.
The severity
of a hint
can be:
off
: Thehint
will not be run. This is the same as deleting it from the.hintrc
.warning
: If thehint
finds any issue it will be reported but the exit code will be0
.error
: If thehint
finds any issue it will be reported and the exit code will be1
.
webhint
allows you to configure it in many different ways. Please
check the other entires under Configuring webhint and the main page
for each package to have more details.
Setting options via environment variables
It is possible to set webhint options via environment variables. To do
so you have to create a variable prefixed by webhint_
where each
“word” is another property. E.g.:
"webhint_connector_options_waitFor" = "60000" |
will get transformed to:
{
"connector": {
"options": {
"waitFor": 60000
}
}
} |
and get merged with your .hintrc
. Keep in mind that if a key already
exists in .hintrc
it will take precedence.
An example where you might want to do this is for providing credentials and not storing them in a file.