Getting hints from Visual Studio Code

Tony Ross
Tony Ross
Sep 24, 2018 · 3 min read

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.

Image for post
Image for post
Getting hints from webhint in 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.

Image for post
Image for post
An accessibility issue flagged by aXe via webhint in Visual Studio Code

And tips on your app experience when building PWAs.

Image for post
Image for post
An invalid webmanifest value raised by webhint in Visual Studio Code

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.

Image for post
Image for post
A TypeScript build target issue raised by webhint in Visual Studio Code

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.

A prompt to add webhint to your project

Not using Visual Studio Code? No problem, you can run webhint from the command line instead.

Image for post
Image for post
Running webhint from the command line

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!

webhint

News about https://webhint.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store