Step Up Your Code Quality with ESLint

In software development, numerous tools can streamline our workflow and enhance code quality. However, amidst the multitude of languages, extensions, IDEs, and libraries, it’s easy to overlook a few gems. It’s hard enough to keep track of everything involved in a project, and harder still to discover all of the features each tool can offer. I’m sure more than a few of us have set up our IDEs, installed a couple of extensions, gone through the README, and then promptly forgotten about what’s going on behind the scenes. With that said, I was recently surprised to discover more things ESLint can do.

It’s not just a tool for formatting code, but a powerful assistant to write better, more idiomatic code. Here, I’ll share a few techniques I recommend when using ESLint, including one game-changer I only recently discovered.

Enforce imports with the no-restricted-imports rule.

The no-restricted-imports rule was a game-changer in my coding process. This rule allows us to enforce restrictions on certain module imports, significantly reducing the occurrence of recurring problematic bugs.

Here’s what the relevant rule looks like:

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "@apollo/client",
            importNames: ["useMutation"],
            message:
              "Please use the custom useMutation hook instead of the one from @apollo/client.",
          },
          {
            name: "lodash",
            message:
              "Please import specific lodash functions as separate modules, e.g., import map from 'lodash/map'.",
          },
        ],
      },
    ],
  },
}

The custom useMutation hook is a small wrapper around Apollo Client’s useMutation hook, which prevents firing the same mutation twice in quick succession. This allows us to feel confident that we won’t run into any “double click” bugs, even if we forget to disable a button during a mutation.

The lodash import rule ensures that we keep our bundle size as small as possible. Lodash has some issues with tree-shaking, but the individual modules help us keep the bundle size down.

We could certainly include some other rules here, but these two issues were the most common in our codebase. I love how easy it is to add new rules. And, the best part? You can include custom messages with alternative instructions for these imports.

Integrate ESLint with Prettier.

One of the reasons ESLint is easily forgotten is because it just works after setting it up. I recommend integrating ESLint with Prettier and VSCode and enabling the Format On Save option. This ensures that any code checked into the repository will match the pre-defined formatting rules, maintaining consistency across the team’s code.

Customize opinionated rules.

Pre-configured rule sets like the popular Airbnb, Standard, and Google style guides are fantastic starting points. However, it’s essential to review their documentation and decide whether certain rules align with your project’s needs. Feel free to override any rules in the ESLint config that don’t fit your coding style or preferences. For example, I prefer to keep prefer-destructuring off, as I find it interferes with “recognizable” code.

Adopt a proactive approach.

Don’t wait until you’re frustrated by a recurring issue in your codebase. Often, there’s an ESLint rule that addresses that exact problem. All it takes is figuring out the rule name. Explore popular repositories on GitHub, delve into the ESLint documentation, and continuously seek improvements in your coding practices. I often put up with frustrating quirks in a codebase for too long, and then get even more frustrated with myself when I find that it usually takes less than five minutes to find a rule and apply it to the ESLint config. Be better than me!

Leveraging ESLint

ESLint is more than just a tool for enforcing code formatting. It can help you write better, more efficient code, and maintain consistency across your projects. By leveraging rules like no-restricted-imports, integrating with Prettier, and customizing opinionated rules, you can take your code to the next level. It’s never too late to make changes and improvements. I encourage you to explore, experiment, and elevate your coding practices with ESLint.