Webhint self-describes as a customizable linting tool that helps developers improve sites’ accessibility, speed, cross-browser compatibility, and more by checking the authored code for best practices and common errors.
Webhint may run as a command-line application (that issues an HTML report with a short summary of findings) and be integrated into a CI workflow. It is also available as a Visual Studio extension and may then display detected issues and recommendations directly in the IDE, while coding.
Webhint can also be installed as a browser extension (for Firefox, Edge and Chrome browsers) and allows developers to do on-demand runtime analysis on a page while debugging or after a page was deployed. Lastly, webhint can also be run from the webhint scanner site on any page without installing anything.
Hints are gathered in 7 categories: performance, pitfalls, security, development, PWA, compatibility, and accessibility with a total of over 70 hints implemented at the time of writing this article.
Performance hints include analysis of image optimization, and javascript minification, detection of the presence of broken links, or how the web page relates to a web performance budget.
Development hints analyze how developers use development tools (e.g. bundlers, transpilers, optimizers). These include the analysis of a Babel, TypeScript, or Webpack config,
Compatibility hints include checking that CSS stylesheet limits are respected; or that CSS, HTML, and JavaScript on the page have not deprecated or use features that are not supported by the targeted browsers.
PWA hints include manifest validation. Accessibility hints help ensure that a site is usable via the keyboard, or that content has enough contrast for a good reading experience. Pitfall hints warn the developer about common gotchas and save them the debugging hours ([Specify button type](https://webhint.io/docs/user-guide/hints/hint-button-type/), [No createElement with SVG](https://webhint.io/docs/user-guide/hints/hint-create-element-svg/), [Prefixed CSS first](https://webhint.io/docs/user-guide/hints/hint-css-prefix-order/), [scoped-svg-styles](https://webhint.io/docs/user-guide/hints/hint-scoped-svg-styles/) hints).
The list of hints that developers want to apply can be configured via a .hintrc file. Custom hints can be added to the list of existing hints.
#html #accessibility #web development #progressive web apps #best practices #css #security #development #news
