Rules for Configuring ESLint to Optimize Code Review
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
:
/* 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:
/* 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:
Originally published by Noah Settersten at headway.io.
Did you like this article?
You can get more articles like this one about business & product strategy, design, and development right into your inbox through The Manifest.
More articles from our crew
Design
Tips for New Product Designers Without Design Experience
What is Gamification and How Can You Use It to Increase Product Engagement?
Using the Rules of Typography to Improve Your Designs
Development
React Native is Getting Evicted by Airbnb: Our Response
React Native: Customizing ESLint for a Specific Directory
Time Travel in Vanilla JavaScript
Strategy
Apple App Store Revenue: Keep a Bigger Piece of the Pie with Web-Based Purchases
Marketing
Focus on the Emotions That Motivate Customers to Use Your Product
Stop Confusing Your Customers: Be More Clear with Website Copy and Guide Them to Purchase
Writing Better Call to Actions that Empower your Customers to Click