Customizing ESLint for a Specific Directory


Noah Settersten
Customizing ESLint for a Specific Directory

As part of our React Native toolchain here at Headway, we make use of the popular ESLint tool to encourage consistency in our code style across the team. This means that no matter what project a developer jumps in on, we can reduce the time needed to get up to speed with the background concerns of an app and instead focus on delivering core features.

For our React Native projects, we rely on Airbnb’s excellent base ESLint ruleset and then make a handful of specific changes for us. Recently, we’ve run into a number of cases where the react/prefer-stateless-function rule was resulting in our team rewriting components back and forth between classes and pure functions whenever the needs for local state changed. To prevent this code churn on those portions of our app that we know will likely need local state in the future, primarily our “smart” containers that use Redux, we needed a way to turn off this rule only on those files.

General ESLint Rules to Get You Started

For this to work, we have to tell ESLint that the config file in our project’s directory should be considered the root configuration. This will prevent ESLint from looking for further config files up the hierarchy on disk or within the user’s directory.

All that’s needed here is to add a root: true line to our project’s .eslintrc.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* In our .eslintrc.js */
  module.exports = {
    root: true,
    extends: "airbnb",

    rules: {
      /* Here's where we place our customizations to AirBnb's rules
       * Below are a few representative examples:
       */
      // Allow JSX in React Native JS files
      'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],

      // For React Native's image inclusion via require('../example.png')
      'global-require': 'off',

      /* ... */
    },
  };

Specific Customization for a Folder

Within our ‘containers’ folder that holds our connected Redux components, we then create another .eslintrc.js to override the inherited rules. When linting a file, ESLint will first look in the same directory as the file for a config file and then work its way up the tree until it hits a file with root: true. This makes it straightforward to override specific rules for each directory as needed. For disabling our react/prefer-stateless-function rule, we just need the following:

1
2
3
4
5
6
/* In app/containers/.eslintrc.js */
  module.exports = {
    rules: {
      'react/prefer-stateless-function': 'off',
    },
  };

Why This Type of Tool Matters

Dialing in our conventions and code style not only maintains consistency across projects and developers, but also keeps us all working effectively as a team. Little improvements to our checks like this can really save us some headaches and wasted time as we’re able to fix issues that were flagged before committing and pushing the code to anyone else.

Linting is especially beneficial in the context of code reviews. When teams take the time to codify style guides and enforce them in an automated way, code reviews almost instantly become a place where substance and correctness are discussed rather than newlines and comma placement.

To learn more about setting up a development environment for a quicker feedback loop, take a look at one of our webinars:


SIGN UP FOR OUR NEWSLETTER

The Weekly Manifest

Receive the latest design, development, and startup articles to stay updated!

Close

Inquiry Sent!

Thanks so much for your interest in working with us, and for your time to fill out the form. We're passionate about what we do and would love the opportunity to create a successful solution for you.

Expect to hear back from us within the next 3 business days.

Work With Us

We can take on any type of project, but we don’t work with everyone. We only partner with clients that align with our business values, honestly benefit from our expertise, and embrace the systems we build in.

Fill out the form below to start a conversation see if you’re the right fit for us.

What type of project would you like to partner with us on?