webhint development configuration
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
webhint development configuration
To examine your raw source, use @hint/configuration-development
.
NOTE: To examine development and live websites, use
@hint/configuration-web-recommended
.
This webhint
configuration package is installed automatically by webhint.
To install webhint
, run the command in the following code snippet.
npm install hint --save-dev |
NOTE: The recommended way of running webhint is as a
devDependency
of your project.
Copy the following code snippet and add it to your .hintrc file.
{
"extends": ["development"]
} |
The following code snippet is an expanded version of the previous code snippet.
{
"connector": "local",
"extends": [
"accessibility",
"progressive-web-apps"
],
"formatters": [
"html",
"summary"
],
"hints": {
"axe": "error",
"babel-config/is-valid": "error",
"disown-opener": "error",
"highest-available-document-mode": "error",
"manifest-exists": "off",
"meta-charset-utf-8": "error",
"meta-viewport": "error",
...
},
"hintsTimeout": 10000
} |
The following code snippet includes another formatter (or any other hint or connector, and so on).
{
"extends": ["development"],
"formatters": ["codeframe"]
} |