DEV Community

loading...
Cover image for These VS Code extensions  help you fix accessibility and compatibility bugs while you code

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

hxlnt profile image Rachel Simone Weil ・2 min read

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.

image

Nellie, the official webhint mascot

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.

image

webhint VS Code extension

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! 😍

webhint-errorlens

This accessibility warning from webhint appears as I type and disappears when I fix the issue

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!

Discussion (1)

pic
Editor guide
Collapse
theonlytails profile image
TheOnlyTails

Is it available as a plugin to Jetbrains IDEs?