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](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>

‍