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.

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.

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

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!

Comments

[TheOnlyTails]

Is it available as a plugin to Jetbrains IDEs?

[Bhanu Sunka]

I found one really cool vscode theme named Jellyfish-x-retro 🚀🚀

[Momin Bin Shahid 👨‍💻]

Thank you so much for sharing these 👏

Specifically for Web Accessibility try this extension as well - marketplace.visualstudio.com/items...

[Kehinde Adeleke]

wow, Rachel, thank you for sharing these extensions. They would massively improve my developer experience and make sure I create more accessible websites.

[Angela Caldas]

Thanks a lot for sharing, I'll definitely use them!