Why You Need Code Sniffers for Web Development

Code optimization is comparable to the editing phase of a writing. You may first need to get your ideas down in code, but your code should be optimized with tools like code sniffers to produce the best possible product.

Code sniffing is a term that describes checking code for compliance with regulatory standards. These regulations might specify the number of spaces to use for indentation, the placement of curly braces, or how to name variables. Standards aren’t vital to build a web application, but standards are important for internal consistency and code maintenance.

This is where code sniffing comes in handy for all developers, frontend to backend. I’d like to examine the process of code sniffing and offer some utilities that help analyze code standards.

What Is Code Sniffing?

The action of code sniffing is typically automated to save time and reduce errors. Code sniffers will check source codes for compliance with standards set by internal development teams or regulatory bodies.

Code sniffing is similar to code linting but more pedantic. Linting primarily checks for bugs and syntax errors while sniffing looks for issues in the way code is written. A PHP file can still function properly but will fail a code sniffing test if a variable name doesn’t follow standards (ie. $myVariable vs $my_variable).

Guide to Linting JavaScript with JSHint

Guide to Linting JavaScript with JSHint

Editor's note: This article is part of our Code Optimization series, where we take a look at how... Read more

A similar piece of terminology is code smell which checks for design flaws in the code that may lead to larger bugs. This can relate to code standards but also includes higher-level architectures for writing homogeneous code.

All of these areas are worth covering and are relevant to code sniffing. Just keep in mind that sniffing code won’t always find runtime bugs since its priority is maintaining strict compliance with standards.

By now you might be asking yourself do standards even matter? The truth is they do matter, but more for optimization and project clean-up. Many developers agree that standards are vital to programming and web development – especially on large team projects.

Here’s a quote from developer Paul Jones explaining why code standards are useful.

“The point of a coding style standard is not to say one style is objectively better than another… Instead the point is to set up known expectations on how code is going to look.”

If you’re building a small webapp for yourself it may not be worth spending time on WCAG 2.0 or PSR-2 standards. But consider the hundreds of developers working on Adobe Photoshop’s source code. It would be chaotic if each person wrote their own style and combined it all together.

Although teams rely heavily on standards, these rules can still be useful to lone developers as well. You can find code standards for everything from CSS to WordPress so there’s no excuse to not try and see if your code quality improves.

The Value of Code Standards

Standards will naturally keep your code clean and organized. Developers know exactly how to write code and how to follow along with each other’s work.

Code standards also help open source development by offering rules for others to follow. Files can be picked up by anyone months or years later and still be easy to read.

A strict coding style is a good idea even if you choose to make up your own. This takes a lot of effort, but as projects grow this type of documentation is invaluable.

Here are some coding standards to consider that span the gamut of various web languages.

Best Code Sniffing Resources

It’s now possible to find free code sniffers for everything from HTML/CSS to backend languages like PHP and SQL. You may not need to use these sniffers or follow standards for every language but it’s worth investigating the possibilities to see what might improve your performance.

Frontend Code Sniffers

Although HTML doesn’t need a code sniffer that didn’t stop Squiz from building one. It’s completely open source and hosted on GitHub with the options to copy/paste code into the browser or save a bookmarklet to run on individual webpages.

This sniffer checks against WCAG’s three levels of A, AA, and AAA accessibility standards along with the section 508 guidelines which apply primarily to government websites.

html code sniffer webapp

CSS developers might like this free CSS code sniffer which is also open source, hosted through the Node Package Manager.

jQuery users should check out JSCodeSniffer built by Dmitry Sheiko. This is another free webapp hosted on GitHub that complies with jQuery’s code style guide.

js code sniffer github

Alternatively you might want to try linting your JS code with JavaScript Lint or JS Lint. These tools check for errors in syntax rather than code standards, but they’re also very helpful when it comes to frontend code optimization.

For the record it’s also possible to check JS/CSS standards directly with PHP_CodeSniffer.

The PHP Code Sniffer

PHP_CodeSniffer is a must-have tool in your toolbelt if you’re looking to comply with PHP code standards. The package contains a few PHP scripts that analyze PHP, JS, and CSS code for compliance with your choice of code style documentation.

The creator of PHP_CodeSniffer Greg Sherwood wrote a wonderful backstory about how the idea came about and what problems it attempts to solve (well worth reading if you have the time).

In summary, Greg was working with a team learning JavaScript built into a PHP app. Their goal was to structure the JS in a way that followed PHP’s code standards to make life easier switching back and forth. Thus PHP_CodeSniffer was born.

php codesniffer screenshot

This is great for PHP developers because the language is very loose with mandatory style requirements. Frameworks such as Laravel are more strict, but developers can (and should) setup their own code standards without relying on a 3rd party framework.

Various standards like PSR-0, PSR-1, and PSR-2 are all popular and packaged with the PHP sniffing library.

But you can find plenty of other pre-made code standards for PHP CMS’ like WordPress, Magento, and Drupal. Developers on the Drupal core even released an official code sniffer module named Coder.

PHP is undoubtedly the easiest language to optimize with code sniffers. If you’re looking for a list of PHP code standards check out this GitHub entry.

Other Backend Code Sniffers

Backend developers work with a variety of languages beyond PHP and the numbers are growing each year. With alternate languages we also have alternate code sniffing libraries like code-sniffer for Python.

It’s possible to check other scripts online or use tools like PyLint. But this is another methodology that requires patience to work into your development flow.

pylint console webapp

Ruby devs also have a series of choices when it comes to code linting and analysis. The best ones are always free and open source like Ruby Lint, a static code analyzer built for modern Ruby code.

I’ve yet to find a dedicated Node.js code sniffer but I’m hoping a project will emerge with time. There are JS code sniffers that support Node standards, but it’s still a newer backend language and requires time to grow.

Lastly we have SQL syntax used for databases. This code may be trickier since it’s difficult to find well-supported syntax standards for SQL source code. But I did find a SQL formatting webapp which should prove tremendously useful when optimizing database queries.

Wrap Up

The best place to start code sniffing is with one language and one standard. HTML/CSS is an easy place to start for frontend developers while PHP is often a favorite choice among backend developers (especially WordPress devs).

And if you want to learn more check out these related posts on code sniffing, linting, and automated code analysis for optimization.