Setting up ESLint and EditorConfig in React Native projects

I had a hard time going from 4 spaces to 2 spaces indentation, now I’m quite comfortable with it, and I’m happy that airbnb agrees with me

It’s good to have a common coding convention in project. React Native and React is just Javascript project, so let’s use the most popular linter ESLint to help us.

ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.

In Javascript, there are usually 1000 libraries for a problem, a quick search for ESLint in React Native shows something like eslint-plugin-react-native. But like many things in you-dont-need, we need to research a bit before using another frameworks. Most of the time we don’t need that many dependencies, and the less dependencies we have, the better.

How to set up ESLint

For a project set up with react-native init, ESLint is not bootstrapped by default. But it’s extremely easy to setup. Just run

npm install --save-dev eslint babel-eslint

For React and JSX syntax, we need to install some more dependencies, they are all crucial for ESLint to work

npm install --save-dev eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import

Create a configuration file at the root of the project, called .eslintrc.js There is a full configuration guide, but the minimum you can use is

module.exports = {
  'extends': 'airbnb',
  'parser': 'babel-eslint',
  'env': {
    'jest': true,
  },
  'rules': {
    'no-use-before-define': 'off',
    'react/jsx-filename-extension': 'off',
    'react/prop-types': 'off',
    'comma-dangle': 'off'
  },
  'globals': {
    "fetch": false
  }
}

We use airbnb Javascript style guide with 'extends': 'airbnb' . There are a bunch of rules and I see the best way to learn them is to use them in practice.

Next, we can add a script to package.json to lint just javascript files