Configurations
User guide
- Getting Started
Api
Concepts
Configurations
Configuring webhint
Connectors
Development flow integration
Extensions
Formatters
Hints
- 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
- Detect CSS Reflows
- Disallowed HTTP headers
- External links disown opener
- Has web app manifest
- Highest document mode
- HTTP cache
- Leading '.' in `classList.add` or `classList.remove`
- Manifest has name
- Minify JavaScript
- Modern DOCTYPE
- No `createElement` with SVG
- No `P3P` headers
- No broken links
- No byte-order mark
- No Inline CSS Styles
- 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
- webpack configuration hints set
Parsers
Server configurations
Troubleshoot
- Api
- Concepts
- Configurations
- Configuring webhint
- Connectors
- Development flow integration
- Extensions
- Formatters
- Hints
- Parsers
- Server configurations
- Troubleshoot
Configurations
A configuration is a way to share .hintrc values for different use cases, such as related hints, URLs to ignore, shared organization standards, etc. When installing a configuration, all of its dependencies (hints, connectors, formatters, parsers) should be installed automatically as well.
Conveniently, any configuration you choose when running
npm create hintrc
is automatically installed and added to your
.hintrc for you.
To add a configuration other than (or in addition to) those offered by
running npm create hintrc
, first install its package. Make sure the
package name begins with @hint/configuration-
,
webhint-configuration-
, or @scope/webhint-configuration-
. Once
installed, update your .hintrc to use it by adding your new configuration
to the extends
array. Packages within the @hint/
namespace (like,
for example, @hint/configuration-example1
) can be added using their
short name.
{
"extends": ["example1"]
} |
Because the property extends
is an array of strings, you can extend
from multiple configuration packages. For example, if you wish to add
@hint/configuration-web-recommended
, webhint-configuration-example2
,
and @orgname/webhint-configuration-example3
, your extends
value will
look like this:
{
"extends": [
"web-recommended",
"webhint-configuration-example2",
"@orgname/webhint-configuration-example3"
]
} |
Configuration priority applies from left to right. Any values in your
own .hintrc file will take precedence over those in an included
configuration package. For example, the following will always use the
summary
formatter, regardless of the content of
webhint-configuration-example1
and webhint-configuration-example2
configurations: (see Notes for more details)
{
"extends": [
"webhint-configuration-example1",
"webhint-configuration-example2"
],
"formatters": ["summary"]
} |
Notes:
If you define the property
formatters
when extending a configuration, the formatters in the configuration will be replaced with the value you have defined.If you define the property
parsers
when extending a configuration, the parsers in the configuration will be appended to the values you have defined.
If you want to implement your own custom configuration, visit the contributor guide.