What We Do

Company

Resources

Events

Blog

Free Consultation

ahoy@headway.io

(920) 309 - 5605

3 min
Customizing ESLint for a Specific Directory
Subscribe

Customizing ESLint for a Specific Directory

Noah Settersten
Senior Developer

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](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) 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`:

   -- CODE line-numbers language-lang --
   <!--
   /* 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:

   -- CODE line-numbers language-lang --
   <!--
   /* 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:

<iframe width="100%" height="450" src="https://www.youtube.com/embed/Y7khGtRtwJE?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Asking Better Questions About Your Product

Download our free guide to begin implementing feedback loops in your organization.

By filling out this form, you agree to receive marketing emails from Headway.

Scaling products and teams is hard.

In this free video series, learn how the best startup growth teams overcome common challenges and make impact.

Scaling products and teams is hard.

In this free video series, learn how the best startup growth teams overcome common challenges and make impact.

You don’t need developers to launch your startup

In this free video series, learn proven tactics that will impact real business growth.

By filling out this form, you agree to receive marketing emails from Headway.

Make better decisions for your product

Dive deeper into the MoSCoW process to be more effective with your team.

By filling out this form, you agree to receive marketing emails from Headway.

A mindset for startup growth

In this free video series, learn the common mistakes we see and give yourself a greater chance for success.

By filling out this form, you agree to receive marketing emails from Headway.

The ultimate UX audit kit

Everything you need for a killer DIY audit on your product.

  • UX Audit Guide with Checklist
  • UX Audit Template for Figma
  • UX Audit Report Template for Figma

Enjoyed this post?

Other related posts

See all the ways we can help you grow through design, development, marketing, and more.

View All

Listen and learn from anywhere

Listen and learn from anywhere

Listen and learn from anywhere

The Manifest

Level up your skills and develop a startup mindset.
Stay up to date with the latest content from the Headway team.