Enhancing Code Quality with Linters and Formatters

Up to this chapter, we’ve dealt mostly with constructs and code that has been in the hot path – that is, directly necessary to actually do something. However, in most projects, there are many parts that are not directly useful or visible. Quite often, these parts play a crucial role in keeping projects at a certain quality.

One example in the field of software project quality enhancers is the tooling that is used to ensure certain coding standards are being followed. Those tools can appear in many categories – the most prominent categories being linters and formatters. In general, these tools can be categorized as auxiliary tooling.

In this chapter, we’ll learn what types of auxiliary tooling exist and why we’d potentially want to use some extra tooling to enhance our project’s code quality. We’ll introduce the most important auxiliary tools such as ESLint, Stylelint, and Prettier...

Technical requirements

The complete source code for this chapter can be found at https://github.com/PacktPublishing/Modern-Frontend-Development-with-Node.js/tree/main/Chapter05.

The CiA videos for this chapter can be accessed at https://bit.ly/3fLWnyP.

Understanding auxiliary tooling

When most people think about software, they’ll have applications such as Microsoft Word, games such as Minecraft, or web applications such as Facebook in mind. Thanks to popular media, the widespread opinion is that these applications are written by individual geniuses that hack some ones and zeroes into an obscure interface. The reality could not be more far off.

As you know, to create any kind of software, lots of libraries, tooling, and – in many cases – large teams are necessary. However, what most people underestimate is the effort to just keep the ball rolling – that is, to still be able to add new features to the existing software. There are several issues that contribute to this feature slowdown.

On the one hand, the complexity within software always rises. This is whether we want it or not – with every new feature, a project becomes more challenging. In addition, larger software tends to be written by...

Using ESLint and alternatives

ESLint statically analyzes code to identify common patterns and find problems. It can be used as a library from your Node.js applications, as a tool from your Node.js scripts, in your CI/CD pipelines, or implicitly within your code editor.

The general recommendation is to install ESLint locally in your Node.js project. A local installation can be done with your favorite package manager, such as npm:

$ npm install eslint --save-dev

In most cases, you’ll want to specify the --save-dev flag. This will add a dependency to the development dependencies, which are not installed in consuming applications and will be skipped for production installations. Indeed, development dependencies are only interesting during the project’s actual development.

Alternatively, you can also make ESLint a global tool. This way, you can run ESLint even in projects and code files that do not already include it. To install ESLint globally, you need to run...

Introducing Stylelint

Stylelint is a linter for CSS files and can be extended to also understand CSS dialects such as SCSS, Sass, Less, or SugarCSS. It has over 170 built-in rules but, much like ESLint, provides support for custom rules.

To install Stylelint, we can follow the same steps as with ESLint:

1. Here, it usually makes sense to rely on the standard configuration provided by Stylelint. Unlike ESLint, the standard configuration is released in a separate package and, therefore, needs to be installed as well. The command to install both packages as development dependencies looks like this:

   $ npm install stylelint stylelint-config-standard

     --save-dev

2. In any case, we still require a configuration file. For the moment, it is sufficient to just let stylelint know that we want to use the configuration from the stylelint-config-standard package. Here, we can write another configuration file next to the project’s package.json:

.stylelintrc...

Setting up Prettier and EditorConfig

Prettier is a code formatter that works with a lot of different source files. Among the supported file types, we have plain JavaScript, Flow, TypeScript, HTML, CSS, SASS, Markdown, and many more. Prettier is also integrated into many different editors such as Atom, Emacs, Sublime Text, Vim, Visual Studio, or VS Code.

Let’s dig into installing and configuring the Prettier formatter:

1. Such as the previous tools, Prettier can be installed locally or globally. Adding Prettier to an existing project can be done by installing the prettier package from the npm registry:

   $ npm install prettier --save-dev

2. Prettier can format JavaScript code even without any configuration. To run Prettier on an existing code file, you can use the prettier utility with npx. For instance, to apply formatting to your previous code file, you can run:

   $ npx prettier index.js

   export function div(a, b) {

     return a / b;

   }

In this case, Prettier just...

Summary

In this chapter, you learned how code quality can be enhanced with the help of linters and formatters. You can now use common tools such as EditorConfig, Prettier, Stylelint, or ESLint. You are now able to add, configure, and run these tools in any project that you like.

At this point, you can contribute to pretty much all frontend projects that are based on Node.js for their tooling. Also, you can introduce great quality enhancers such as Prettier. Once successfully introduced, these tools ensure that certain quality gates are always fulfilled. In the case of Prettier, discussions about code style are mostly a thing of the past – helping teams all around the world to actually focus on the actual problem instead of dealing with code cosmetics.

A downside to keep in mind is that most of these tools have some assumptions about your code. So, if your code uses, for instance, one of the flavors we discussed in Chapter 4, Using Different Flavors of JavaScript, then...