How much time do you spend searching while doing web development? If you’re like me, probably a lot. In addition to keeping up with the flavor-of-the-week, I’m frequently figuring out how to do X, Y, or Z better with my existing tools and frameworks. The collective knowledge we’re building as web developers is impressive, but isolating the unopinionated and up-to-date information which applies to the thing I’m working on right now can be a chore.
Solving this problem requires more than a collection of tools. We really need one tool consolidating our knowledge and surfacing only what’s relevant to our current project. The mission for webhint is to do just that. Today we’re expanding webhint’s reach into another part of the development lifecycle with a preview of the webhint extension for Visual Studio Code.
What is webhint anyway?
Think of webhint as a linter for web development. It helps you find errors and apply best practices, but has a scope much broader than a single language. webhint pulls together “hints” across languages, toolchains, and sources — all focused on the tools and browsers you use. Plus webhint can be used during development, debugging, testing, or even against your live site — each one providing unique opportunities for feedback.
For example, running webhint in any context gives you guidance on how to make your content more accessible, powered by aXe.
And tips on your app experience when building PWAs.
Yet during development, webhint can also help optimize your project configuration and build step. Are you using TypeScript? Then webhint can point out how to optimize the build for your target browsers.
Of course these are just a sample of all the hints webhint provides. You can even write your own hints to cover best practices or common issues specific to your project. Here webhint helps process a variety of file types so you can focus on analysis instead of dependencies.
Where can I get it?
Install the webhint extension from the Visual Studio Marketplace, just make sure you have Visual Studio Code installed first. If you just want to take webhint for a spin, test any public URL using the webhint.io online scanner.
If you’re not using webhint yet, the extension will help you get started by offering to add it to your project. This adds hint as a development dependency via npm or yarn depending on what your project uses.
Not using Visual Studio Code? No problem, you can run webhint from the command line instead.
In fact, for maximum coverage you’ll want the command line version in addition to the extension. The command line version of webhint can be run against your development server, catching additional issues related to HTTP compression, caching, server misconfigurations, and more.
Can I contribute?
Of course! webhint is open source and managed under the JS Foundation so anyone can get involved. You can find us on GitHub to report issues, request features, submit pull requests, or help influence the direction of the project. Come help us simplify web development!
