These VS Code extensions help you fix accessibility and compatibility bugs while you code

webhint is a VS Code extension that checks your web code for accessibility, compatibility, security, and performance pitfalls. The Error Lens VS Code extension brings code warnings out of the Problems pane and next to the affected line. Used alone or together, they ensure you'll fix a whole host of code issues before you even close the </tag>!

For the past year and a half or so, I've been contributing to webhint, an open-source project that collects best practices and suggestions from sources such as axe-core and MDN into a single tool. You can think of it kind of like a linter for the web, giving you real-time feedback in areas such as cross-browser compatibility, accessibility, performance, and security.

I love using the webhint VS Code extension because it helps me fix mistakes while I'm coding. It analyzes HTML, CSS, JS, TS, JSX, and more. As with other VS Code linters, webhint messages appear in the Problems pane in VS Code.

I recently discovered another VS Code extension called Error Lens. Error Lens takes messages published to the Problems pane and inlines them with your code. It's also configurable via a variety of provided errorLens. settings.

Using the webhint and Error Lens extensions together creates an all-new experience. Now, I can see webhint feedback on a11y, compat, and more, right on the line where the error occurs! 😍

Search "webhint" and "Error Lens" in the VS Code extensions tab to install them both.

webhint is available as a CLI, a browser extension, and a VS Code extension. It's even built in directly to the Microsoft Edge browser's DevTools. If you're interested in contributing to webhint, come find us on GitHub!