Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Webhint Open Source Linting Tool for Detecting Issues with Accessibility, Performance, and Security

Webhint Open Source Linting Tool for Detecting Issues with Accessibility, Performance, and Security

This item in japanese

The webhint project provides an open source linting tool to check for issues with accessibility, performance, and security. The creation of websites and web apps has an increasing number of details to perfect, and webhint strives to help developers remember these details.

webhint is available as either a CLI tool or as an online scanner. The quickest way to get started with webhint is with the online scanner, which requires a public facing URL to run a report and get insights about an application.

To use webhint within the development workflow, install it via npm:

npm install hint

As is the case with most feature-rich tools, webhint has many configuration choices and options. The project recently added an initialization CLI command to ease the creation of a webhint configuration:

npm create hintrc

When webhint is run to test an application, it can run in one of three environments: jsdom, Chrome, or Edge. The latter two options leverage the Chrome DevTools protocol, while the former option allows for a quick but more limited round of checks in a Node.js environment without a browser.

Numerous hints may get checked for an application. For example, the http-compression hint performs several requests for each resource within an application, specifying different headers, and checking and validating the content that gets returned.

In support of Progressive Web Apps (PWA), webhint analyzes the web manifest file to check its accuracy and settings.

The webhint tool can also verify that the server-side for an application is returning the correct content-type for a resource.

The project recently added a CSS parser, including a PostCSS abstract syntax tree.

Parser support is also available for TypeScript, Babel, and Webpack. The Webpack integration offers guidance for better tree shaking to improve application performance. The TypeScript and Babel integration checks against list of browsers specified within the webhint configuration to determine which version of JavaScript should get output by these transpilers.

webhint is an open source project, part of the JS Foundation, available under the Apache 2 license. Beyond the source code for the webhint parser, the online scanner source code is also available. Contributions are welcome via GitHub.

Rate this Article