One of the more useful elements of the modern developer environment is also one of the oldest development tools. Originally developed as part of YACC (Yet Another Compiler Compiler), the first linter was the equivalent of a grammar checker for C code. Taking its name from the bits of loose fluff found in wool, Lint highlighted errors, bugs, and problematic code.
Over the years, it gave its name to a whole menagerie of linting tools, mainly focused on the C and C++ worlds, but with versions for other languages and programming models. A well-designed linter runs through your code before compilation so you can correct errors and optimize it. A modern linter is an add-on to a compiler (though many modern compilers, especially tools such as .Net’s Roslyn, offer linting features as part of multistage operation), run separately to highlight many classes of possible problems with code, including uninitialized variables, poor formatting, and license issues. Such linters can even help refactor your code.
An open source project under the auspices of the JS Foundation, Sonarwhal comes from the Microsoft Edge developer tools team. Named for the high-resolution sonar abilities of the narwhal, it takes rules, either its defaults or your own, and applies them to your site code, reporting on issues to help build better, faster, and more secure sites. The narwhal Nellie is also the project’s cartoon mascot, often found travelling in a DeLorean.
Get started with Sonarwhal
Setting up Sonarwhal is easy enough; all you need is a reasonably up-to-date copy of Node.js (anything later than the current long-term support release is supported) and NPM. You can run it directly from a NPM repository via
npx, though if you want to customize the rule set, you can install it locally via the NPM command line. Once installed, a wizard walks you through basic configuration, ready to run from your chosen command line. As it’s a terminal-based tool, you can run Sonarwhal anywhere you can access a terminal. There’s no Code extension for Sonarwhal yet, which is a pity, because an integrated web linter would be a very useful tool for anyone using Code to build web applications.
Testing a site is easy enough. Once it’s installed and configured, in your terminal type
sonarwhal <siteURL> to start a test. Because some rules are relatively complex, this can take a while, but once the tests are complete you’ll get a list of errors and warnings.
It’s not purely a tool for testing live websites and services. Built-in parsers can work with local content to test key configuration files for low-level web development tools, including transpilers like Babel’s and TypeScript’s, or module bundlers like Webpack. Using a parser in Sonarwhal, you can test that a tool you’re using will generate the code or modules that you expect, and that they won’t cause problems when published. Sonarwhal’s parser model lets you add parsers for new services or for application-specific features.
Sonarwhal accesses websites via connectors, which take advantage of the automation functions in modern browsers to load contents. You’ll need to install any browsers needed by the connector, such as Chrome or Edge. Connectors can be configured to use different user agent strings, as well as forcing specific header settings; for example, controlling caching and accepted language resources.
Parsers, rules and results
Results arrive in any of several formats. One option gives you the data in a raw JSON format, ideal for use in other applications. While JSON isn’t human-readable, other options show summaries, a list of specific code issues, or a table of error data. You can even drop result data in an Excel spreadsheet. The formatter model is extensible, so you can create your own and offer them to other users.
Sonarwhal as a service
The Sonarwhal documentation includes an online site scanning tool, so you can get a feel for how you might use it to refactor and correct existing sites. I ran it over my personal website, built using a template on a common web publishing platform. You might think that that should mean that my site would have as few bugs as possible, but that wasn’t the case. Not only did it throw up 77 security errors (mainly due to images served over HTTP rather than HTTPS), there were also a significant number of performance errors—including a selection of images that hadn’t been optimized for the web and as a result were slowing the site down significantly.
There was one good piece of news: If I wanted to take my site and turn it into a, it wouldn’t take too much work. All I’d need to do would be to add an icon to work with iOS’s launch screen, outside of the standard PWA manifest. To speed things up, Sonarwhal’s scanner included links to appropriate documentation, with explanations of the problems and possible ways to fix them. The documentation also focuses on how to optimize fixes; for example, only using a single 180-by-180-pixel icon in iOS PWAs, because iOS handles icon scaling on older devices, and between phones and tablets.
The web is an important part of how we all build applications, and it’s one we all often neglect. With a tool like Sonarwhal, there’s a lot you can learn about your sites and servers that can improve how you deliver web content. By building a better web, you make it more secure and more responsive, something that will help keep users coming back again and again.