webhint: a hinting engine for the web
It was about a year ago that sonarwhal was open sourced at the JS Foundation. We've come a long way since then, implementing new features, and widening the scope of the project. We've also had the opportunity to talk with many developers from different countries and we realized that there were some challenges with the name: some people didn't know what narwhals are (or that they are real), trouble remembering or knowing what it was about, others confused it with SonarSource, and some had issues pronouncing it correctly. Even more, it looks like sonar has become a popular project name (although the renaming was already underway when this project was announced).
Because of these reasons we've decided to rename the project. Deciding on a new name wasn’t an easy task and there were many ̶h̶e̶a̶t̶e̶d̶ internal debates. In the end webhint was the winner: the new name not only communicates what the tool does in a more direct fashion; it also aligns better with our philosophy: not all projects have the same requirements and it’s up to you, the developer, to decide what’s relevant or not. webhint provides you hints on how you can make it better. Extensibility has always been in the top of our minds. There are many cases where a developer might want to create a custom hint and we want this to be as easy as possible. You can think of webhint not only as tool for best practices, but also as an engine to create specific test for the things that matter in your development.
🤔 How do I get webhint?
webhint is distributed via npm and you can get it as follows:
npm install hint📦 The hint package was gracefully donated by Nicolás Bevacqua to whom we will be always thankful 🙏.
The previous sonarwhal package has been deprecated as well as all the related ones.
🤯 What else is new in webhint?
This release focuses almost entirely on improving the user experience rather than adding more rules or features.
🚀 We’ve improved the start-up time (almost 300% faster!). To achieve this we’ve done a few things such as lazy loading parts of the code that are not needed in all scenarios, reduce the number of dependencies, optimize dependencies for global installation, and extract not critical scenarios to their own packages (and bundling those with webpack as well!).
🎁 And talking about new packages, our colleague John-David Dalton added support to npm init <create-pkg> and its alias npm create <create-pkg>. This is an awesome feature we decided to take advantage of, so now you can create new configuration files using npm create hintrc, r̵u̵l̵e̵s̵ hints with npm create hint or parsers with npm create parser. These commands will do all the necessary scaffolding to get you started:
📝 One of the pieces of feedback we’ve heard from new users of the CLI is that it can be a bit overwhelming to use it for the first time. To get you to the results faster, we now provide a default configuration that will be used when none is found. We’ve also added links through the different steps so you can quickly access the information you need to understand better what is happening and what actions you can take. If you have feedback on how to make this better, please let us know!
🌐 Another improvement we’ve made to the user experience is that if no configuration file is found in the execution folder, it will search for one in your home folder. This is great if you’ve decided to install webhint globally and want to quickly analyze a site with a configuration that’s not the default one.
Another thing related to the configuration is that it supports relative paths. Now it’s easier than ever to extend from local configurations or test your custom hints:
{
"extends": ["web-recommended"],
"hints": {
"../my-hint/hint.js": "error"
}
}But this is not all! We’ve also updated the documentation, added new hints, added a CSS parser, updated the project’s homepage, and fixed a bunch of bugs.
This is a great initial release of webhint so make sure to test it out!
