A wise programmer once said, “You don’t write code for yourself, you write for others or your future-self”. Imagine that you are working on a project which everyone is writing in their own style and standard. Everyday, you need to spend some times to get familiar with the code before you can start coding. It’s very inefficient for everyone’s daily works. Thus, code consistency and readability is very important for every project. Most of the programming language have their own linter, and for Javascript, Eslint is one of the best.

If you take a look at this repo, awesome-eslint, and you will notice there are tons of plugin and rules for Eslint. You may wonder what is the Eslint plugins or configs that you can use for your React Native project. Today, I’m going to share with you some basic Eslint plugins that you can have for your React Native project.

Standard Eslint for React Native

Airbnb Javascript Style Guide​
One of the most adopted Javascript Eslint config because it has the most reasonable style for Javascript programming. In this config, it’s also included linting for React and ECMAScript 6+. If you are not doing for React, Airbnb does publish another config that is without React, eslint-config-airbnb-base.

Eslint Plugin for React Native
On top of React, this plugin provide extra few linting particularly for React Native, such as no-unused-styles, no-inline-styles, split-platform-components.

EslintPlugin for React Hooks
In React 16.8, Facebook introduce React Hooks, where you can use state and other features of React without a Class. It’s also allow sharing of state logic across components. Together with React Hooks, Facebook also introduce this Eslint plugin to enforce the rules of Hooks. If you plan to use Hooks, you are highly recommended to install this plugin.

Eslint Plugin for Jest
Jest is a testing framework that widely use for React and React Native applications, it’s easy to setup and most importantly, it has snapshot assertion that allow you to test for large object, for example, your React component. This plugin basically will help to guide and lint your Jest tests.

Eslint Plugin for Flowtype
Flowtype is the static type check for Javascript, it’s allow you to run checking of your code for any type error and missing props. In this plugin, it’s basically check for all the naming convention of type, duplication of type, missing type and etc.

That is all the basic Eslint plugins and configs for React Native, but what if you are working with many React Native projects and you want to adopt these Eslint plugins into all the projects? You will need to install all of them one by one and rewrite all the rules again? I beg you will get yourself crazy with that….

Create Shareable Eslint Config

To avoid duplicate work on settings up Eslint in your projects, you can create a shareable config that allow you to keep all your projects using the same Eslint configuration. First, let’s start with create a new Node.js module by create a folder and run npm init, remember to name the package with eslint-config-<your config name> as that is the standard for Eslint shareable config.

Next, create a index.js and put all your rules in the file, for example:

module.exports = {
  extends: [
    'airbnb',
  ],
  plugins: [
    'react',
  ],
};

To test your config before publish, you can run npm link in your shareable config folder, and run npm link eslint-config-<your config name> in the project that you want to use the config. Then, you need to update your project’s eslintrc.js by extending the shareable config.

{
    "extends": "eslint-config-<your config name>"
}

Now you should able to test your shareable config in your local machine. Before you want to publish your shareable config, you need to add the dependencies in package.json, at least, you need to define the minimum Eslint version you depending on.

"peerDependencies": {
    "eslint": ">= 3"
}

Now, you can run npm publish and your shareable config are now ready to use! In the end of the reading, I hope it’s give you some clues on how to create a shareable config for your project or organisation.

Lastly, I have created the shareable Eslint config for React Native, eslint-config-react-native-standard, please feel free to use or contribute. Thank you for reading!