Optimizing web apps with the Sonarwhal linter

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.

Lint everything

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.

They’re especially useful for interpreted and declarative languages, where there’s no compiler to flag errors, making it very easy to accidently publish buggy JavaScript to the web or leave Python errors in a public Jupyter Notebook. And hooking a linter up to tools like Visual Studio Code reduces the risk of errors and makes it easier to read and debug code.

Introducing Sonarwhal

One part of the modern development platform that desperately needs good linting tools is the web. Not only are you building user experiences for your applications in HTML and JavaScript, you’re using CSS for styling, and taking advantage a whole host of JavaScript browser APIs. It’s not only the familiar web, either: You’re also using the same technologies in progressive web apps (PWAs), running as standalone applications downloaded from the Microsoft Store. That’s where Sonarwhal comes in, offering linting services that fit into a web development workflow. Version 1.0 was released recently.

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.

Configure Sonarwhal

The default Sonarwhal configuration file contains most of the tests that you’re likely to need, but you have the option of installing other configurations or adding your own rules. There are more than 30 rules in six categories, testing a range of different website and application properties. Running Sonarwhal is a way of asking key questions about your web application and its contents: Are your images optimized for the web? Are you using the latest security patches in your JavaScript libraries?

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

Once a site’s loaded, it‘s ready for analysis. Additional parsers drill down into specific technologies, so for JavaScript there’s a parser based on the popular ESLint. You can build rules on top of a parser, or on Sonarwhal’s own analysis features.

The heart of Sonarwhal is its rule set. These contain the tests it applies to your website, and you can turn them on and off or adjust severity in its configuration files. The default configuration offers a selection of rules, so you can choose to test HTTP options, as well as HTML, site security, and support for PWA functions. Many of the tests require a deep knowledge of web server capabilities as well as HTML and JavaScript. However, once you’ve tested a site, the report data can help tune content and server for the best, and most secure, performance.

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.

IDG

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.